Specifies the accent color for different user-interface controls Syntax accent-color: auto|color|initial|inherit;   /* accent-color: blue; accent-color: auto; */ Values auto The browser chooses the accent color. color Specifies the color to be used. Can use RGB, hex, or named-color. initial Sets property to default value. inherit Sets property to the value of its parent element.

Specifies how much space between and around items along a flexbox’s cross-axis or a grid’s block axis Syntax /* align-content: center; align-content: normal; */ Values start items are packed right next to each other against the start edge of the alignment container in the cross axis end items are packed next to each other against […]

Specifies the default alignment for items inside the flexible container. Syntax Explain the syntax of this reference item and show an example in the code block below. Try to remove as much unnecessary items as possible. It’s important this is easy to process at a glance. /* div {    display: flex;    align-items: center; […]

specifies the alignment for a selected item inside the flexible container Syntax /* align-self: auto; align-self: baseline; */ Values auto auto is the default. The element inherits its parent container’s align-items property or stretch if it has no parent container. stretch Element is positioned to fit the container center Element is positioned at the center […]

Resets all properties to their initial or inherited value. Syntax /* all: unset; */ Values initial changes all properties to their initial value inherit Changes all properties applied to the element to their parent value unset Changes all properties applied to the element to their parent value if they’re inheritable or their initial value, if […]

The animation property is shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state. Syntax The animation-duration property must always be specified or else the duration will default to 0 and the animation will never be displayed. /* wrap <code> tags inside <pre> tags to create code blocks like this */ Values animation-name Specify […]

Sets a delay for the start of an animation. This value is defined in seconds or milliseconds. Syntax Explain the syntax of this reference item and show an example in the code block below. Try to remove as much unnecessary items as possible. It’s important this is easy to process at a glance. /* animation-delay: […]

Sets whether an animation should be played forwards, backwards, or both alternating. Syntax /* animation-direction: normal; */ Values normal Default value: the animation is played forwards. reverse The animation is played backwards. alternate The animation is played forwards, then backwards. alternate-reverse The animation is played backwards, then forwards. initial Sets property to default value. inherit […]

Specifies how long an animation should take to complete a full cycle. Syntax /* animation-duration: 4s; */ Values time Can be specified in seconds or milliseconds. initial Sets property to default value (0 seconds). inherit Sets property to inherited value.

The animation-fill-mode property designates a style for the element before the animation starts, after it ends, or both. Syntax Since CSS animations do not affect the element before or after the first or last keyframe is played, this property can override the behavior. div.ex { animation-fill-mode: backwards; } Values none Default value. No styles are […]

Specifies how many times an animation should be played. Syntax /* animation-iteration-count: 3; */ Values number specifies how many times an animation should be played. Default: 1. infinite The animation will play an infinite amount of times. initial Sets the property to the default value. inherit Sets the property to the inherited value.

Specify the name for the @keyframes animation. Syntax /* animation-name: myAnimation; */ Values keyframename Specifies the name of the @keyframe you want to bind to the selector. none Sets the name to the default value, specifies that there will be no animation. initial Sets the property to the default value. inherit Sets the property to […]

Specifies whether the animation is running or paused. Syntax /* animation-play-state: running; */ Values running Default value: specifies that the animation is running. paused Specifies the animation is paused. initial Sets the property to its default value. inherit Sets the property to its inherited value.

The animation-timing-function property designates the speed curve of an animation. Syntax The speed curve specifies the time an animation takes to complete. It is used to make the changes smoothly. div.ex { animation-timing-function: ease-in-out; } Values linear The same speed from start to end is set for the animation. ease Default value. The animation starts […]

Add a graphical effect to the area behind an element Syntax /* backdrop-filter: initial; backdrop-filter: blur; */ Values none Default value: no filter is applied. filter You can specify the filter you want to use here. initial Sets the property to its default value. inherit Sets the property to its inherited value.

The backface-visibility property specifies whether or not the back face (a mirror image of the front face that is being displayed) should be visible. Syntax Useful when an element is rotated to designate whether the user should see the back face or not. div.ex { backface-visibility: hidden; } Values visible Default value. Sets the back […]

The background property is shorthand for background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment. Syntax Any of the above values are allowed to be omitted. div.ex { background: #0000ff url('example-image.jpg') no-repeat fixed right center; } Values background-color Sets the color of the background. background-image Sets an image or multiple images as the background of […]

This ensures the background-image will or will not scroll with the page. Syntax /* background-attachment: scroll; */ Values scroll background-image will scroll with the page. fixed background-image will not scroll with the page. inherit The element will inherit this quality from its parent element.

The background-blend-mode property specifies the blending mode of each background layer, whether it’s a color and/or an image. Syntax Example: div.ex { background-image: url('img-one.jpg'), #0000ff; background-blend-mode: multiply; } Values normal Default value. Sets blending mode to normal. multiply Sets blending mode to multiply. screen Sets blending mode to screen. overlay Sets blending mode to overlay. […]

Sets how far the background should extend within an element. Syntax /* background-clip: content-box; */ Values border-box The background will extend behind the border. content-box The background will extend to the edge of the content box. inherit This element will inherit this property from its parent element.

This property sets the background color. Syntax /* background-color: green; */ Values color Sets the color of the background inherit The element will inherit this property from its parent element.

Sets an image as the background of an element. Syntax /* background-image: url("pumpkin.gif"); */ Values url("URL") Specifies the URL of the image to be used as the background image. inherit This element inherits this property from its parent element.

The background-origin property designates the origin position of a background image. Syntax If background-attachment is set to “fixed”, this property has no effect. div.ex { background-image: url('example-image.jpg'); background-origin: content-box; } Values padding-box Default value. The background image starts from the top left corner of the padding edge. border-box The background image starts from the top […]

The background-position property specifies the position at which a background image starts. Syntax The default setting is to start the background image at the top-left corner of the element, and repeat it both horizontally and vertically. div.ex { background-image: url('example-image.png'); background-position: center; } Values left top left center left bottom right top right center right […]