| backdrop-filter |
Defines a graphical effect to the area behind an element |
| backface-visibility |
Defines whether or not the back face of an element should be visible when facing the user |
| background |
A shorthand property for all the background-* properties |
| background-attachment |
Sets whether a background image scrolls with the rest of the page, or is fixed |
| background-blend-mode |
Specifies the blending mode of each background layer (color/image) |
| background-clip |
Defines how far the background (color or image) should extend within an
element |
| background-color |
Specifies the background color of an element |
| background-image |
Specifies one or more background images for an element |
| background-origin |
Specifies the origin position of a background image |
| background-position |
Specifies the position of a background image |
| background-position-x |
Specifies the position of a background image on x-axis |
| background-position-y |
Specifies the position of a background image on y-axis |
| background-repeat |
Sets if/how a background image will be repeated |
| background-size |
Specifies the size of the background images |
| block-size |
Specifies the size of an element in block direction |
| border |
A shorthand property for border-width, border-style and border-color |
| border-block |
A shorthand property for border-block-width, border-block-style and border-block-color |
| border-block-color |
Sets the color of the borders at start and end in the block direction |
| border-block-end |
A shorthand property for border-block-end-width, border-block-end-style and border-block-end-color |
| border-block-end-color |
Sets the color of the border at the end in the block direction |
| border-block-end-style |
Sets the style of the border at the end in the block direction |
| border-block-end-width |
Sets the width of the border at the end in the block direction |
| border-block-start |
A shorthand property for border-block-start-width, border-block-start-style and border-block-start-color |
| border-block-start-color |
Sets the color of the border at the start in the block direction |
| border-block-start-style |
Sets the style of the border at the start in the block direction |
| border-block-start-width |
Sets the width of the border at the start in the block direction |
| border-block-style |
Sets the style of the borders at start and end in the block direction |
| border-block-width |
Sets the width of the borders at start and end in the block direction |
| border-bottom |
A shorthand property for border-bottom-width, border-bottom-style
and border-bottom-color |
| border-bottom-color |
Sets the color of the bottom border |
| border-bottom-left-radius |
Defines the radius of the border of the bottom-left corner |
| border-bottom-right-radius |
Defines the radius of the border of the bottom-right corner |
| border-bottom-style |
Sets the style of the bottom border |
| border-bottom-width |
Sets the width of the bottom border |
| border-collapse |
Sets whether table borders should collapse into a single border or be separated |
| border-color |
Sets the color of the four borders |
| border-end-end-radius |
Sets the radius of the corner between the block-end and the inline-end
sides of the element |
| border-end-start-radius |
Sets the radius of the corner between the block-end and the inline-start
sides of the element |
| border-image |
A shorthand property for all the border-image-* properties |
| border-image-outset |
Specifies the amount by which the border image area extends beyond the border box |
| border-image-repeat |
Specifies whether the border image should be repeated, rounded or stretched |
| border-image-slice |
Specifies how to slice the border image |
| border-image-source |
Specifies the path to the image to be used as a border |
| border-image-width |
Specifies the width of the border image |
| border-inline |
A shorthand property for border-inline-width, border-inline-style and border-inline-color |
| border-inline-color |
Sets the color of the borders at start and end in the inline direction |
| border-inline-end |
A shorthand property for border-inline-end-width, border-inline-end-style and border-inline-end-color |
| border-inline-end-color |
Sets the color of the border at the end in the inline direction |
| border-inline-end-style |
Sets the style of the border at the end in the inline direction |
| border-inline-end-width |
Sets the width of the border at the end in the inline direction |
| border-inline-start |
A shorthand property for border-inline-start-width, border-inline-start-style and border-inline-start-color |
| border-inline-start-color |
Sets the color of the border at the start in the inline direction |
| border-inline-start-style |
Sets the style of the border at the start in the inline direction |
| border-inline-start-width |
Sets the width of the border at the start in the inline direction |
| border-inline-style |
Sets the style of the borders at start and end in the inline direction |
| border-inline-width |
Sets the width of the borders at start and end in the inline direction |
| border-left |
A shorthand property for all the border-left-* properties |
| border-left-color |
Sets the color of the left border |
| border-left-style |
Sets the style of the left border |
| border-left-width |
Sets the width of the left border |
| border-radius |
A shorthand property for the four border-*-radius properties |
| border-right |
A shorthand property for all the border-right-* properties |
| border-right-color |
Sets the color of the right border |
| border-right-style |
Sets the style of the right border |
| border-right-width |
Sets the width of the right border |
| border-spacing |
Sets the distance between the borders of adjacent cells |
| border-start-end-radius |
Sets the radius of the corner between the block-start and the inline-end
sides of the element |
| border-start-start-radius |
Sets the radius of the corner between the block-start and the inline-start
sides of the element |
| border-style |
Sets the style of the four borders |
| border-top |
A shorthand property for border-top-width, border-top-style and
border-top-color |
| border-top-color |
Sets the color of the top border |
| border-top-left-radius |
Defines the radius of the border of the top-left corner |
| border-top-right-radius |
Defines the radius of the border of the top-right corner |
| border-top-style |
Sets the style of the top border |
| border-top-width |
Sets the width of the top border |
| border-width |
Sets the width of the four borders |
| bottom |
Sets the elements position, from the bottom of its parent element |
| box-decoration-break |
Sets the behavior of the background and border of an element at page-break, or, for in-line elements, at line-break. |
| box-reflect |
The box-reflect property is used to create a reflection of an element. |
| box-shadow |
Attaches one or more shadows to an element |
| box-sizing |
Defines how the width and height of an element are calculated: should
they include padding and borders, or not |
| break-after |
Specifies whether or not a page-, column-, or region-break should occur
after the specified element |
| break-before |
Specifies whether or not a page-, column-, or region-break should occur
before the specified element |
| break-inside |
Specifies whether or not a page-, column-, or region-break should occur
inside the specified element |
| caption-side |
Specifies the placement of a table caption |
| caret-color |
Specifies the color of the cursor (caret) in inputs, textareas, or any
element that is editable |
| @charset |
Specifies the character encoding used in the style sheet |
| clear |
Specifies what should happen with the element that is next to a floating
element |
| clip |
Deprecated in favor of clip-path. Clips an absolutely positioned element |
| clip-path |
Clips an element to a basic shape or to an SVG source |
| color |
Sets the color of text |
| color-scheme |
Indicates which operating system color scheme an element should render
with |
| column-count |
Specifies the number of columns an element should be divided into |
| column-fill |
Specifies how to fill columns, balanced or not |
| column-gap |
Specifies the gap between the columns |
| column-rule |
A shorthand property for all the column-rule-* properties |
| column-rule-color |
Specifies the color of the rule between columns |
| column-rule-style |
Specifies the style of the rule between columns |
| column-rule-width |
Specifies the width of the rule between columns |
| column-span |
Specifies how many columns an element should span across |
| column-width |
Specifies the column width |
| columns |
A shorthand property for column-width and column-count |
| content |
Used with the :before and :after pseudo-elements, to insert generated content |
| counter-increment |
Increases or decreases the value of one or more CSS counters |
| counter-reset |
Creates or resets one or more CSS counters |
| counter-set |
Creates or sets one or more CSS counters |
| cursor |
Specifies the mouse cursor to be displayed when pointing over an element |
| filter |
Defines effects (e.g. blurring or color shifting) on an element before the element is displayed |
| flex |
A shorthand property for the flex-grow, flex-shrink, and the
flex-basis
properties |
| flex-basis |
Specifies the initial length of a flexible item |
| flex-direction |
Specifies the direction of the flexible items |
| flex-flow |
A shorthand property for the flex-direction and the flex-wrap properties |
| flex-grow |
Specifies how much the item will grow relative to the rest |
| flex-shrink |
Specifies how the item will shrink relative to the rest |
| flex-wrap |
Specifies whether the flexible items should wrap or not |
| float |
Specifies whether an element should float to the left, right, or not at
all |
| font |
A shorthand property for the font-style, font-variant, font-weight,
font-size/line-height, and the font-family properties |
| @font-face |
A rule that allows websites to download and use fonts other than the "web-safe" fonts |
| font-family |
Specifies the font family for text |
| font-feature-settings |
Allows control over advanced typographic features in OpenType fonts |
| @font-feature-values |
Allows authors to use a common name in font-variant-alternate for feature activated differently in OpenType |
| font-kerning |
Controls the usage of the kerning information (how letters are spaced) |
| font-language-override |
Controls the usage of language-specific glyphs in a typeface |
| font-size |
Specifies the font size of text |
| font-size-adjust |
Preserves the readability and size of text when fallback font occurs |
| font-stretch |
Selects a normal, condensed, or expanded face from a font family |
| font-style |
Specifies the font style for text |
| font-synthesis |
Controls which missing typefaces (bold or italic) may be synthesized by the browser |
| font-variant |
Specifies whether or not a text should be displayed in a small-caps font |
| font-variant-alternates |
Controls the usage of alternate glyphs associated to alternative names defined in @font-feature-values |
| font-variant-caps |
Controls the usage of alternate glyphs for capital letters |
| font-variant-east-asian |
Controls the usage of alternate glyphs for East Asian scripts (e.g Japanese and Chinese) |
| font-variant-ligatures |
Controls which ligatures and contextual forms are used in textual content of the elements it applies to |
| font-variant-numeric |
Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers |
| font-variant-position |
Controls the usage of alternate glyphs of smaller size positioned as superscript or subscript regarding the baseline of the font |
| font-weight |
Specifies the weight of a font |
| gap |
A shorthand property for the row-gap and the column-gap properties |
| grid |
A shorthand property for the grid-template-rows,
grid-template-columns, grid-template-areas, grid-auto-rows,
grid-auto-columns, and the grid-auto-flow properties |
| grid-area |
Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties |
| grid-auto-columns |
Specifies a default column size |
| grid-auto-flow |
Specifies how auto-placed items are inserted in the grid |
| grid-auto-rows |
Specifies a default row size |
| grid-column |
A shorthand property for the grid-column-start and the grid-column-end properties |
| grid-column-end |
Specifies where to end the grid item |
| grid-column-start |
Specifies where to start the grid item |
| grid-row |
A shorthand property for the grid-row-start and the grid-row-end properties |
| grid-row-end |
Specifies where to end the grid item |
| grid-row-start |
Specifies where to start the grid item |
| grid-template |
A shorthand property for the grid-template-rows, grid-template-columns
and grid-areas properties |
| grid-template-areas |
Specifies how to display columns and rows, using named grid items |
| grid-template-columns |
Specifies the size of the columns, and how many columns in a grid layout |
| grid-template-rows |
Specifies the size of the rows in a grid layout |
| margin |
Sets all the margin properties in one declaration |
| margin-block |
Specifies the margin in the block direction |
| margin-block-end |
Specifies the margin at the end in the block direction |
| margin-block-start |
Specifies the margin at the start in the block direction |
| margin-bottom |
Sets the bottom margin of an element |
| margin-inline |
Specifies the margin in the inline direction |
| margin-inline-end |
Specifies the margin at the end in the inline direction |
| margin-inline-start |
Specifies the margin at the start in the inline direction |
| margin-left |
Sets the left margin of an element |
| margin-right |
Sets the right margin of an element |
| margin-top |
Sets the top margin of an element |
| marker |
Points to a marker that will be drawn on all vertices of an element's
path (the first, middle, and last) |
| marker-end |
Points to a marker that will be drawn on the last vertex of an element's
path |
| marker-mid |
Points to a marker that will be drawn on all the middle vertices of an
element's path |
| marker-start |
Points to a marker that will be drawn on the first vertex of an
element's path |
| mask |
A shorthand property for mask-image, mask-mode,
mask-repeat, mask-position, mask-clip, mask-origin,
mask-size and mask-composite |
| mask-clip |
Specifies which area is affected by a mask image |
| mask-composite |
Specifies a compositing operation used on the current mask layer with
the mask layers below it |
| mask-image |
Specifies an image to be used as a mask layer for an element |
| mask-mode |
Specifies whether the mask layer image is treated as a luminance mask or
as an alpha mask |
| mask-origin |
Specifies the origin position (the mask
position area) of a mask layer image |
| mask-position |
Sets the starting position of a mask layer image (relative to the
mask position area) |
| mask-repeat |
Specifies how the mask layer image is repeated |
| mask-size |
Specifies the size of a mask layer image |
| mask-type |
Specifies whether an SVG <mask> element is treated as a luminance
mask or as an alpha mask |
| max-height |
Sets the maximum height of an element |
| max-width |
Sets the maximum width of an element |
| @media |
Sets the style rules for different media types/devices/sizes |
| max-block-size |
Sets the maximum size of an element in the block direction |
| max-inline-size |
Sets the maximum size of an element in the inline direction |
| min-block-size |
Sets the minimum size of an element in the block direction |
| min-inline-size |
Sets the minimum size of an element in the inline direction |
| min-height |
Sets the minimum height of an element |
| min-width |
Sets the minimum width of an element |
| mix-blend-mode |
Specifies how an element's content should blend with its direct parent background |
| object-fit |
Specifies how the contents of a replaced element should be fitted to the box established by its used height and width |
| object-position |
Specifies the alignment of the replaced element inside its box |
| offset |
A shorthand property for the offset-anchor, offset-distance,
offset-path, offset-position, and the offset-rotate
properties |
| offset-anchor |
Specifies a point on an element that is fixed to the path it is animated along |
| offset-distance |
Specifies the position along a path where an animated element is placed |
| offset-path |
Specifies the path an element is animated along |
| offset-position |
Specifies the initial position of an element along a path |
| offset-rotate |
Specifies rotation of an element as it is animated along a path |
| opacity |
Sets the opacity level for an element |
| order |
Sets the order of the flexible item, relative to the rest |
| orphans |
Sets the minimum number of lines that must be left at the bottom of a
page or column |
| outline |
A shorthand property for the outline-width, outline-style, and
the outline-color properties |
| outline-color |
Sets the color of an outline |
| outline-offset |
Offsets an outline, and draws it beyond the border edge |
| outline-style |
Sets the style of an outline |
| outline-width |
Sets the width of an outline |
overflow
|
Specifies what happens if content overflows an element's box |
overflow-anchor
|
Specifies whether or not content in viewable area in a scrollable contianer should be pushed down when new content is loaded above |
| overflow-wrap |
Specifies whether or not the browser can break lines with long words, if
they overflow the container |
| overflow-x |
Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area |
| overflow-y |
Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area |
| overscroll-behavior |
Specifies whether to have scroll chaining or overscroll affordance in x- and y-directions |
| overscroll-behavior-block |
Specifies whether to have scroll chaining or overscroll affordance in the block direction |
| overscroll-behavior-inline |
Specifies whether to have scroll chaining or overscroll affordance in the inline direction |
| overscroll-behavior-x |
Specifies whether to have scroll chaining or overscroll affordance in x-direction |
| overscroll-behavior-y |
Specifies whether to have scroll chaining or overscroll affordance in y-directions |
| padding |
A shorthand property for all the padding-* properties |
| padding-block |
Specifies the padding in the block direction |
| padding-block-end |
Specifies the padding at the end in the block direction |
| padding-block-start |
Specifies the padding at the start in the block direction |
| padding-bottom |
Sets the bottom padding of an element |
| padding-inline |
Specifies the padding in the inline direction |
| padding-inline-end |
Specifies the padding at the end in the inline direction |
| padding-inline-start |
Specifies the padding at the start in the inline direction |
| padding-left |
Sets the left padding of an element |
| padding-right |
Sets the right padding of an element |
| padding-top |
Sets the top padding of an element |
| page-break-after |
Sets the page-break behavior after an element. Replaced by break-after property |
| page-break-before |
Sets the page-break behavior before an element. Replaced by break-before property |
| page-break-inside |
Sets the page-break behavior inside an element. Replaced by break-inside property |
| paint-order |
Sets the order of how an SVG element or text is painted. |
| perspective |
Gives a 3D-positioned element some perspective |
| perspective-origin |
Defines at which position the user is looking at the 3D-positioned element |
| place-content |
Specifies align-content and justify-content property values for flexbox and grid layouts |
| place-items |
Specifies align-items and justify-items property values for grid layouts |
| place-self |
Specifies align-self and justify-self property values for grid layouts |
| pointer-events |
Defines whether or not an element reacts to pointer events |
| position |
Specifies the type of positioning method used for an element (static, relative, absolute or fixed) |
| @property |
Defines custom
CSS properties directly in the stylesheet without having to run any
JavaScript |
| scale |
Specifies the size of an element by scaling up or down |
| scroll-behavior |
Specifies whether to smoothly animate the scroll position in a scrollable box, instead of a straight jump |
| scroll-margin |
Specifies the margin between the snap position and the container |
| scroll-margin-block |
Specifies the margin between the snap position and the container in the block direction |
| scroll-margin-block-end |
Specifies the end margin between the snap position and the container in the block direction |
| scroll-margin-block-start |
Specifies the start margin between the snap position and the container in the block direction |
| scroll-margin-bottom |
Specifies the margin between the snap position on the bottom side and the container |
| scroll-margin-inline |
Specifies the margin between the snap position and the container in the inline direction |
| scroll-margin-inline-end |
Specifies the end margin between the snap position and the container in the inline direction |
| scroll-margin-inline-start |
Specifies the start margin between the snap position and the container in the inline direction |
| scroll-margin-left |
Specifies the margin between the snap position on the left side and the container |
| scroll-margin-right |
Specifies the margin between the snap position on the right side and the container |
| scroll-margin-top |
Specifies the margin between the snap position on the top side and the container |
| scroll-padding |
Specifies the distance from the container to the snap position on the child elements |
| scroll-padding-block |
Specifies the distance in block direction from the container to the snap position on the child elements |
| scroll-padding-block-end |
Specifies the distance in block direction from the end of the container to the snap position on the child elements |
| scroll-padding-block-start |
Specifies the distance in block direction from the start of the container to the snap position on the child elements |
| scroll-padding-bottom |
Specifies the distance from the bottom of the container to the snap position on the child elements |
| scroll-padding-inline |
Specifies the distance in inline direction from the container to the snap position on the child elements |
| scroll-padding-inline-end |
Specifies the distance in inline direction from the end of the container to the snap position on the child elements |
| scroll-padding-inline-start |
Specifies the distance in inline direction from the start of the container to the snap position on the child elements |
| scroll-padding-left |
Specifies the distance from the left side of the container to the snap position on the child elements |
| scroll-padding-right |
Specifies the distance from the right side of the container to the snap position on the child elements |
| scroll-padding-top |
Specifies the distance from the top of the container to the snap position on the child elements |
| scroll-snap-align |
Specifies where to position elements when the user stops scrolling |
| scroll-snap-stop |
Specifies scroll behaviour after fast swipe on trackpad or touch screen |
| scroll-snap-type |
Specifies how snap behaviour should be when scrolling |
| scrollbar-color |
Specifies the color of the scrollbar of an element |
