The accent-color CSS property sets the accent color for user-interface controls generated by some elements.

Browsers that support accent-color currently apply it to the following HTML elements:

• <input type="checkbox">
• <input type="radio">
• <input type="range">
• <progress>

Each user agent has an accent color, with variations to ensure legibility and contrast. That accent color is not used by every user-interface control nor in every state of the control. The accent-color is only applied to user-interface controls that use an accent color in the states where it is applicable.

MDN Reference

The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, “activation” typically starts when the user presses down the primary mouse button.

MDN Reference

In CSS, ::before creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

MDN Reference

The CSS align-content property sets the distribution of space between and around content items along a flexbox’s cross axis, or a grid or block-level element’s block axis.

This property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap).

MDN Reference

The CSS align-items property sets the align-self value on all direct children as a group. In flexbox, it controls the alignment of items on the cross axis. In grid layout, it controls the alignment of items on the block axis within their grid areas.

MDN Reference

The align-self CSS property overrides a grid or flex item’s align-items value. In grid, it aligns the item inside the grid areas. In flexbox, it aligns the item on the cross axis.

The property doesn’t apply to block-level boxes, or to table cells. If a flexbox item’s cross-axis margin is auto, then align-self is ignored.

MDN Reference

The all shorthand CSS property resets all of an element’s properties except unicode-bidi, direction, and CSS Custom Properties. It can set properties to their initial or inherited values, or to the values specified in another cascade layer or stylesheet origin.

MDN Reference

The animation shorthand CSS property applies an animation between styles. It is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, and animation-timeline.

This property is a shorthand for the following CSS properties:

• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timeline
• animation-timing-function

MDN Reference

The animation-composition CSS property specifies the composite operation to use when multiple animations affect the same property simultaneously.

MDN Reference

The animation-delay CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation.

MDN Reference

The animation-direction CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.

MDN Reference

The animation-duration CSS property sets the length of time that an animation takes to complete one cycle.

MDN Reference

The animation-fill-mode CSS property sets how a CSS animation applies styles to its target before and after its execution.

MDN Reference

The animation-iteration-count CSS property sets the number of times an animation sequence should be played before stopping.

MDN Reference

The animation-name CSS property specifies the names of one or more @keyframes at-rules that describe the animation to apply to an element. Multiple @keyframe at-rules are specified as a comma-separated list of names. If the specified name does not match any @keyframe at-rule, no properties are animated.

MDN Reference

The animation-play-state CSS property sets whether an animation is running or paused.

MDN Reference

The animation-timing-function CSS property sets how an animation progresses through the duration of each cycle.

MDN Reference

The :any-link CSS pseudo-class selector represents an element that acts as the source anchor of a hyperlink, independent of whether it has been visited. In other words, it matches every <a> or <area> element that has an href attribute. Thus, it matches all elements that match :link or :visited.

MDN Reference

The appearance CSS property is used to display UI elements with platform-specific styling, based on the operating system’s theme.

Before standardization, this property allowed elements to be shown as widgets, such as buttons or check boxes. It was considered a misfeature and authors are encouraged to use only standard keywords now.

MDN Reference

The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element’s box. This means that even if the parent container or viewport size changes, the browser will adjust the element’s dimensions to maintain the specified width-to-height ratio. The specified aspect ratio is used in the calculation of auto sizes and some other layout functions.

At least one of the box’s sizes needs to be automatic in order for aspect-ratio to have any effect. If neither the width nor height is an automatic size, then the provided aspect ratio has no effect on the box’s preferred sizes.

MDN Reference

The :autofill CSS pseudo-class matches when an <input> element has its value autofilled by the browser. The class stops matching if the user edits the field.

MDN Reference

The ::backdrop CSS pseudo-element is a box the size of the viewport, which is rendered immediately beneath any element being presented in the top layer.

MDN Reference

The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect the element or its background needs to be transparent or partially transparent.

MDN Reference

The backface-visibility CSS property sets whether the back face of an element is visible when turned towards the user.

An element’s back face is a mirror image of its front face. Though invisible in 2D, the back face can become visible when a transformation causes the element to be rotated in 3D space. (This property has no effect on 2D transforms, which have no perspective.)

MDN Reference

The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values.

This property is a shorthand for the following CSS properties:

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size

MDN Reference

The background-attachment CSS property sets whether a background image’s position is fixed within the viewport, or scrolls with its containing block.

MDN Reference

The background-blend-mode CSS property sets how an element’s background images should blend with each other and with the element’s background color.

MDN Reference

The background-clip CSS property sets whether an element’s background extends underneath its border box, padding box, or content box.

The background is always drawn behind the border, so background-clip: border-box has a visual effect only when the border is partially opaque or has transparent or partially opaque regions. Also, the background-clip: text property has little to no visual effect if the text is fully or partially opaque.

MDN Reference

The background-color CSS property sets the background color of an element.

MDN Reference

The background-image CSS property sets one or more background images on an element.

The background images are drawn on stacking context layers on top of each other. The first layer specified is drawn as if it is closest to the user.

The borders of the element are then drawn on top of them, and the background-color is drawn beneath them. How the images are drawn relative to the box and its borders is defined by the background-clip and background-origin CSS properties.

If a specified image cannot be drawn (for example, when the file denoted by the specified URI cannot be loaded), browsers handle it as they would a none value.

MDN Reference

The background-origin CSS property sets the background’s origin: from the border start, inside the border, or inside the padding.

Note that background-origin is ignored when background-attachment is fixed.

MDN Reference

The background-position CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin.

MDN Reference

The background-position-x CSS property sets the initial horizontal position for each background image. The position is relative to the position layer set by background-origin.

The value of this property is overridden by any declaration of the background or background-position shorthand properties applied to the element after it.

MDN Reference

The background-position-y CSS property sets the initial vertical position for each background image. The position is relative to the position layer set by background-origin.

The value of this property is overridden by any declaration of the background or background-position shorthand properties applied to the element after it.

MDN Reference

The background-repeat CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.

MDN Reference

The background-size CSS property sets the size of the element’s background image. The image can be left to its natural size, stretched, or constrained to fit the available space.

Spaces not covered by a background image are filled with the background-color property, and the background color will be visible behind background images that have transparency/translucency.

MDN Reference

In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

MDN Reference

The block-size CSS property defines the horizontal or vertical size of an element’s block, depending on its writing mode. It corresponds to either the width or the height property, depending on the value of writing-mode.

If the writing mode is vertically oriented, the value of block-size relates to the width of the element; otherwise, it relates to the height of the element. A related property is inline-size, which defines the other dimension of the element.

MDN Reference

The block-size CSS property defines the horizontal or vertical size of an element’s block, depending on its writing mode. It corresponds to either the width or the height property, depending on the value of writing-mode.

If the writing mode is vertically oriented, the value of block-size relates to the width of the element; otherwise, it relates to the height of the element. A related property is inline-size, which defines the other dimension of the element.

MDN Reference

The border shorthand CSS property sets an element’s border. It sets the values of border-width, border-style, and border-color.

This property is a shorthand for the following CSS properties:

• border-width
• border-style
• border-color

MDN Reference

The border-block CSS property is a shorthand property for setting the individual logical block border property values in a single place in the style sheet.

border-block can be used to set the values for one or more of border-block-width, border-block-style, and border-block-color setting both the start and end in the block dimension at once. The physical borders to which it maps depends on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top and border-bottom or border-right, and border-left properties depending on the values defined for writing-mode, direction, and text-orientation.

The borders in the other dimension can be set with border-inline, which sets border-inline-start, and border-inline-end.

This property is a shorthand for the following CSS properties:

• border-block-color
• border-block-style
• border-block-width

MDN Reference

The border-block-color CSS property defines the color of the logical block borders of an element, which maps to a physical border color depending on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top-color and border-bottom-color, or border-right-color and border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.

The border color in the other dimension can be set with border-inline-color which sets border-inline-start-color, and border-inline-end-color.

MDN Reference

The border-block-end CSS property is a shorthand property for setting the individual logical block-end border property values in a single place in the style sheet.

This property is a shorthand for the following CSS properties:

• border-block-end-color
• border-block-end-style
• border-block-end-width

MDN Reference

The border-block-end-color CSS property defines the color of the logical block-end border of an element, which maps to a physical border color depending on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.

MDN Reference

The border-block-end-style CSS property defines the style of the logical block-end border of an element, which maps to a physical border color depending on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation.

MDN Reference

The border-block-end-width CSS property defines the width of the logical block-end border of an element, which maps to a physical border color depending on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.

MDN Reference

The border-block-end-width CSS property defines the width of the logical block-end border of an element, which maps to a physical border color depending on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.

MDN Reference

The border-block-start CSS property is a shorthand property for setting the individual logical block-start border property values in a single place in the style sheet.

This property is a shorthand for the following CSS properties:

• border-block-start-color
• border-block-start-style
• border-block-start-width

MDN Reference

The border-block-start-color CSS property defines the color of the logical block-start border of an element, which maps to a physical border color depending on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.

MDN Reference

The border-block-start-style CSS property defines the style of the logical block-start border of an element, which maps to a physical border color depending on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation.

MDN Reference

The border-block-start-width CSS property defines the width of the logical block-start border of an element, which maps to a physical border color depending on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.

MDN Reference

The border-block-start-width CSS property defines the width of the logical block-start border of an element, which maps to a physical border color depending on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.

MDN Reference

The border-block-style CSS property defines the style of the logical block borders of an element, which maps to a physical border color depending on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation.

MDN Reference

The border-block-width CSS property defines the width of the logical block borders of an element, which maps to a physical border color depending on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.

MDN Reference

The border-block-width CSS property defines the width of the logical block borders of an element, which maps to a physical border color depending on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation.

MDN Reference

The border-bottom shorthand CSS property sets an element’s bottom border. It sets the values of border-bottom-width, border-bottom-style and border-bottom-color.

This property is a shorthand for the following CSS properties:

• border-bottom-color
• border-bottom-style
• border-bottom-width

MDN Reference

The border-bottom-color CSS property sets the color of an element’s bottom border. It can also be set with the shorthand CSS properties border-color or border-bottom.

MDN Reference

The border-bottom-left-radius CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.

The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.

A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property.

MDN Reference

The border-bottom-left-radius CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.

The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.

A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property.

MDN Reference

The border-bottom-right-radius CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.

The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.

A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property.

MDN Reference

The border-bottom-right-radius CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.

The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.

A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property.

MDN Reference

The border-bottom-style CSS property sets the line style of an element’s bottom border.

MDN Reference

The border-bottom-width CSS property sets the width of the bottom border of an element.

MDN Reference

The border-bottom-width CSS property sets the width of the bottom border of an element.

MDN Reference

The border-collapse CSS property sets whether cells inside a <table> have shared or separate borders.

When cells are collapsed, the border-style value of inset behaves like ridge, and outset behaves like groove.

When cells are separated, the distance between cells is defined by the border-spacing property.

MDN Reference

The border-color shorthand CSS property sets the color of an element’s border.

Each side can be set individually using border-top-color, border-right-color, border-bottom-color, and border-left-color; or using the writing mode-aware border-block-start-color, border-block-end-color, border-inline-start-color, and border-inline-end-color.

You can find out more information about border colors in Applying colors to HTML elements.

MDN Reference

The border-end-end-radius CSS property defines a logical border radius on an element, which maps to a physical border radius that depends on the element’s writing-mode, direction, and text-orientation. This is useful when building styles to work regardless of the text orientation and writing mode.

