The u tag, or Unarticulated Annotation element, defines text that is unarticulated, such as misspelled words. Syntax Because the <u> tag was formerly used to underline text, browsers still generally render it as underlined. However, underlined text should be created using CSS instead, and not the <u> tag. <p>This <u>txet</u> is misspelled.</p>

The ul tag, or Unordered List element, is used to designated an unordered (bulleted) list. Syntax The <li> tag is used inside of the <ul> tag to designate each list item. <ul> <li>A list item in an unordered list</li> <li>Another list item in an unordered list</li> <li>And another list item in an unordered list</li> </ul>

The var tag, or Variable element, designates a variable in programming or a mathematical expression. Syntax The text inside the <var> tag is typically rendered in italic. <p>The circumference of a circle is: 2 x <var>p</var> x <var>r</var>, where <var>p</var> is π and <var>r</var> is the radius.</p>

The video tag, or Video Embed element, embeds video content in an HTML document. Syntax Text within the <video> tag is only displayed in browsers that do not support it. The <video> tag contains one or more <source> tags, each with a URL to a media file. <video width="600" height="400" controls> <source src="videoname.mp4" type="video/mp4"> <source […]

The wbr tag, or Word Break Opportunity element, defines where a line break is okay to add in a text. Syntax Use the <wbr> tag to add word break opportunities within text where a word may be too long and the line break would otherwise happen elsewhere. <p>Xeno<wbr>transplant<wbr>ation is one of the longest words in […]

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. […]