This property affects the corner between the block-end and the inline-end sides of the element. For instance, in a horizontal-tb writing mode with ltr direction, it corresponds to the border-bottom-right-radius property.

MDN Reference

The border-end-end-radius CSS property defines a logical border radius on an element, which maps to a physical border radius that depends on the element’s writing-mode, direction, and text-orientation. This is useful when building styles to work regardless of the text orientation and writing mode.

This property affects the corner between the block-end and the inline-start sides of the element. For instance, in a horizontal-tb writing mode with ltr direction, it corresponds to the border-bottom-left-radius property.

MDN Reference

The border-image CSS property draws an image around a given element. It replaces the element’s regular border.

This property is a shorthand for the following CSS properties:

• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width

MDN Reference

The border-image-outset CSS property sets the distance by which an element’s border image is set out from its border box.

The parts of the border image that are rendered outside the element’s border box with border-image-outset do not trigger overflow scrollbars and don’t capture mouse events.

MDN Reference

The border-image-outset CSS property sets the distance by which an element’s border image is set out from its border box.

The parts of the border image that are rendered outside the element’s border box with border-image-outset do not trigger overflow scrollbars and don’t capture mouse events.

MDN Reference

The border-image-repeat CSS property defines how the edge regions and middle region of a source image are adjusted to fit the dimensions of an element’s border image. The middle region can be displayed by using the keyword “fill” in the border-image-slice property.

MDN Reference

The border-image-slice CSS property divides the image specified by border-image-source into regions. These regions form the components of an element’s border image.

MDN Reference

The border-image-source CSS property sets the source image used to create an element’s border image.

The border-image-slice property is used to divide the source image into regions, which are then dynamically applied to the final border image.

MDN Reference

The border-image-width CSS property sets the width of an element’s border image.

If this property’s value is greater than the element’s border-width, the border image will extend beyond the padding (and/or content) edge.

MDN Reference

The border-image-width CSS property sets the width of an element’s border image.

If this property’s value is greater than the element’s border-width, the border image will extend beyond the padding (and/or content) edge.

MDN Reference

The border-inline CSS property is a shorthand property for setting the individual logical inline border property values in a single place in the style sheet.

The physical borders to which border-inline maps depends on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top and border-bottom or border-right, and border-left properties, depending on the values defined for writing-mode, direction, and text-orientation.

The borders in the other dimension can be set with border-block, which sets border-block-start, and border-block-end.

This property is a shorthand for the following CSS properties:

• border-inline-color
• border-inline-style
• border-inline-width

MDN Reference

Theè border-inline-colorCSS property defines the color of the logical inline borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to theborder-top-colorandborder-bottom-color, or border-right-colorandborder-left-colorproperty depending on the values defined forwriting-mode, direction, and text-orientation`.

The border color in the other dimension can be set with border-block-color which sets border-block-start-color, and border-block-end-color.

MDN Reference

The border-inline-end CSS property is a shorthand property for setting the individual logical inline-end border property values in a single place in the style sheet.

This property is a shorthand for the following CSS properties:

• border-inline-end-color
• border-inline-end-style
• border-inline-end-width

MDN Reference

The border-inline-end-color CSS property defines the color of the logical inline-end border of an element, which maps to a physical border color depending on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.

MDN Reference

The border-inline-end-style CSS property defines the style of the logical inline-end border of an element, which maps to a physical border color depending on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.

MDN Reference

The border-inline-end-width CSS property defines the width of the logical inline-end border of an element, which maps to a physical border color depending on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.

MDN Reference

The border-inline-end-width CSS property defines the width of the logical inline-end border of an element, which maps to a physical border color depending on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.

MDN Reference

The border-inline-start CSS property is a shorthand property for setting the individual logical inline-start border property values in a single place in the style sheet.

This property is a shorthand for the following CSS properties:

• border-inline-start-color
• border-inline-start-style
• border-inline-start-width

MDN Reference

The border-inline-start-color CSS property defines the color of the logical inline start border of an element, which maps to a physical border color depending on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.

MDN Reference

The border-inline-start-style CSS property defines the style of the logical inline start border of an element, which maps to a physical border color depending on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.

MDN Reference

The border-inline-start-width CSS property defines the width of the logical inline start border of an element, which maps to a physical border color depending on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.

MDN Reference

MDN Reference The border-inline-start-width CSS property defines the width of the logical inline start border of an element, which maps to a physical border color depending on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation.

The border-inline-style CSS property defines the style of the logical inline borders of an element, which maps to a physical border color depending on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top-style, border-bottom-style, border-left-style, or border-right-style properties depending on the values defined for writing-mode, direction, and text-orientation.

MDN Reference

The border-inline-width CSS property defines the width of the logical inline borders of an element, which maps to a physical border color depending on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top-width, border-bottom-width, border-left-width, or border-right-width properties depending on the values defined for writing-mode, direction, and text-orientation.

MDN Reference

The border-inline-width CSS property defines the width of the logical inline borders of an element, which maps to a physical border color depending on the element’s writing mode, directionality, and text orientation. It corresponds to the border-top-width, border-bottom-width, border-left-width, or border-right-width properties depending on the values defined for writing-mode, direction, and text-orientation.

MDN Reference

The border-top shorthand CSS property sets all the properties of an element’s left border.

This property is a shorthand for the following CSS properties:

• border-left-color
• border-left-style
• border-left-width

MDN Reference

The border-left-color CSS property sets the color of an element’s left border. It can also be set with the shorthand CSS properties border-color or border-left.

MDN Reference

The border-left-style CSS property sets the line style of an element’s left border.

MDN Reference

The border-left-width CSS property sets the width of the left border of an element.

MDN Reference

The border-left-width CSS property sets the width of the left border of an element.

MDN Reference

The border-radius CSS property rounds the corners of an element’s outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

The radius applies to the whole background, even if the element has no border; the exact position of the clipping is defined by the background-clip property.

The border-radius property does not apply to table elements when border-collapse is collapse.

This property is a shorthand for the following CSS properties:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

MDN Reference

The border-radius CSS property rounds the corners of an element’s outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

The radius applies to the whole background, even if the element has no border; the exact position of the clipping is defined by the background-clip property.

The border-radius property does not apply to table elements when border-collapse is collapse.

This property is a shorthand for the following CSS properties:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

MDN Reference

The border-right shorthand CSS property sets all the properties of an element’s right border.

This property is a shorthand for the following CSS properties:

• border-right-color
• border-right-style
• border-right-width

MDN Reference

The border-right-color CSS property sets the color of an element’s right border. It can also be set with the shorthand CSS properties border-color or border-right.

MDN Reference

The border-right-style CSS property sets the line style of an element’s right border.

MDN Reference

The border-right-width CSS property sets the width of the right border of an element.

MDN Reference

The border-right-width CSS property sets the width of the right border of an element.

MDN Reference

The border-spacing CSS property sets the distance between the borders of adjacent cells in a <table>. This property applies only when border-collapse is separate.

The border-spacing value is also used along the outside edge of the table, where the distance between the table’s border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table.

MDN Reference

The border-spacing CSS property sets the distance between the borders of adjacent cells in a <table>. This property applies only when border-collapse is separate.

The border-spacing value is also used along the outside edge of the table, where the distance between the table’s border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table.

MDN Reference

The border-start-end-radius CSS property defines a logical border radius on an element, which maps to a physical border radius that depends on the element’s writing-mode, direction, and text-orientation. This is useful when building styles to work regardless of the text orientation and writing mode.

This property affects the corner between the block-end and the inline-start sides of the element. For instance, in a horizontal-tb writing mode with ltr direction, it corresponds to the border-top-right-radius property.

MDN Reference

The border-start-start-radius CSS property defines a logical border radius on an element, which maps to a physical border radius that depends on the element’s writing-mode, direction, and text-orientation. This is useful when building styles to work regardless of the text orientation and writing mode.

This property affects the corner between the block-end and the inline-start sides of the element. For instance, in a horizontal-tb writing mode with ltr direction, it corresponds to the border-top-left-radius property.

MDN Reference

The border-style shorthand CSS property sets the line style for all four sides of an element’s border.

This property is a shorthand for the following CSS properties:

• border-bottom-style
• border-left-style
• border-right-style
• border-top-style

MDN Reference

The border-top shorthand CSS property sets all the properties of an element’s top border.

This property is a shorthand for the following CSS properties:

• border-top-color
• border-top-style
• border-top-width

MDN Reference

The border-top-color CSS property sets the color of an element’s top border. It can also be set with the shorthand CSS properties border-color or border-top.

MDN Reference

The border-top-left-radius CSS property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.

The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.

A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property.

MDN Reference

The border-top-left-radius CSS property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.

The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.

A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property.

MDN Reference

The border-top-right-radius CSS property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.

The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.

A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property.

MDN Reference

The border-top-right-radius CSS property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.

The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.

A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property.

MDN Reference

The border-top-style CSS property sets the line style of an element’s top border.

MDN Reference

The border-top-width CSS property sets the width of the top border of an element.

MDN Reference

The border-top-width CSS property sets the width of the top border of an element.

MDN Reference

The border-width shorthand CSS property sets the width of an element’s border.

This property is a shorthand for the following CSS properties:

• border-bottom-width
• border-left-width
• border-right-width
• border-top-width

MDN Reference

The border-width shorthand CSS property sets the width of an element’s border.

This property is a shorthand for the following CSS properties:

• border-bottom-width
• border-left-width
• border-right-width
• border-top-width

MDN Reference

The bottom CSS property participates in setting the vertical position of a positioned element. This inset property has no effect on non-positioned elements.

The effect of bottom depends on how the element is positioned (i.e., the value of the position property):

• When position is set to absolute or fixed, the bottom property specifies the distance between the outer edge of the element’s bottom margin and the outer edge of the containing block’s bottom padding, or, in the case of anchor positioned elements when the anchor() function is used within the value, relative to the position of the specified <anchor-side> edge. The bottom property is compatible with the top, bottom, start, end, self-start, self-end, center, and <percentage> values.
• When position is set to relative, the bottom property specifies the distance the element’s bottom edge is moved above its normal position.
• When position is set to sticky, the bottom property is used to compute the sticky-constraint rectangle.
• When position is set to static, the bottom property has no effect.

When both top and bottom are specified, position is set to absolute or fixed, and height is unspecified (either auto or 100%) both the top and bottom distances are respected. In all other situations, if height is constrained in any way or position is set to relative, the top property takes precedence and the bottom property is ignored.

MDN Reference

The bottom CSS property participates in setting the vertical position of a positioned element. This inset property has no effect on non-positioned elements.

The effect of bottom depends on how the element is positioned (i.e., the value of the position property):

• When position is set to absolute or fixed, the bottom property specifies the distance between the outer edge of the element’s bottom margin and the outer edge of the containing block’s bottom padding, or, in the case of anchor positioned elements when the anchor() function is used within the value, relative to the position of the specified <anchor-side> edge. The bottom property is compatible with the top, bottom, start, end, self-start, self-end, center, and <percentage> values.
• When position is set to relative, the bottom property specifies the distance the element’s bottom edge is moved above its normal position.
• When position is set to sticky, the bottom property is used to compute the sticky-constraint rectangle.
• When position is set to static, the bottom property has no effect.

When both top and bottom are specified, position is set to absolute or fixed, and height is unspecified (either auto or 100%) both the top and bottom distances are respected. In all other situations, if height is constrained in any way or position is set to relative, the top property takes precedence and the bottom property is ignored.

MDN Reference

The box-shadow CSS property adds shadow effects around an element’s frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.

The box-shadow property enables you to cast a drop shadow from the frame of almost any element. If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners. The z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top).

Box-shadow generator is an interactive tool allowing you to generate a box-shadow.

MDN Reference

The box-sizing CSS property sets how the total width and height of an element is calculated.

By default in the CSS box model, the width and height you assign to an element is applied only to the element’s content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that’s rendered on the screen. This means that when you set width and height, you have to adjust the value you give to allow for any border or padding that may be added. For example, if you have four boxes with width: 25%;, if any has left or right padding or a left or right border, they will not by default fit on one line within the constraints of the parent container.

The box-sizing property can be used to adjust this behavior:

• content-box gives you the default CSS box-sizing behavior. If you set an element’s width to 100 pixels, then the element’s content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px.
• border-box tells the browser to account for any border and padding in the values you specify for an element’s width and height. If you set an element’s width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.
  box-sizing: border-box is the default styling that browsers use for the <table>, <select>, and <button> elements, and for <input> elements whose type is radio, checkbox, reset, button, submit, color, or search.

It is often useful to set box-sizing to border-box to lay out elements. This makes dealing with the sizes of elements much easier, and generally eliminates a number of pitfalls you can stumble on while laying out your content. On the other hand, when using position: relative or position: absolute, use of box-sizing: content-box allows the positioning values to be relative to the content, and independent of changes to border and padding sizes, which is sometimes desirable.

MDN Reference

The break-after CSS property sets how page, column, or region breaks should behave after a generated box. If there is no generated box, the property is ignored.

MDN Reference

The break-before CSS property sets how page, column, or region breaks should behave before a generated box. If there is no generated box, the property is ignored.

MDN Reference

The break-inside CSS property sets how page, column, or region breaks should behave inside a generated box. If there is no generated box, the property is ignored.

MDN Reference

The :buffering CSS pseudo-class selector represents an element that is playable, such as <audio> or <video>, when the playable element is buffering a media resource.

An element is considered as buffering when that element cannot continue playing because it is trying to load media data but does not yet have enough data to begin or continue playback. For more information, see the Media buffering, seeking, and time ranges guide.

MDN Reference

The caption-side CSS property puts the content of a table’s <caption> on the specified side. The values are relative to the writing-mode of the table.

MDN Reference

The caret-color CSS property sets the color of the insertion caret, the visible marker where the next character typed will be inserted. This is sometimes referred to as the text input cursor. The caret appears in elements such as <input> or those with the contenteditable attribute. The caret is typically a thin vertical line that flashes to help make it more noticeable. By default, it is black, but its color can be altered with this property.

Note that the insertion caret is only one type of caret. For example, many browsers have a “navigation caret,” which acts similarly to an insertion caret but can be moved around in non-editable text. On the other hand, the mouse cursor image shown when hovering over text where the cursor property is auto, or when hovering over an element where the cursor property is text or vertical-text, though it sometimes looks like a caret, is not a caret (it’s a cursor).

MDN Reference

The :checked CSS pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">), or option (<option> in a <select>) element that is checked or toggled to an on state.

MDN Reference

The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.

/* List items that are children of the "my-things" list */
ul.my-things > li {
  margin: 2em;
}

Elements matched by the second selector must be the immediate children of the elements matched by the first selector. This is stricter than the descendant combinator, which matches all elements /// matched by the second selector for which there exists an ancestor element matched by the first selector, regardless of the number of “hops” up the DOM.

MDN Reference

Generates a CSS class, with an autogenerated class selector.

MDN Reference

The clear CSS property sets whether an element must be moved below (cleared) floating elements that precede it. The clear property applies to floating and non-floating elements.

When applied to non-floating blocks, it moves the border edge of the element down until it is below the margin edge of all relevant floats. The non-floated block’s top margin collapses.

Vertical margins between two floated elements on the other hand will not collapse. When applied to floating elements, the margin edge of the bottom element is moved below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.

The floats that are relevant to be cleared are the earlier floats within the same block formatting context.

If an element contains only floated elements, its height collapses to nothing. If you want it to always be able to resize, so that it contains floating elements inside it, set the value of the element’s display property to flow-root.

#container {
  display: flow-root;
}

MDN Reference

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

MDN Reference

The color CSS property sets the foreground color value of an element’s text and text decorations, and sets the currentcolor value. currentcolor may be used as an indirect value on other properties and is the default for other color properties, such as border-color.

For an overview of using color in HTML, see Applying color to HTML elements using CSS.

MDN Reference

The color-interpolation CSS property is used in SVG to specify which color space to use for <linearGradient> and <radialGradient> SVG elements.

MDN Reference

The color-interpolation-filters CSS property specifies the color space for imaging operations performed via SVG filter effects. If explicitly declared, the value of the CSS property overrides any value given in the element’s color-interpolation-filters attribute.

The color-interpolation-filters property is only relevant to SVG filter operations. It has no effect on filter primitives like <feOffset>, <feImage>, <feTile>, and <feFlood>, but instead applies to the various filter effect elements (e.g., <feBlend>); see the SVG color-interpolation-filters page for a full list.

It is important to remember that the SVG color-interpolation attribute has an initial value of sRGB, while color-interpolation-filters has an initial value of linearRGB. This means, in the default case, filter effect interpolations occur in a different color space than all other color interpolations.

MDN Reference

The color-scheme CSS property allows an element to indicate which color schemes it can comfortably be rendered in. User agents change the following aspects of the UI chrome to match the used color scheme:

• The color of the canvas surface.
• The default colors of scrollbars and other interaction UI.
• The default colors of form controls.
• The default colors of other browser-provided UI, such as “spellcheck” underlines.

Component authors must use the prefers-color-scheme media feature to support the color schemes on the rest of the elements.

Common choices for operating system color schemes are “light” and “dark”, or “day mode” and “night mode”. When a user selects one of these color schemes, the operating system makes adjustments to the user interface. This includes form controls, scrollbars, and the used values of CSS system colors.

MDN Reference

The column-count CSS property breaks an element’s content into the specified number of columns.

MDN Reference

The column-fill CSS property controls how an element’s contents are balanced when broken into columns.

MDN Reference

The column-gap CSS property sets the size of the gap (gutter) between an element’s columns.

Initially a part of Multi-column Layout, the definition of column-gap has been broadened to include multiple layout methods. Now specified in CSS box alignment, it may be used in multi-column, flexible box, and grid layouts.

Early versions of the specification called this property grid-column-gap, and to maintain compatibility with legacy websites, browsers will still accept grid-column-gap as an alias for column-gap.

MDN Reference

The column-rule shorthand CSS property sets the width, style, and color of the line drawn between columns in a multi-column layout.

This property is a shorthand for the following CSS properties:

• column-rule-color
• column-rule-style
• column-rule-width

MDN Reference

The column-rule-color CSS property sets the color of the line drawn between columns in a multi-column layout.

MDN Reference

The column-rule-style CSS property sets the style of the line drawn between columns in a multi-column layout.

MDN Reference

The column-rule-width CSS property sets the width of the line drawn between columns in a multi-column layout.

MDN Reference

The column-span CSS property makes it possible for an element to span across all columns when its value is set to all.

An element that spans more than one column is called a spanning element.

MDN Reference

The column-width CSS property sets the ideal column width in a multi-column layout. The container will have as many columns as can fit without any of them having a width less than the column-width value. If the width of the container is narrower than the specified value, the single column’s width will be smaller than the declared column width.

This property can help you create responsive designs that fit different screen sizes. Especially in the presence of the column-count property (which has precedence), you must specify all related length values to achieve an exact column width. In horizontal text these are width, column-width, column-gap, and column-rule-width.

MDN Reference

The columns CSS shorthand property sets the number of columns to use when drawing an element’s contents, as well as those columns’ widths.

This property is a shorthand for the following CSS properties:

• column-count
• column-width

MDN Reference

Compose styles by inheriting class, and later overrides them. Every styles from the class will be composed in the resulting class. Order is important, as last properties will override previous properties.

pub fn my_class1() {
  css.class([
    css.background("red"),
  ])
}

pub fn my_class2() {
  css.class([
    css.padding(px(10)),
    css.color("red"),
  ])
}

pub fn my_class() {
  css.class([
    css.compose(my_class1()),
    css.compose(my_class2()),
    css.padding(px(20)),
  ])
}

Will output

.my_class {
  background: red;
  color: red;
  padding: 20px;
}

The contain CSS property indicates that an element and its contents are, as much as possible, independent from the rest of the document tree. Containment enables isolating a subsection of the DOM, providing performance benefits by limiting calculations of layout, style, paint, size, or any combination to a DOM subtree rather than the entire page. Containment can also be used to scope CSS counters and quotes.

There are four types of CSS containment: size, layout, style, and paint, which are set on the container. The property is a space-separated list of a subset of the five standard values or one of the two shorthand values. Changes to the contained properties within the container are not propagated outside of the contained element to the rest of the page. The main benefit of containment is that the browser does not have to re-render the DOM or page layout as often, leading to small performance benefits during the rendering of static pages and greater performance benefits in more dynamic applications.

Using the contain property is useful on pages with groups of elements that are supposed to be independent, as it can prevent element internals from having side effects outside of its bounding-box.

Using layout, paint, strict or content values for this property creates:

1. A new containing block (for the descendants whose position property is absolute or fixed).
2. A new stacking context.
3. A new block formatting context.

MDN Reference

The contain-intrinsic-block-size CSS logical property defines the block size of an element that a browser can use for layout when the element is subject to size containment.

Block size is the size of an element in the dimension perpendicular to the flow of text within a line. In a horizontal writing mode like standard English, block size is the vertical dimension (height); in a vertical writing mode, block size is the horizontal dimension.

MDN Reference

The contain-intrinsic-block-size CSS logical property defines the block size of an element that a browser can use for layout when the element is subject to size containment.

Block size is the size of an element in the dimension perpendicular to the flow of text within a line. In a horizontal writing mode like standard English, block size is the vertical dimension (height); in a vertical writing mode, block size is the horizontal dimension.

MDN Reference

The contain-intrinsic-block-height CSS property sets the height of an element that a browser can use for layout when the element is subject to size containment.

MDN Reference

The contain-intrinsic-block-height CSS property sets the height of an element that a browser can use for layout when the element is subject to size containment.

MDN Reference

The contain-intrinsic-inline-size CSS logical property defines the inline-size of an element that a browser can use for layout when the element is subject to size containment.

Inline-size is the size of the element in the dimension parallel to the flow of text within a line. In a horizontal writing mode like standard English, inline size is the horizontal dimension (width); for a vertical writing mode, inline size is the vertical dimension.

MDN Reference

The contain-intrinsic-inline-size CSS logical property defines the inline-size of an element that a browser can use for layout when the element is subject to size containment.

Inline-size is the size of the element in the dimension parallel to the flow of text within a line. In a horizontal writing mode like standard English, inline size is the horizontal dimension (width); for a vertical writing mode, inline size is the vertical dimension.

MDN Reference

The contain-intrinsic-size CSS shorthand property sets the size of an element that a browser will use for layout when the element is subject to size containment.

This property is a shorthand for the following CSS properties:

• contain-intrinsic-width
• contain-intrinsic-height

MDN Reference

The contain-intrinsic-size CSS shorthand property sets the size of an element that a browser will use for layout when the element is subject to size containment.

This property is a shorthand for the following CSS properties:

• contain-intrinsic-width
• contain-intrinsic-height

MDN Reference

The contain-intrinsic-width CSS property sets the width of an element that a browser will use for layout when the element is subject to size containment.

MDN Reference

The contain-intrinsic-width CSS property sets the width of an element that a browser will use for layout when the element is subject to size containment.

MDN Reference

The container shorthand CSS property establishes the element as a query container and specifies the name and type of the containment context used in a container query.

This property is a shorthand for the following CSS properties:

• container-name
• container-type

MDN Reference

The container-name CSS property specifies a list of query container names used by the @container at-rule in a container query. A container query will apply styles to elements based on the size of the nearest ancestor with a containment context. When a containment context is given a name, it can be specifically targeted using the @container at-rule instead of the nearest ancestor with containment.

When using the container-type and container-name properties, the style and layout values of the contain property are automatically applied.

MDN Reference

An element can be established as a query container for container size queries using the container-type CSS property. container-type is used to define the type of size containment used in a container query.

Length containment turns off the ability of an element to get size information from its contents, which is important for container queries to avoid infinite loops. If this were not the case, a CSS rule inside a container query could change the content size, which in turn could make the query evaluate to false and change the parent element’s size, which in turn could change the content size and flip the query back to true, and so on.

The container size has to be set explicitly or by context — for example, block elements, flex containers, and grid containers stretching to the full width of their parent. If an explicit or contextual size is not available, elements with size containment will collapse.

When using the container-type and container-name properties, the style and layout values of the contain property are automatically applied.

MDN Reference

The content CSS property replaces content with a generated value. It can be used to define what is rendered inside an element or pseudo-element. For elements, the content property specifies whether the element renders normally (normal or none) or is replaced with an image (and associated “alt” text). For pseudo-elements and margin boxes, content defines the content as images, text, both, or none, which determines whether the element renders at all.

Objects inserted using the content property are anonymous replaced elements.

MDN Reference

The content-visibility CSS property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed. It enables the user agent to skip an element’s rendering work (including layout and painting) until it is needed — which makes the initial page load much faster.

The contentvisibilityautostatechange event fires on any element with content-visibility: auto set on it when its rendering work starts or stops being skipped. This provides a convenient way for an app’s code to start or stop rendering processes (e.g. drawing on a <canvas>) when they are not needed, thereby conserving processing power.

MDN Reference

The counter-increment CSS property can be used to increase or decrease the value of the named CSS counters by the specified values, or to prevent all counters or an individual counter’s value from being changed.

If a named counter in the list of space-separated counters and values doesn’t exist, it will be created. If no value is provided for a counter in the list of counters, the counter will be increased by 1.

The counter’s value can be reset to any integer value with the counter-reset CSS property.

MDN Reference

The counter-reset CSS property creates named CSS counters and initializes them to a specific value. It supports creating counters that count up from one to the number of elements, as well as those that count down from the number of elements to one.

MDN Reference

The counter-set CSS property sets CSS counters on the element to the given values.

If the counters don’t exist the counter-set property creates a new counter for each named counter in the list of space-separated counter and value pairs. However, to create a new counter it is recommended to use the counter-reset CSS property.

If a named counter in the list is missing a value, the value of the counter will be set to 0.

MDN Reference

The ::cue CSS pseudo-element matches WebVTT cues within a selected element. This can be used to style captions and other cues in media with VTT tracks.

MDN Reference

The cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element.

The cursor setting should inform users of the mouse operations that can be performed at the current location, including: text selection, activating help or context menus, copying content, resizing tables, and so on. You can specify either the type of cursor using a keyword, or load a specific icon to use (with optional fallback images and mandatory keyword as a final fallback).

MDN Reference

The :default CSS pseudo-class selects form elements that are the default in a group of related elements.

MDN Reference

The :defined CSS pseudo-class represents any element that has been defined. This includes any standard element built into the browser and custom elements that have been successfully defined (i.e. with the CustomElementRegistry.define() method).

MDN Reference

The descendant combinator — typically represented by a single space (“ “) character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent’s parent, parent’s parent’s parent, etc.) element matching the first selector. Selectors that utilize a descendant combinator are called descendant selectors.

/* List items that are descendants of the "my-things" list */
ul.my-things li {
  margin: 2em;
}

The descendant combinator is technically one or more CSS white space characters — the space character and/or one of four control characters: carriage return, form feed, new line, and tab characters — between two selectors in the absence of another combinator. Additionally, the white space characters of which the combinator is comprised may contain any number of CSS comments.

MDN Reference

The :dir() CSS pseudo-class matches elements based on the directionality of the text contained in them.

/* Selects any element with right-to-left text */
:dir(rtl) {
  background-color: red;
}

The :dir() pseudo-class uses only the semantic value of the directionality, i.e., the one defined in the document itself. It doesn’t account for styling directionality, i.e., the directionality set by CSS properties such as direction.

Be aware that the behavior of the :dir() pseudo-class is not equivalent to the [dir=…] attribute selectors. The latter match the HTML dir attribute, and ignore elements that lack it — even if they inherit a direction from their parent. (Similarly, [dir=rtl] and [dir=ltr] won’t match the auto value.) In contrast, :dir() will match the value calculated by the user agent, even if inherited.

MDN Reference

Where possible, authors are encouraged to avoid using the direction CSS property and use the HTML dir global attribute instead.

The direction CSS property sets the direction of text, table columns, and horizontal overflow. Use rtl for languages written from right to left (like Hebrew or Arabic), and ltr for those written from left to right (like English and most other languages).

Note that text direction is usually defined within a document (e.g., with HTML’s dir attribute) rather than through direct use of the direction property.

The property sets the base text direction of block-level elements and the direction of embeddings created by the unicode-bidi property. It also sets the default alignment of text, block-level elements, and the direction that cells flow within a table row.

Unlike the dir attribute in HTML, the direction property is not inherited from table columns into table cells, since CSS inheritance follows the document tree, and table cells are inside of rows but not inside of columns.

The direction and unicode-bidi properties are the two only properties which are not affected by the all shorthand property.

MDN Reference

The :disabled CSS pseudo-class represents any disabled element. An element is disabled if it can’t be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.

MDN Reference

The display CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex.

Formally, the display property sets an element’s inner and outer display types. The outer type sets an element’s participation in flow layout; the inner type sets the layout of children. Some values of display are fully defined in their own individual specifications; for example the detail of what happens when display: flex is declared is defined in the CSS Flexible Box Model specification.

MDN Reference

The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments, processing instructions, and CSS content do not affect whether an element is considered empty.

MDN Reference

The empty-cells CSS property sets whether borders and backgrounds appear around <table> cells that have no visible content.

This property has an effect only when the border-collapse property is separate.

MDN Reference

The :enabled CSS pseudo-class represents any enabled element. An element is enabled if it can be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has a disabled state, in which it can’t be activated or accept focus.

MDN Reference

The field-sizing CSS property enables you to control the sizing behavior of elements that are given a default preferred size, such as form control elements. This property enables you to override the default sizing behavior, allowing form controls to adjust in size to fit their contents.

This property is typically used to style text <input> and <textarea> elements to allow them to shrinkwrap their content as well as grow when more text is entered into the form control.

MDN Reference

The ::file-selector-button CSS pseudo-element represents the button of an <input> of type="file".

MDN Reference

The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

Several functions, such as blur() and contrast(), are available to help you achieve predefined effects.

MDN Reference

The :first-child CSS pseudo-class represents the first element among a group of sibling elements.

MDN Reference

The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block container, but only when not preceded by other content (such as images or inline tables).

MDN Reference

The ::first-line CSS pseudo-element applies styles to the first line of a block container.

MDN Reference

The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements.

MDN Reference

The flex CSS shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.

This property is a shorthand for the following CSS properties:

• flex-grow
• flex-shrink
• flex-basis

MDN Reference

The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.

It is recommended to use the flex shorthand instead of separate flex-grow, flex-shrink, and flex-basis declarations. We have separated them here as this document is about one of the shorthand components: the flex-basis property.

MDN Reference

The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

Note that the values row and row-reverse are affected by the directionality of the flex container. If its dir attribute is ltr, row represents the horizontal axis oriented from the left to the right, and row-reverse from the right to the left; if the dir attribute is rtl, row represents the axis oriented from the right to the left, and row-reverse from the left to the right.

MDN Reference

The flex-flow CSS shorthand property specifies the direction of a flex container, as well as its wrapping behavior.

This property is a shorthand for the following CSS properties:

• flex-direction
• flex-wrap

MDN Reference

The flex-grow CSS property sets the flex grow factor, which specifies how much of the flex container’s positive free space, if any, should be assigned to the flex item’s main size.

When the flex-container’s main size is larger than the combined main sizes of its flex items, this positive free space can be distributed among the flex items, with each item’s growth being their growth factor value as a p roportion of the sum total of all the flex items’ flex grow factors.

It is recommended to use the flex shorthand instead of separate flex-grow, flex-shrink, and flex-basis declarations. We have separated them here as this document is about one of the shorthand components: the flex-basis property.

MDN Reference

The flex-grow CSS property sets the flex grow factor, which specifies how much of the flex container’s positive free space, if any, should be assigned to the flex item’s main size.

When the flex-container’s main size is larger than the combined main sizes of its flex items, this positive free space can be distributed among the flex items, with each item’s growth being their growth factor value as a p roportion of the sum total of all the flex items’ flex grow factors.

It is recommended to use the flex shorthand instead of separate flex-grow, flex-shrink, and flex-basis declarations. We have separated them here as this document is about one of the shorthand components: the flex-basis property.

MDN Reference

The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, the flex items can shrink to fit according to their flex-shrink value. Each flex line’s negative free space is distributed between the line’s flex items that have a flex-shrink value greater than 0.

It is recommended to use the flex shorthand instead of separate flex-grow, flex-shrink, and flex-basis declarations. We have separated them here as this document is about one of the shorthand components: the flex-basis property.

MDN Reference

The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, the flex items can shrink to fit according to their flex-shrink value. Each flex line’s negative free space is distributed between the line’s flex items that have a flex-shrink value greater than 0.

It is recommended to use the flex shorthand instead of separate flex-grow, flex-shrink, and flex-basis declarations. We have separated them here as this document is about one of the shorthand components: the flex-basis property.

MDN Reference

The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.

The flex-flow property shorthand can be used to set both the flex-direction and flex-wrap properties, which define the flex container’s main and cross axes, respectively.

MDN Reference

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning).

A floating element is one where the computed value of float is not none.

As float implies the use of the block layout, it modifies the computed value of the display values, in some cases:

MDN Reference

The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard’s Tab key.

MDN Reference

The :focus-visible CSS pseudo-class applies while an element matches the :focus pseudo-class and the User Agent determines via heuristics that the focus should be made evident on the element. (Many browsers show a “focus ring” by default in this case.)

MDN Reference

The :focus-within CSS pseudo-class matches an element if the element or any of its descendants are focused. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)

MDN Reference

The font CSS shorthand property sets all the different properties of an element’s font. Alternatively, it sets an element’s font to a system font.

As with any shorthand property, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). Though not directly settable by font, the longhands font-size-adjust and font-kerning are also reset to their initial values.

This property is a shorthand for the following CSS properties:

• font-family
• font-size
• font-stretch
• font-style
• font-variant
• font-weight
• line-height

MDN Reference

The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user’s own computer.

MDN Reference

The font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.

Values are separated by commas to indicate that they are alternatives. The browser will select the first font in the list that is installed or that can be downloaded using a @font-face at-rule.

It is often convenient to use the shorthand property font to set font-size and other font related properties all at once.

You should always include at least one generic family name in a font-family list, since there’s no guarantee that any given font is available. This lets the browser select an acceptable fallback font when necessary.

The font-family property specifies a list of fonts, from highest priority to lowest. Font selection does not stop at the first font in the list that is on the user’s system. Rather, font selection is done one character at a time, so that if an available font does not have a glyph for a needed character, the latter fonts are tried. When a font is only available in some styles, variants, or sizes, those properties may also influence which font family is chosen.

MDN Reference

The font-feature-settings CSS property controls advanced typographic features in OpenType fonts.

MDN Reference

The font-kerning CSS property sets the use of the kerning information stored in a font.

Kerning defines how letters are spaced. In well-kerned fonts, this feature makes character spacing more uniform and pleasant to read than it would otherwise be.

MDN Reference

The font-language-override CSS property controls the use of language-specific glyphs in a typeface.

By default, HTML’s lang attribute tells browsers to display glyphs designed specifically for that language. For example, a lot of fonts have a special character for the digraph fi that merge the dot on the “i” with the “f.” However, if the language is set to Turkish the typeface will likely know not to use the merged glyph; Turkish has two versions of the “i,” one with a dot (i) and one without (ı), and using the ligature would incorrectly transform a dotted “i” into a dotless “i.”

The font-language-override property lets you override the typeface behavior for a specific language. This is useful, for example, when the typeface you’re using lacks proper support for the language. For instance, if a typeface doesn’t have proper rules for the Azeri language, you can force the font to use Turkish glyphs, which follow similar rules.

MDN Reference

The font-optical-sizing CSS property sets whether text rendering is optimized for viewing at different sizes.

MDN Reference

The font-palette CSS property allows specifying one of the many palettes contained in a color font that a user agent may use for the font. Users can also override the values in a palette or create a new palette by using the @font-palette-values at-rule.

A font-palette palette takes precedence when coloring a font. The color property will not override a font palette, even if specified with !important.

MDN Reference

The font-size CSS property sets the size of the font. Changing the font size also updates the sizes of the font size-relative <length> units, such as em, ex, and so forth.

MDN Reference

The font-size CSS property sets the size of the font. Changing the font size also updates the sizes of the font size-relative <length> units, such as em, ex, and so forth.

MDN Reference

The font-size-adjust CSS property provides a way to modify the size of lowercase letters relative to the size of uppercase letters, which defines the overall font-size. This property is useful for situations where font fallback can occur.

Legibility can become an issue when the first-choice font-family is unavailable and its replacement fallback font has a significantly different aspect value (height of lowercase letters divided by font size). Legibility of fonts, especially at small font sizes, is determined more by the size of lowercase letters than by the size of uppercase letters. The font-size-adjust property is useful for adjusting the font size of fallback fonts to keep the aspect value across fonts consistent, ensuring that the text appears similar regardless of the font used.

MDN Reference

The font-stretch property has now been renamed to font-width in the specifications. The name font-stretch has been kept as an alias for the font-width property. The new name font-width is not yet supported by any browsers.

The font-stretch CSS property selects a normal, condensed, or expanded face from a font.

MDN Reference

The font-style CSS property sets whether a font should be styled with a normal, italic, or oblique face from its font-family.

Italic font faces are generally cursive in nature, usually using less horizontal space than their unstyled counterparts, while oblique faces are usually just sloped versions of the regular face. When the specified style is not available, both italic and oblique faces are simulated by artificially sloping the glyphs of the regular face (use font-synthesis to control this behavior).

MDN Reference

The font-synthesis CSS property is a shorthand property that lets you specify whether or not the browser may synthesize the bold, italic, small-caps, and/or subscript and superscript typefaces when they are missing in the specified font-family.

This property is a shorthand for the following CSS properties:

• font-synthesis-weight
• font-synthesis-style
• font-synthesis-small-caps
• font-synthesis-position

MDN Reference

The font-synthesis-small-caps CSS property lets you specify whether or not the browser may synthesize small-caps typeface when it is missing in a font family. Small-caps glyphs typically use the form of uppercase letters but are reduced to the size of lowercase letters.

It is often convenient to use the shorthand property font-synthesis to control all typeface synthesis values.

MDN Reference

The font-synthesis-style CSS property lets you specify whether or not the browser may synthesize the oblique typeface when it is missing in a font family.

It is often convenient to use the shorthand property font-synthesis to control all typeface synthesis values.

MDN Reference

The font-synthesis-weight CSS property lets you specify whether or not the browser may synthesize the bold typeface when it is missing in a font family.

It is often convenient to use the shorthand property font-synthesis to control all typeface synthesis values.

MDN Reference

The font-variant CSS shorthand property allows you to set all the font variants for a font.

You can also set the <font-variant-css2> values of font-variant defined in CSS Level 2.1, (that is, normal or small-caps), by using the font shorthand.

MDN Reference

The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.

The @font-feature-values at-rule can be used to associate, for a given font face, a human-readable name with a numeric index that controls a particular OpenType font feature. For features that select alternative glyphs (stylistic, styleset, character-variant, swash, ornament or annotation), the font-variant-alternates property can then reference the human-readable name in order to apply the associated feature.

This allows CSS rules to enable alternative glyphs without needing to know the specific index values that a particular font uses to control them.

MDN Reference

The font-variant-caps CSS property controls the use of alternate glyphs used for small or petite capitals or for titling.

When a given font includes capital letter glyphs of multiple different sizes, this property selects the most appropriate ones. If petite capital glyphs are not available, they are rendered using small capital glyphs. If these are not present, the browser synthesizes them from the uppercase glyphs.

Fonts sometimes include special glyphs for various caseless characters (such as punctuation marks) to better match the capitalized characters around them. However, small capital glyphs are never synthesized for caseless characters.

Language-specific rules

This property accounts for language-specific case mapping rules. For example:

• In Turkic languages, such as Turkish (tr), Azerbaijani (az), Crimean Tatar (crh), Volga Tatar (tt), and Bashkir (ba), there are two kinds of i (one with the dot, one without) and two case pairings: i/İ and ı/I.
• In German (de), the ß may become ẞ (U+1E9E) in uppercase.
• In Greek (el), vowels lose their accent when the whole word is in uppercase (ά/Α), except for the disjunctive eta (ή/Ή). Also, diphthongs with an accent on the first vowel lose the accent and gain a diacritic on the second vowel (άι/ΑΪ).

MDN Reference

The font-variant-east-asian CSS property controls the use of alternate glyphs for East Asian scripts, like Japanese and Chinese.

MDN Reference

The font-variant-emoji CSS property specifies the default presentation style for displaying emojis.

Traditionally, this was done by appending a Variation Selector, U+FE0E for text and U+FE0F for emoji, to the emoji code point. Only emojis listed as contributing to a Unicode emoji presentation sequence are affected by this property.

MDN Reference

The font-variant-ligatures CSS property controls which ligatures and contextual forms are used in the textual content of the elements it applies to. This leads to more harmonized forms in the resulting text.

MDN Reference

The font-variant-numeric CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.

MDN Reference

The font-variant-position CSS property controls the use of alternate, smaller glyphs that are positioned as superscript or subscript.

The glyphs are positioned relative to the baseline of the font, which remains unchanged. These glyphs are typically used in <sub> and <sup> elements.

When the usage of these alternate glyphs is activated, if one character in the run doesn’t have such a typographically-enhanced glyph, the whole set of characters of the run is rendered using a fallback method, synthesizing these glyphs.

These alternate glyphs share the same em-box and the same baseline as the rest of the font. They are merely graphically enhanced, and have no effect on the line-height and other box characteristics.

MDN Reference

The font-variation-settings CSS property provides low-level control over variable font characteristics by letting you specify the four letter axis names of the characteristics you want to vary along with their values.

MDN Reference

The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.

MDN Reference

The forced-color-adjust CSS property allows authors to opt certain elements out of forced colors mode. This then restores the control of those values to CSS.

MDN Reference

The :fullscreen CSS pseudo-class matches every element that is currently in fullscreen mode. If multiple elements have been put into fullscreen mode, this selects them all.

MDN Reference

The gap CSS shorthand property sets the gaps (also called gutters) between rows and columns. This property applies to multi-column, flex, and grid containers.

This property is a shorthand for the following CSS properties:

• column-gap
• row-gap

MDN Reference

The gap CSS shorthand property sets the gaps (also called gutters) between rows and columns. This property applies to multi-column, flex, and grid containers.

This property is a shorthand for the following CSS properties:

• column-gap
• row-gap

MDN Reference

The ::grammar-error CSS pseudo-element represents a text segment which the user agent has flagged as grammatically incorrect.

MDN Reference

The grid CSS property is a shorthand property that sets all of the explicit and implicit grid properties in a single declaration.

Using grid you specify one axis using grid-template-rows or grid-template-columns, you then specify how content should auto-repeat in the other axis using the implicit grid properties: grid-auto-rows, grid-auto-columns, and grid-auto-flow.

The sub-properties you don’t specify are set to their initial value, as normal for shorthands. Also, the gutter properties are NOT reset by this shorthand.

This property is a shorthand for the following CSS properties:

• grid-auto-columns
• grid-auto-flow
• grid-auto-rows
• grid-template-areas
• grid-template-columns
• grid-template-rows

MDN Reference

The grid-area CSS shorthand property specifies a grid item’s size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.

If four <grid-line> values are specified, grid-row-start is set to the first value, grid-column-start is set to the second value, grid-row-end is set to the third value, and grid-column-end is set to the fourth value.

When grid-column-end is omitted, if grid-column-start is a <custom-ident>, grid-column-end is set to that <custom-ident>; otherwise, it is set to auto.

When grid-row-end is omitted, if grid-row-start is a <custom-ident>, grid-row-end is set to that <custom-ident>; otherwise, it is set to auto.

When grid-column-start is omitted, if grid-row-start is a <custom-ident>, all four longhands are set to that value. Otherwise, it is set to auto.

The grid-area property can also be set to a <custom-ident> which acts as a name for the area, which can then be placed using grid-template-areas.

This property is a shorthand for the following CSS properties:

• grid-row-start
• grid-column-start
• grid-row-end
• grid-column-end

MDN Reference

The grid-auto-columns CSS property specifies the size of an implicitly-created grid column track or pattern of tracks.

If a grid item is positioned into a column that is not explicitly sized by grid-template-columns, implicit grid tracks are created to hold it. This can happen either by explicitly positioning into a column that is out of range, or by the auto-placement algorithm creating additional columns.

MDN Reference

The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

MDN Reference

The grid-auto-rows CSS property specifies the size of an implicitly-created grid row track or pattern of tracks.

If a grid item is positioned into a row that is not explicitly sized by grid-template-rows, implicit grid tracks are created to hold it. This can happen either by explicitly positioning into a row that is out of range, or by the auto-placement algorithm creating additional rows.

MDN Reference

The grid-column CSS shorthand property specifies a grid item’s size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.

This property is a shorthand for the following CSS properties:

• grid-column-end
• grid-column-start

MDN Reference

The grid-column-end CSS property specifies a grid item’s end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.

MDN Reference

The grid-column-start CSS property specifies a grid item’s start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-start edge of its grid area.

MDN Reference

The grid-row CSS shorthand property specifies a grid item’s size and location within a grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.

This property is a shorthand for the following CSS properties:

• grid-row-end
• grid-row-start

MDN Reference

The grid-row-end CSS property specifies a grid item’s end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid area.

MDN Reference

The grid-row-start CSS property specifies a grid item’s start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid area.

MDN Reference

The grid-template CSS property is a shorthand property for defining grid columns, grid rows, and grid areas.

This property is a shorthand for the following CSS properties:

• grid-template-areas
• grid-template-columns
• grid-template-rows

MDN Reference

The grid-template-areas CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.

Those areas are not associated with any particular grid item, but can be referenced from the grid-placement properties grid-row-start, grid-row-end, grid-column-start, grid-column-end, and their shorthands grid-row, grid-column, and grid-area.

MDN Reference

The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.

MDN Reference

The grid-template-rows CSS property defines the line names and track sizing functions of the grid rows.

MDN Reference

The hanging-punctuation CSS property specifies whether a punctuation mark should hang at the start or end of a line of text. Hanging punctuation may be placed outside the line box.

MDN Reference

The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area.

The min-height and max-height properties override height.

As a geometric property, height also applies to the <svg>, <rect>, <image>, and <foreignObject> SVG elements, with auto resolving to 0 and percent values being relative to the SVG viewport height for <rect>. The CSS height property value overrides any SVG height attribute value set on the SVG element.

MDN Reference

The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area.

The min-height and max-height properties override height.

As a geometric property, height also applies to the <svg>, <rect>, <image>, and <foreignObject> SVG elements, with auto resolving to 0 and percent values being relative to the SVG viewport height for <rect>. The CSS height property value overrides any SVG height attribute value set on the SVG element.

MDN Reference

The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).

MDN Reference

The hyphenate-character CSS property sets the character (or string) used at the end of a line before a hyphenation break.

Both automatic and soft hyphens are displayed according to the specified hyphenate-character value.

MDN Reference

The hyphenate-limit-chars CSS property specifies the minimum word length to allow hyphenation of words as well as the minimum number of characters before and after the hyphen.

This property provides you with fine-grained control over hyphenation in text. This control enables you to avoid awkward hyphenations and set appropriate hyphenation for different languages, which, in turn, allows for better typography.

MDN Reference

The hyphens CSS property specifies how words should be hyphenated when text wraps across multiple lines. It can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.

Hyphenation rules are language-specific. In HTML, the language is determined by the lang attribute, and browsers will hyphenate only if this attribute is present and the appropriate hyphenation dictionary is available. In XML, the xml:lang attribute must be used.

The rules defining how hyphenation is performed are not explicitly defined by the specification, so the exact hyphenation may vary from browser to browser.

If supported, hyphenate-character may be used to specify an alternative hyphenation character to use at the end of the line being broken.

MDN Reference

The image-orientation CSS property specifies a layout-independent correction to the orientation of an image.

MDN Reference

The image-rendering CSS property sets an image scaling algorithm. The property applies to an element itself, to any images set in its other properties, and to its descendants.

The user agent will scale an image when the page author specifies dimensions other than its natural length. Scaling may also occur due to user interaction (zooming). For example, if the natural size of an image is 100×100px, but its actual dimensions are 200×200px (or 50×50px), then the image will be upscaled (or downscaled) using the algorithm specified by image-rendering. This property has no effect on non-scaled images.

MDN Reference

Add an !important flag to any CSS property. It won’t have any effect on non-property style, like media, etc. It will then act as the identity function.

pub fn my_class() {
  css.class([
    css.background("red"),
    css.padding(px(10)) |> css.important,
  ])
}

Will output

.my_class {
  background: red;
  padding: 10px !important;
}

MDN Reference

The :in-range CSS pseudo-class represents an <input> element whose current value is within the range limits specified by the min and max attributes.

MDN Reference

The :indeterminate CSS pseudo-class represents any form element whose state is indeterminate, such as checkboxes that have been set to an indeterminate state with JavaScript, radio buttons which are members of a group in which all radio buttons are unchecked, and <progress> elements with no value attribute.

MDN Reference

The initial-letter CSS property sets the size and sink for dropped, raised, and sunken initial letters. This property applies to ::first-letter pseudo-elements and inline-level first children of block containers.

MDN Reference

The inline-size CSS property defines the horizontal or vertical size of an element’s block, depending on its writing mode. It corresponds to either the width or the height property, depending on the value of writing-mode.

If the writing mode is vertically oriented, the value of inline-size relates to the height of the element; otherwise, it relates to the width of the element. A related property is block-size, which defines the other dimension of the element.

MDN Reference

The inset CSS property is a shorthand that corresponds to the top, right, bottom, and/or left properties. It has the same multi-value syntax of the margin shorthand.

This inset properties, including inset, have no effect on non-positioned elements.

While part of the CSS logical properties and values module, it does not define logical offsets. It defines physical offsets, regardless of the element’s writing mode, directionality, and text orientation.

This property is a shorthand for the following CSS properties:

• top
• right
• bottom
• left

MDN Reference

The inset-block CSS property defines the logical block start and end offsets of an element, which maps to physical offsets depending on the element’s writing mode, directionality, and text orientation. It corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and text-orientation.

This inset properties have no effect on non-positioned elements.

This property is a shorthand for the following CSS properties:

• inset-block-end
• inset-block-start

MDN Reference

The inset-block-end CSS property defines the logical block end offset of an element, which maps to a physical inset depending on the element’s writing mode, directionality, and text orientation. It corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation.

This inset properties have no effect on non-positioned elements.

MDN Reference

The inset-block-start CSS property defines the logical block start offset of an element, which maps to a physical inset depending on the element’s writing mode, directionality, and text orientation. It corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation.

This inset properties have no effect on non-positioned elements.

MDN Reference

The inset-inline CSS property defines the logical start and end offsets of an element in the inline direction, which maps to physical offsets depending on the element’s writing mode, directionality, and text orientation. It corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and text-orientation.

This inset properties have no effect on non-positioned elements.

This property is a shorthand for the following CSS properties:

• inset-inline-end
• inset-inline-start

MDN Reference

The inset-inline-end CSS property defines the logical inline end inset of an element, which maps to a physical inset depending on the element’s writing mode, directionality, and text orientation. It corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation.

This inset properties have no effect on non-positioned elements.

MDN Reference

The inset-inline-start CSS property defines the logical inline start inset of an element, which maps to a physical inset depending on the element’s writing mode, directionality, and text orientation. It corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation.

This inset properties have no effect on non-positioned elements.

MDN Reference

The :invalid CSS pseudo-class represents any <form>, <fieldset>, <input> or other <form> element whose contents fail to [validate].

MDN Reference

The isolation CSS property determines whether an element must create a new stacking context.

This property is especially helpful when used in conjunction with mix-blend-mode and z-index.

MDN Reference

The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of a flex container and the inline axis of grid and multicol containers.

MDN Reference

The CSS justify-items property defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.

The effect of this property is dependent of the layout mode we are in:

• In block-level layouts, it aligns the items inside their containing block on the inline axis.
• For absolutely-positioned elements, it aligns the items inside their containing block on the inline axis, accounting for the offset values of top, left, bottom, and right.
• In table cell layouts, this property is ignored (more about alignment in block, absolute positioned and table layout)
• In flexbox layouts, this property is ignored (more about alignment in flexbox)
• In grid layouts, it aligns the items inside their grid areas on the inline axis (more about alignment in grid layouts)

MDN Reference

The CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis.

The effect of this property is dependent of the layout mode we are in:

• In block-level layouts, it aligns an item inside its containing block on the inline axis.
• For absolutely-positioned elements, it aligns an item inside its containing block on the inline axis, accounting for the offset values of top, left, bottom, and right.
• In table cell layouts, this property is ignored. Read more about alignment in block, absolute positioned and table layout.
• In flexbox layouts, this property is ignored. Read more about alignment in flexbox.
• In grid layouts, it aligns an item inside its grid area on the inline axis. Read more about alignment in grid layouts.

MDN Reference

The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions.

MDN Reference

The :last-child CSS pseudo-class represents the last element among a group of sibling elements.

MDN Reference

The :last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements.

MDN Reference

The left CSS property participates in specifying the horizontal position of a positioned element. This inset property has no effect on non-positioned elements.

MDN Reference

The left CSS property participates in specifying the horizontal position of a positioned element. This inset property has no effect on non-positioned elements.

MDN Reference

The letter-spacing CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together.

MDN Reference

The line-break CSS property sets how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols.

MDN Reference

The line-height CSS property sets the height of a line box in horizontal writing modes. In vertical writing modes, it sets the width of a line box. It’s commonly used to set the distance between lines of text. On block-level elements in horizontal writing modes, it specifies the preferred height of line boxes within the element, and on non-replaced inline elements, it specifies the height that is used to calculate line box height.

MDN Reference

The :link CSS pseudo-class represents an element that has not yet been visited. It matches every unvisited <a> or <area> element that has an href attribute.

MDN Reference

The list-style CSS shorthand property allows you to set all the list style properties at once.

The values of this property are applied to list items, including <li> elements and elements with display: list-item;. Because this property is inherited, it can be set on a parent element (normally <ol> or <ul>) to make the same list styling apply to all the nested items.

This property is a shorthand for the following CSS properties:

• list-style-image
• list-style-position
• list-style-type

MDN Reference

The list-style-image CSS property sets an image to be used as the list item marker. s It is often more convenient to use the shorthand list-style.

This property is applied to list items, i.e. elements with display: list-item; by default this includes <li> elements. Because this property is inherited, it can be set on a parent element (normally <ol> or <ul>) to let it apply to all list items.

MDN Reference

The list-style-position CSS property sets the position of the ::marker relative to a list item.

MDN Reference

The list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.

The marker will be currentcolor, the same as the computed color of the element it applies to.

Only a few elements (<li> and <summary>) have a default value of display: list-item. However, the list-style-type property may be applied to any element whose display value is set to list-item. Moreover, because this property is inherited, it can be set on a parent element (commonly <ol> or <ul>) to make it apply to all list items.

MDN Reference

The margin CSS shorthand property sets the margin area on all four sides of an element.

This property is a shorthand for the following CSS properties:

• margin-top
• margin-right
• margin-bottom
• margin-left

MDN Reference

The margin CSS shorthand property sets the margin area on all four sides of an element.

This property is a shorthand for the following CSS properties:

• margin-top
• margin-right
• margin-bottom
• margin-left

MDN Reference

The margin-block CSS shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element’s writing mode, directionality, and text orientation.

This property is a shorthand for the following CSS properties:

• margin-block-start
• margin-block-end

MDN Reference

The margin-block CSS shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element’s writing mode, directionality, and text orientation.

This property is a shorthand for the following CSS properties:

• margin-block-start
• margin-block-end

MDN Reference

The margin-block-end CSS property defines the logical block end margin of an element, which maps to a physical margin depending on the element’s writing mode, directionality, and text orientation.

MDN Reference

The margin-block-end CSS property defines the logical block end margin of an element, which maps to a physical margin depending on the element’s writing mode, directionality, and text orientation.

MDN Reference

The margin-block-start CSS property defines the logical block start margin of an element, which maps to a physical margin depending on the element’s writing mode, directionality, and text orientation.

MDN Reference

The margin-block-start CSS property defines the logical block start margin of an element, which maps to a physical margin depending on the element’s writing mode, directionality, and text orientation.

MDN Reference

The margin-bottom CSS property sets the margin area on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

This property has no effect on non-replaced inline elements, such as <span> or <code>.

MDN Reference

The margin-bottom CSS property sets the margin area on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

This property has no effect on non-replaced inline elements, such as <span> or <code>.

MDN Reference

The margin-inline CSS shorthand property defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element’s writing mode, directionality, and text orientation.

This property is a shorthand for the following CSS properties:

• margin-inline-start
• margin-inline-end

MDN Reference

The margin-inline CSS shorthand property defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element’s writing mode, directionality, and text orientation.

This property is a shorthand for the following CSS properties:

• margin-inline-start
• margin-inline-end

MDN Reference

The margin-inline-end CSS property defines the logical inline end margin of an element, which maps to a physical margin depending on the element’s writing mode, directionality, and text orientation. In other words, it corresponds to the margin-top, margin-right, margin-bottom or margin-left property depending on the values defined for writing-mode, direction, and text-orientation.

MDN Reference

The margin-inline-end CSS property defines the logical inline end margin of an element, which maps to a physical margin depending on the element’s writing mode, directionality, and text orientation. In other words, it corresponds to the margin-top, margin-right, margin-bottom or margin-left property depending on the values defined for writing-mode, direction, and text-orientation.

MDN Reference

The margin-inline-start CSS property defines the logical inline start margin of an element, which maps to a physical margin depending on the element’s writing mode, directionality, and text orientation. In other words, it corresponds to the margin-top, margin-right, margin-bottom or margin-left property depending on the values defined for writing-mode, direction, and text-orientation.

MDN Reference

The margin-inline-start CSS property defines the logical inline start margin of an element, which maps to a physical margin depending on the element’s writing mode, directionality, and text orientation. In other words, it corresponds to the margin-top, margin-right, margin-bottom or margin-left property depending on the values defined for writing-mode, direction, and text-orientation.

MDN Reference

The margin-left CSS property sets the margin area on the left of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

The vertical margins of two adjacent boxes may fuse. This is called margin collapsing.

In the rare cases where width is overconstrained (i.e., when all of width, margin-left, border, padding, the content area, and margin-right are defined), margin-left is ignored, and will have the same calculated value as if the auto value was specified.

MDN Reference

The margin-left CSS property sets the margin area on the left of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

The vertical margins of two adjacent boxes may fuse. This is called margin collapsing.

In the rare cases where width is overconstrained (i.e., when all of width, margin-left, border, padding, the content area, and margin-right are defined), margin-left is ignored, and will have the same calculated value as if the auto value was specified.

MDN Reference

The margin-right CSS property sets the margin area on the right of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

The vertical margins of two adjacent boxes may fuse. This is called margin collapsing.

MDN Reference

The margin-right CSS property sets the margin area on the right of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

The vertical margins of two adjacent boxes may fuse. This is called margin collapsing.

MDN Reference

The margin-top CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

This property has no effect on non-replaced inline elements, such as <span> or <code>.

MDN Reference

The margin-top CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

This property has no effect on non-replaced inline elements, such as <span> or <code>.

MDN Reference

The ::marker CSS pseudo-element selects the marker box of a list item, which typically contains a bullet or number. It works on any element or pseudo-element set to display: list-item, such as the <li> and <summary> elements.

MDN Reference

The mask CSS shorthand property hides an element (partially or fully) by masking or clipping the image at specific points.

As well as the properties listed below, the mask shorthand also resets mask-border to its initial value. It is therefore recommended to use the mask shorthand rather than other shorthands or the individual properties to override any mask settings earlier in the cascade. This will ensure that mask-border has also been reset to allow the new styles to take effect.

This property is a shorthand for the following CSS properties:

• mask-clip
• mask-composite
• mask-image
• mask-mode
• mask-origin
• mask-position
• mask-repeat
• mask-size

MDN Reference

The mask-border CSS shorthand property lets you create a mask along the edge of an element’s border.

This property is a shorthand for the following CSS properties:

• mask-border-mode
• mask-border-outset
• mask-border-repeat
• mask-border-slice
• mask-border-source
• mask-border-width

MDN Reference

The mask-border-mode CSS property specifies the blending mode used in a mask border.

MDN Reference

The mask-border-outset CSS property specifies the distance by which an element’s mask border is set out from its border box.

MDN Reference

The mask-border-repeat CSS property sets how the edge regions of a source image are adjusted to fit the dimensions of an element’s mask border.

MDN Reference

The mask-border-slice CSS property divides the image set by mask-border-source into regions. These regions are used to form the components of an element’s mask mask border.

MDN Reference

The mask-border-source CSS property sets the source image used to create an element’s mask border.

The mask-border-slice property is used to divide the source image into regions, which are then dynamically applied to the final mask border.

MDN Reference

The mask-border-width CSS property set the width of an element’s mask border.

MDN Reference

The mask-border-width CSS property set the width of an element’s mask border.

MDN Reference

The mask-clip CSS property determines the area which is affected by a mask. The painted content of an element must be restricted to this area.

MDN Reference

The mask-composite CSS property represents a compositing operation used on the current mask layer with the mask layers below it.

MDN Reference

The mask-image CSS property sets the image that is used as mask layer for an element. By default this means the alpha channel of the mask image will be multiplied with the alpha channel of the element. This can be controlled with the mask-mode property.

MDN Reference

The mask-mode CSS property sets whether the mask reference defined by mask-image is treated as a luminance or alpha mask.

MDN Reference

The mask-origin CSS property sets the origin of a mask.

For elements rendered as a single box, this property specifies the mask positioning area. In other words, this property specifies the origin position of an image specified by the mask-image CSS property. For elements rendered as multiple boxes, such as inline boxes on several lines or boxes on several pages, it specifies which boxes box-decoration-break operates upon to determine the mask positioning area.

MDN Reference

The mask-position CSS property sets the initial position, relative to the mask position layer set by mask-origin, for each defined mask image.

MDN Reference

The mask-repeat CSS property sets how mask images are repeated. A mask image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all.

By default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space).

MDN Reference

The mask-size CSS property specifies the sizes of the mask images. The size of the image can be fully or partially constrained in order to preserve its intrinsic ratio.

If the value of this property is not set in a mask shorthand property that is applied to the element after the mask-size CSS property, the value of this property is then reset to its initial value by the shorthand property.

MDN Reference

The mask-type CSS property sets whether an SVG <mask> element is used as a luminance or an alpha mask. It applies to the <mask> element itself.

This property may be overridden by the mask-mode property, which has the same effect but applies to the element where the mask is used. Alpha masks will generally be faster to render.

MDN Reference

The math-depth property describes a notion of depth for each element of a mathematical formula, with respect to the top-level container of that formula. This is used to scale the computed value of the font-size of elements when font-size: math is applied.

font-size: math is the default for <math> elements in the MathML Core User Agent stylesheet, so it’s not necessary to specify it explicitly.

MDN Reference

The math-style property indicates whether MathML equations should render with normal or compact height.

MDN Reference

The max-block-size CSS property specifies the maximum size of an element in the direction opposite that of the writing direction as specified by writing-mode. That is, if the writing direction is horizontal, then max-block-size is equivalent to max-height; if the writing direction is vertical, max-block-size is the same as max-width.

The other dimension’s maximum length is specified using the max-inline-size property.

This is useful because the max-width is always used for horizontal sizes and max-height is always used for vertical sizes, and if you need to set lengths based on the size of your text content, you need to be able to do so with the writing direction in mind.

Any time you would normally use max-height or max-width, you should instead use max-block-size to set the maximum “height” of the content (even though this may not be a vertical value) and max-inline-size to set the maximum “width” of the content (although this may instead be vertical rather than horizontal). See writing-mode examples, which show the different writing modes in action.

MDN Reference

The max-block-size CSS property specifies the maximum size of an element in the direction opposite that of the writing direction as specified by writing-mode. That is, if the writing direction is horizontal, then max-block-size is equivalent to max-height; if the writing direction is vertical, max-block-size is the same as max-width.

The other dimension’s maximum length is specified using the max-inline-size property.

This is useful because the max-width is always used for horizontal sizes and max-height is always used for vertical sizes, and if you need to set lengths based on the size of your text content, you need to be able to do so with the writing direction in mind.

Any time you would normally use max-height or max-width, you should instead use max-block-size to set the maximum “height” of the content (even though this may not be a vertical value) and max-inline-size to set the maximum “width” of the content (although this may instead be vertical rather than horizontal). See writing-mode examples, which show the different writing modes in action.

MDN Reference

The max-height CSS property sets the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height.

max-height overrides height, but min-height overrides max-height.

MDN Reference

The max-height CSS property sets the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height.

max-height overrides height, but min-height overrides max-height.

MDN Reference

The max-inline-size CSS property defines the horizontal or vertical maximum size of an element’s block, depending on its writing mode. It corresponds to either the max-width or the max-height property, depending on the value of writing-mode.

If the writing mode is vertically oriented, the value of max-inline-size relates to the maximal height of the element; otherwise, it relates to the maximal width of the element. A related property is max-block-size, which defines the other dimension of the element.

MDN Reference

The max-inline-size CSS property defines the horizontal or vertical maximum size of an element’s block, depending on its writing mode. It corresponds to either the max-width or the max-height property, depending on the value of writing-mode.

If the writing mode is vertically oriented, the value of max-inline-size relates to the maximal height of the element; otherwise, it relates to the maximal width of the element. A related property is max-block-size, which defines the other dimension of the element.

MDN Reference

The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width.

max-width overrides width, but min-width overrides max-width.

MDN Reference

The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width.

max-width overrides width, but min-width overrides max-width.

MDN Reference

Allows to write inline media queries in classes. Contrarily to inline CSS where media queries can’t be used, Sketch generates CSS all the way to ensure media queries are usable.

Media queries allow you to apply CSS styles depending on a device’s media type (such as print vs. screen) or other features or characteristics such as screen resolution or orientation, aspect ratio, browser viewport width or height, user preferences such as preferring reduced motion, data usage, or transparency.

MDN Reference

pub fn my_class() {
  css.class([
    css.background("blue"),
    css.media(media.max_width(px(700)), [
      css.background("red"),
    ]),
  ])
}

The min-block-size CSS property defines the minimum horizontal or vertical size of an element’s block, depending on its writing mode. It corresponds to either the min-width or the min-height property, depending on the value of writing-mode.

If the writing mode is vertically oriented, the value of min-block-size relates to the minimum width of the element; otherwise, it relates to the minimum height of the element. A related property is min-inline-size, which defines the other dimension of the element.

MDN Reference

The min-block-size CSS property defines the minimum horizontal or vertical size of an element’s block, depending on its writing mode. It corresponds to either the min-width or the min-height property, depending on the value of writing-mode.

If the writing mode is vertically oriented, the value of min-block-size relates to the minimum width of the element; otherwise, it relates to the minimum height of the element. A related property is min-inline-size, which defines the other dimension of the element.

MDN Reference

The min-height CSS property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.

The element’s height is set to the value of min-height whenever min-height is larger than max-height or height.

MDN Reference

The min-height CSS property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.

The element’s height is set to the value of min-height whenever min-height is larger than max-height or height.

MDN Reference

The min-inline-size CSS property defines the horizontal or vertical minimal size of an element’s block, depending on its writing mode. It corresponds to either the min-width or the min-height property, depending on the value of writing-mode.

MDN Reference

The min-inline-size CSS property defines the horizontal or vertical minimal size of an element’s block, depending on its writing mode. It corresponds to either the min-width or the min-height property, depending on the value of writing-mode.

MDN Reference

The min-width CSS property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.

The element’s width is set to the value of min-width whenever min-width is larger than max-width or width.

MDN Reference

The min-width CSS property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.

The element’s width is set to the value of min-width whenever min-width is larger than max-width or width.

MDN Reference

The mix-blend-mode CSS property sets how an element’s content should blend with the content of the element’s parent and the element’s background.

MDN Reference

The :muted CSS pseudo-class selector represents an element that is capable of making sound, such as <audio> or <video>, but is muted (forced silent).

Muted is different from :volume-locked in that the page author has control over whether a media element can be muted or un-muted. User agents may set media muted value according to use preferences (e.g., remembering the last set value across sessions, on a per-site basis, or otherwise). An element that is :volume-locked cannot be muted, un-muted, or have its volume changed via JavaScript because of an operating system or user agent preference.

MDN Reference

The next-sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

/* Paragraphs that come immediately after any image */
img + p {
  font-weight: bold;
}

MDN Reference

Use it to avoid generating a property. Can be used to generate dynamic classes, or when an empty property is needed.

pub fn my_class(is_blue: Bool) {
  css.class([
    case is_blue {
      True -> css.background("blue")
      False -> css.none()
    }
  ])
}

The :nth-child() CSS pseudo-class matches elements based on the indexes of the elements in the child list of their parents. In other words, the :nth-child() selector selects child elements according to their position among all the sibling elements within a parent element.

MDN Reference

The :nth-last-child() CSS pseudo-class matches elements based on their position among a group of siblings, counting from the end.

MDN Reference

The :nth-last-of-type() CSS pseudo-class matches elements based on their position among siblings of the same type (tag name), counting from the end.

MDN Reference

The :nth-of-type() CSS pseudo-class matches elements based on their position among siblings of the same type (tag name).

MDN Reference

The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.

The object-fit property has no effect on <iframe>, <embed>, and <fencedframe> elements.

You can alter the alignment of the replaced element’s content object within the element’s box using the object-position property.

MDN Reference

The object-position CSS property specifies the alignment of the selected replaced element’s contents within the element’s box. Areas of the box which aren’t covered by the replaced element’s object will show the element’s background.

You can adjust how the replaced element’s object’s intrinsic size (that is, its natural size) is adjusted to fit within the element’s box using the object-fit property.

MDN Reference

The offset CSS shorthand property sets all the properties required for animating an element along a defined path. The offset properties together help to define an offset transform, a transform that aligns a point in an element (offset-anchor) to an offset position (offset-position) on a path (offset-path) at various points along the path (offset-distance) and optionally rotates the element (offset-rotate) to follow the direction of the path.

This property is a shorthand for the following CSS properties:

• offset-anchor
• offset-distance
• offset-path
• offset-position
• offset-rotate

MDN Reference

The offset-anchor CSS property specifies the point inside the box of an element traveling along an offset-path that is actually moving along the path.

MDN Reference

The offset-distance CSS property specifies a position along an offset-path for an element to be placed.

MDN Reference

The offset-path CSS property specifies a path for an element to follow and determines the element’s positioning within the path’s parent container or the SVG coordinate system. The path is a line, a curve, or a geometrical shape along which the element gets positioned or moves.

The offset-path property is used in combination with the offset-distance, offset-rotate, and offset-anchor properties to control the position and orientation of the element along a path.

MDN Reference

The offset-position CSS property defines the initial position of an element along a path. This property is typically used in combination with the offset-path property to create a motion effect. The value of offset-position determines where the element gets placed initially for moving along an offset path if an offset-path function such as path() does not specify its own starting position.

The offset-position property is part of a motion system based on offset constituent properties, including offset-anchor, offset-distance, and offset-path. These properties work together to create various motion effects along a path.

MDN Reference

The offset-rotate CSS property defines the orientation/direction of the element as it is positioned along the offset-path.

MDN Reference

The :only-child CSS pseudo-class represents an element without any siblings. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.

MDN Reference

The :only-of-type CSS pseudo-class represents an element that has no siblings of the same type.

MDN Reference

The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

MDN Reference

The :optional CSS pseudo-class represents any <input>, <select> or <textarea> element that has the optional attribute set on it.

MDN Reference

The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order. Items not given an explicit order value are assigned the default value of 0.

MDN Reference

The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order. Items not given an explicit order value are assigned the default value of 0.

MDN Reference

The orphans CSS property sets the minimum number of lines in a block container that must be shown at the bottom of a page, region, or column.

In typography, an orphan is the first line of a paragraph that appears alone at the bottom of a page. (The paragraph continues on a following page.)

MDN Reference

The orphans CSS property sets the minimum number of lines in a block container that must be shown at the bottom of a page, region, or column.

In typography, an orphan is the first line of a paragraph that appears alone at the bottom of a page. (The paragraph continues on a following page.)

MDN Reference

The :out-of-range CSS pseudo-class represents an <input> element whose current value is outside the range limits specified by the min and max attributes.

MDN Reference

The outline CSS shorthand property sets most of the outline properties in a single declaration.

This property is a shorthand for the following CSS properties:

• outline-width
• outline-style
• outline-color

MDN Reference

The outline-color CSS property sets the color of an element’s outline.

It is often more convenient to use the shorthand property outline when defining the appearance of an outline.

MDN Reference

The outline-offset CSS property sets the amount of space between an outline and the edge or border of an element.

MDN Reference

The outline-style CSS property sets the style of an element’s outline. An outline is a line that is drawn around an element, outside the border.

It is often more convenient to use the shorthand property outline when defining the appearance of an outline.

MDN Reference

The outline-width CSS property sets the thickness of an element’s outline. An outline is a line that is drawn around an element, outside the border.

It is often more convenient to use the shorthand property outline when defining the appearance of an outline.

MDN Reference

The overflow CSS shorthand property sets the desired behavior when content does not fit in the element’s padding box (overflows) in the horizontal and/or vertical direction.

This property is a shorthand for the following CSS properties:

• overflow-x
• overflow-y

MDN Reference

The overflow-anchor CSS property provides a way to opt out of the browser’s scroll anchoring behavior, which adjusts scroll position to minimize content shifts.

Scroll anchoring behavior is enabled by default in any browser that supports it. Therefore, changing the value of this property is typically only required if you are experiencing problems with scroll anchoring in a document or part of a document and need to turn the behavior off.

MDN Reference

The overflow-block CSS property sets what shows when content overflows the block start and block end edges of a box. This may be nothing, a scroll bar, or the overflow content.

The overflow-block property maps to overflow-y or overflow-x depending on the writing mode of the document.

MDN Reference

The overflow-clip-margin CSS property determines how far outside its bounds an element with overflow: clip may be painted before being clipped. The bound defined by this property is called the overflow clip edge of the box.

MDN Reference

The overflow-inline CSS property sets what shows when content overflows the inline start and end edges of a box. This may be nothing, a scroll bar, or the overflow content.

The overflow-inline property maps to overflow-y or overflow-x depending on the writing mode of the document.

MDN Reference

The overflow-wrap CSS property applies to text, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.

The property was originally a nonstandard and unprefixed Microsoft extension called word-wrap, and was implemented by most browsers with the same name. It has since been renamed to overflow-wrap, with word-wrap being an alias.

MDN Reference

The overflow-x CSS property sets what shows when content overflows a block-level element’s left and right edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the overflow shorthand property.

MDN Reference

The overflow-y CSS property sets what shows when content overflows a block-level element’s top and bottom edges. This may be nothing, a scroll bar, or the overflow content. This property may also be set by using the overflow shorthand property.

MDN Reference

The overscroll-behavior CSS property sets what a browser does when reaching the boundary of a scrolling area.

This property is a shorthand for the following CSS properties:

• overscroll-behavior-x
• overscroll-behavior-y

MDN Reference

The overscroll-behavior-block CSS property sets the browser’s behavior when the block direction boundary of a scrolling area is reached.

MDN Reference

The overscroll-behavior-inline CSS property sets the browser’s behavior when the inline direction boundary of a scrolling area is reached.

MDN Reference

The overscroll-behavior-x CSS property sets the browser’s behavior when the horizontal boundary of a scrolling area is reached.

MDN Reference

The overscroll-behavior-x CSS property sets the browser’s behavior when the vertical boundary of a scrolling area is reached.

MDN Reference

The padding CSS shorthand property sets the padding area on all four sides of an element at once.

An element’s padding area is the space between its content and its border.

Padding creates extra space within an element. In contrast, margin creates extra space around an element.

This property is a shorthand for the following CSS properties:

• padding-top
• padding-right
• padding-bottom
• padding-left

MDN Reference

The padding CSS shorthand property sets the padding area on all four sides of an element at once.

An element’s padding area is the space between its content and its border.

Padding creates extra space within an element. In contrast, margin creates extra space around an element.

This property is a shorthand for the following CSS properties:

• padding-top
• padding-right
• padding-bottom
• padding-left

MDN Reference

The padding-block CSS shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element’s writing mode, directionality, and text orientation.

This property is a shorthand for the following CSS properties:

• padding-block-start
• padding-block-end

MDN Reference

The padding-block CSS shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element’s writing mode, directionality, and text orientation.

This property is a shorthand for the following CSS properties:

• padding-block-start
• padding-block-end

MDN Reference

The padding-block-end CSS property defines the logical block end padding of an element, which maps to a physical padding depending on the element’s writing mode, directionality, and text orientation.

MDN Reference

The padding-block-end CSS property defines the logical block end padding of an element, which maps to a physical padding depending on the element’s writing mode, directionality, and text orientation.

MDN Reference

The padding-block-start CSS property defines the logical block start padding of an element, which maps to a physical padding depending on the element’s writing mode, directionality, and text orientation.

MDN Reference

The padding-block-start CSS property defines the logical block start padding of an element, which maps to a physical padding depending on the element’s writing mode, directionality, and text orientation.

MDN Reference

The padding-bottom CSS property sets the height of the padding area on the bottom of an element.

MDN Reference

The padding-bottom CSS property sets the height of the padding area on the bottom of an element.

MDN Reference

The padding-inline CSS shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element’s writing mode, directionality, and text orientation.

This property is a shorthand for the following CSS properties:

• padding-inline-end
• padding-inline-start

MDN Reference

The padding-inline CSS shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element’s writing mode, directionality, and text orientation.

This property is a shorthand for the following CSS properties:

• padding-inline-end
• padding-inline-start

MDN Reference

The padding-inline-end CSS property defines the logical inline end padding of an element, which maps to a physical padding depending on the element’s writing mode, directionality, and text orientation.

MDN Reference

The padding-inline-end CSS property defines the logical inline end padding of an element, which maps to a physical padding depending on the element’s writing mode, directionality, and text orientation.

MDN Reference

The padding-inline-start CSS property defines the logical inline start padding of an element, which maps to a physical padding depending on the element’s writing mode, directionality, and text orientation.

MDN Reference

The padding-inline-start CSS property defines the logical inline start padding of an element, which maps to a physical padding depending on the element’s writing mode, directionality, and text orientation.

MDN Reference

The padding-left CSS property sets the width of the padding area to the left of an element.

MDN Reference

The padding-left CSS property sets the width of the padding area to the left of an element.

MDN Reference

The padding-right CSS property sets the width of the padding area to the right of an element.

MDN Reference

The padding-right CSS property sets the width of the padding area to the right of an element.

MDN Reference

The padding-top CSS property sets the height of the padding area on the top of an element.

MDN Reference

The padding-top CSS property sets the height of the padding area on the top of an element.

MDN Reference