Search
Search CSS
zoom (@viewport)
@viewportDeprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of bein..
resolution#x
<resolution>The <resolution> CSS data type, used for describing resolutions in media queries, denotes the pixel density of an output device, i.e., its resolution. On screens, the units are..
width (@viewport)
@viewportDeprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of bein..
visibility
visibilityThe visibility CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a <table>. To both hide an element and re..
viewport-fit (@viewport)
@viewportDeprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of bein..
@viewport
@viewportDeprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of bein..
length#vw
<length>The <length> CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-sh..
length#vmin
<length>The <length> CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-sh..
length#vmax
<length>The <length> CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-sh..
length#vh
<length>The <length> CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-sh..
user-zoom (@viewport)
@viewportDeprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of bein..
:user-valid
:user-valid (:-moz-ui-valid)The :user-valid CSS pseudo-class represents any validated form element whose value validates correctly based on its validation constraints. However, unlike :valid it only m..
:user-invalid
:user-invalid (:-moz-ui-invalid)The :user-invalid CSS pseudo-class represents any validated form element whose value isn't valid based on their validation constraints, after the user has interacted wi..
unicode-range (@font-face)
unicode-rangeThe unicode-range CSS descriptor sets the specific range of characters to be used from a font defined by @font-face and made available for use on the current page. If the page doesn't use..
unicode-bidi
unicode-bidiThe unicode-bidi CSS property, together with the direction property, determines how bidirectional text in a document is handled. For example, if a block of content contains both left-to-ri..
translateZ()
translateZ() The translateZ() CSS function repositions an element along the z-axis in 3D space, i.e., closer to or farther away from the viewer. Its result is a <transform-function> data typ..
transition-timing-function
transition-timing-functionThe transition-timing-function CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect. This, in essence, lets you e..
transition-duration
transition-durationThe transition-duration CSS property sets the length of time a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur. You m..
transition-delay
transition-delayThe transition-delay CSS property specifies the duration to wait before starting a property's transition effect when its value changes. The delay may be zero, positive, or negative: ..
transform-style
transform-styleThe transform-style CSS property sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element. If flattened, the element's children wi..
transform-origin
transform-originThe transform-origin CSS property sets the origin for an element's transformations. The transform origin is the point around which a transformation is applied. For example, the transfo..
<transform-function>
<transform-function>The <transform-function> CSS data type represents a transformation that affects an element's appearance. Transformation functions can rotate, resize, distort, or move a..
<timing-function>
<easing-function>The <easing-function> CSS data type denotes a mathematical function that describes the rate at which a numerical value changes. This transition between two values may be a..
text-overflow
text-overflowThe text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('…'), or display a custom string. The text-overflow propert..
text-orientation
text-orientationThe text-orientation CSS property sets the orientation of the text characters in a line. It only affects text in vertical mode (when writing-mode is not horizontal-tb). It is useful fo..
text-emphasis-style
text-emphasis-styleThe text-emphasis-style CSS property sets the appearance of emphasis marks. It can also be set, and reset, using the text-emphasis shorthand. /* Initial value */ text-emphasis-style..
text-emphasis-position
text-emphasis-positionThe text-emphasis-position CSS property sets where emphasis marks are drawn. Like ruby text, if there isn't enough room for emphasis marks, the line height is increased. /* Initi..
text-emphasis
text-emphasisThe text-emphasis CSS property applies emphasis marks to text (except spaces and control characters). It is a shorthand for text-emphasis-style and text-emphasis-color. The text-emphasis ..
text-combine-upright
text-combine-uprightThe text-combine-upright CSS property sets the combination of characters into the space of a single character. If the combined text is wider than 1em, the user agent must fit the c..
:target
:targetThe :target CSS pseudo-class represents a unique element (the target element) with an id matching the URL's fragment. /* Selects an element with an ID matching the current URL's fragment */ :ta..
swash()
font-variant-alternatesThe 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. /..
@supports
@supportsThe @supports CSS at-rule lets you specify declarations that depend on a browser's support for one or more specific CSS features. This is called a feature query. The rule may be placed at the..
stylistic()
font-variant-alternatesThe 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. /..
styleset()
font-variant-alternatesThe 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. /..
steps()
<easing-function>The <easing-function> CSS data type denotes a mathematical function that describes the rate at which a numerical value changes. This transition between two values may be a..
src (@font-face)
srcThe src CSS descriptor of the @font-face rule specifies the resource containing font data. It is required for the @font-face rule to be valid.Syntax/* <url> values */ src: url(https://someweb..
size-adjust (@font-face)
size-adjustThe size-adjust CSS descriptor defines a multiplier for glyph outlines and metrics associated with this font. This makes it easier to harmonize the designs of various fonts when rendered at..
size (@page)
sizeExperimental: This is an experimental technologyCheck the Browser compatibility table carefully before using this in production. The size CSS at-rule descriptor, used with the @page at-rule, defin..
scrollbar-gutter
scrollbar-gutterThe scrollbar-gutter CSS property allows authors to reserve space for the scrollbar, preventing unwanted layout changes as the content grows while also avoiding unnecessary visuals whe..
scroll-snap-type
scroll-snap-typeThe scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one. Specifying any precise animations or physics used to enforce ..
scroll-snap-stop
scroll-snap-stopThe scroll-snap-stop CSS property defines whether the scroll container is allowed to "pass over" possible snap positions. /* Keyword values */ scroll-snap-stop: normal; scroll-snap-sto..
scroll-margin-inline-start
scroll-margin-inline-startThe scroll-margin-inline-start property defines the margin of the scroll snap area at the start of the inline dimension that is used for snapping this box to the snapport. Th..
scroll-margin-inline-end
scroll-margin-inline-endThe scroll-margin-inline-end property defines the margin of the scroll snap area at the end of the inline dimension that is used for snapping this box to the snapport. The scro..
scroll-margin-inline
scroll-margin-inlineThe scroll-margin-inline shorthand property sets the scroll margins of an element in the inline dimension.Constituent propertiesThis property is a shorthand for the following CSS p..
scroll-margin
scroll-marginThe scroll-margin shorthand property sets all of the scroll margins of an element at once, assigning values much like the margin property does for margins of an element.Constituent proper..
scroll-behavior
scroll-behaviorThe scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs. Note that any other scrolls, such as those ..
row-gap
row-gap (grid-row-gap)The row-gap CSS property sets the size of the gap (gutter) between an element's grid rows.Syntax/* <length> values */ row-gap: 20px; row-gap: 1em; row-gap: 3vmin; row-gap: ..
rgba()
<color> The <color> CSS data type represents a color. A <color> may also include an alpha-channel transparency value, indicating how the color should composite with its backgroun..
rgb()
<color> The <color> CSS data type represents a color. A <color> may also include an alpha-channel transparency value, indicating how the color should composite with its backgroun..
revert
revertThe revert CSS keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the c..
<resolution>
<resolution>The <resolution> CSS data type, used for describing resolutions in media queries, denotes the pixel density of an output device, i.e., its resolution. On screens, the units are..
resize
resizeThe resize CSS property sets whether an element is resizable, and if so, in which directions. resize does not apply to the following: Inline elements Block elements for which the overflow p..
:required
:requiredThe :required CSS pseudo-class represents any <input>, <select>, or <textarea> element that has the required attribute set on it. /* Selects any required <input> */ in..
repeating-radial-gradient()
repeating-radial-gradient()The repeating-radial-gradient() CSS function creates an image consisting of repeating gradients that radiate from an origin. It is similar to radial-gradient() and takes the..
repeat()
repeat()The repeat() CSS function represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form. Th..
range (@counter-style)
rangeWhen defining custom counter styles, the range descriptor lets the author specify a range of counter values over which the style is applied. If a counter value is outside the specified range, the..
length#rem
<length>The <length> CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-sh..
length#Q
<length>The <length> CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-sh..
position
positionThe position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.Syntaxposition: stati..
:placeholder-shown
:placeholder-shownThe :placeholder-shown CSS pseudo-class represents any <input> or <textarea> element that is currently displaying placeholder text. /* Selects any element with an active ..
place-self
place-selfThe place-self CSS shorthand property allows you to align an individual item in both the block and inline directions at once (i.e. the align-self and justify-self properties) in a relevant l..
place-items
place-itemsThe CSS place-items shorthand property allows you to align items along both the block and inline directions at once (i.e. the align-items and justify-items properties) in a relevant layout ..
place-content
place-contentThe place-content CSS shorthand property allows you to align content along both the block and inline directions at once (i.e. the align-content and justify-content properties) in a releva..
:picture-in-picture
:picture-in-pictureThe :picture-in-picture CSS pseudo-class matches the element which is currently in picture-in-picture mode.Syntax:picture-in-pictureUsage notesThe :picture-in-picture pseudo-class l..
path()
path()The path() CSS function accepts an SVG path string, and is used in CSS Shapes and CSS Motion Path to enable a shape to be drawn.SyntaxWhen used in offset-path or d: path(<string>) When us..
:past
:pastThe :past CSS pseudo-class selector is a time-dimensional pseudo-class that will match for any element which appears entirely before an element that matches :current. For example in a video with ..
::part
::part()The ::part CSS pseudo-element represents any element within a shadow tree that has a matching part attribute. custom-element::part(foo) { /* Styles to apply to the `foo` part */ } Syntax::pa..
page-break-inside
page-break-inside Warning: This property has been replaced by the break-inside property. The page-break-inside CSS property adjusts page breaks inside the current element. /* Keyword values */ page..
length#px
<length>The <length> CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-sh..
length#pt
<length>The <length> CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-sh..
length#pc
<length>The <length> CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-sh..
Pseudo-classes
Pseudo-classesA CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's ..
overflow-y
overflow-yThe 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.Syntax/* Keyword v..
overflow-x
overflow-xThe 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.Syntax/* Keyword v..
overflow-inline
overflow-inlineThe 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. Note: The..
overflow-clip-margin
overflow-clip-marginThe overflow-clip-margin CSS property determines how far outside its bounds an element with overflow: clip may be painted before being clipped.Syntaxoverflow-clip-margin: 20px; ove..
overflow-block
overflow-blockThe 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. Note: ..
overflow
overflowThe overflow CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directi..
outline-width
outline-widthThe CSS outline-width 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..
outline
outlineThe outline CSS shorthand property set all the outline properties in a single declaration.Constituent propertiesThis property is a shorthand for the following CSS properties: outline-color ..
ornaments()
font-variant-alternatesThe 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. /..
orientation (@viewport)
@viewportDeprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of bein..
order
orderThe 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.Syntax/* <int..
:optional
:optionalThe :optional CSS pseudo-class represents any <input>, <select>, or <textarea> element that does not have the required attribute set on it. /* Selects any optional <input..
:only-child
:only-childThe :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. /*..
offset-anchor
offset-anchorThe offset-anchor CSS property specifies the point inside the box of an element travelling along an offset-path that is actually moving along the path.Syntax/* Keyword values */ offset-an..
object-position
object-positionThe 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 elem..
:nth-child
:nth-child()The :nth-child() CSS pseudo-class matches elements based on their position among a group of siblings. /* Selects the second <li> element in a list */ li:nth-child(2) { color: lime;..
mix-blend-mode
mix-blend-modeThe 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.Syntax/* Keyword values */ mix-blend-mode..
minmax()
minmax()The minmax() CSS function defines a size range greater than or equal to min and less than or equal to max. It is used with CSS Grids.Syntax/* <inflexible-breadth>, <track-breadth> ..
min-zoom (@viewport)
@viewportDeprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of bein..
min-width (@viewport)
@viewportDeprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of bein..
min-height (@viewport)
@viewportDeprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of bein..
min()
min()The min() CSS function lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a CSS property value. The min() function can be used anywhere a &..
@media
@mediaThe @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document..
max-zoom (@viewport)
@viewportDeprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of bein..
max-width (@viewport)
@viewportDeprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of bein..
max-height (@viewport)
@viewportDeprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of bein..
matrix3d()
matrix3d() The matrix3d() CSS function defines a 3D transformation as a 4x4 homogeneous matrix. Its result is a <transform-function> data type. SyntaxThe matrix3d() function is specified wit..
masonry-auto-flow
masonry-auto-flowExperimental: This is an experimental technologyCheck the Browser compatibility table carefully before using this in production. The masonry-auto-flow CSS property modifies how items ..
mask-repeat
mask-repeatThe 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. /* One-value sy..
::marker
::markerThe ::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..
margin-trim
margin-trimThe margin-trim property allows the container to trim the margins of its children where they adjoin the container's edges.Syntaxmargin-trim: none; margin-trim: in-flow; margin-trim: all; /..
margin-top
margin-topThe 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 n..
margin-right
margin-rightThe margin-right CSS property sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer. The vert..
margin-left
margin-leftThe margin-left CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer. The vertica..
margin-bottom
margin-bottomThe 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 ..
margin
marginThe margin CSS shorthand property sets the margin area on all four sides of an element.Constituent propertiesThis property is a shorthand for the following CSS properties: margin-bottom mar..
length#mm
<length>The <length> CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-sh..
local()
srcThe src CSS descriptor of the @font-face rule specifies the resource containing font data. It is required for the @font-face rule to be valid.Syntax/* <url> values */ src: url(https://someweb..
list-style-type
list-style-typeThe list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element. The color of the marker will be the same as the computed co..
list-style-position
list-style-positionThe list-style-position CSS property sets the position of the ::marker relative to a list item. It is often more convenient to use the shorthand list-style. Note: This property i..
list-style-image
list-style-imageThe list-style-image CSS property sets an image to be used as the list item marker. It is often more convenient to use the shorthand list-style. Note: This property is applied to li..
list-style
list-styleThe list-style CSS shorthand property allows you to set all the list style properties at once. Note: This property is applied to list items, i.e., elements with display: list-item; . By d..
line-height
line-heightThe line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line bo..
line-gap-override (@font-face)
line-gap-overrideThe line-gap-override CSS descriptor defines the line-gap metric for the font. The line-gap metric is the font recommended line-gap or external leading.Syntaxline-gap-override: normal..
line-break
line-breakThe line-break CSS property sets how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols. /* Keyword values */ line-break: auto; line-break: l..
<length>
<length>The <length> CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-sh..
@layer
@layerExperimental: This is an experimental technologyCheck the Browser compatibility table carefully before using this in production. The @layer CSS at-rule declares a cascade layer. Rules within a c..
justify-self
justify-selfThe 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 ..
justify-items
justify-itemsThe 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 th..
justify-content
justify-contentThe 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 a grid contai..
length#in
<length>The <length> CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-sh..
length#ic
<length>The <length> CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-sh..
:is
:is() (:matches(), :any()) Note: :matches() was renamed to :is() in CSSWG issue #3258. The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be..
:invalid
:invalidThe :invalid CSS pseudo-class represents any <input> or other <form> element whose contents fail to validate. /* Selects any invalid <input> */ input:invalid { background-c..
hyphenate-character
hyphenate-characterThe 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 ..
hsla()
<color> The <color> CSS data type represents a color. A <color> may also include an alpha-channel transparency value, indicating how the color should composite with its backgroun..
hsl()
<color> The <color> CSS data type represents a color. A <color> may also include an alpha-channel transparency value, indicating how the color should composite with its backgroun..
height (@viewport)
@viewportDeprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of bein..
grid-template-rows
grid-template-rowsThe grid-template-rows CSS property defines the line names and track sizing functions of the grid rows.Syntax/* Keyword value */ grid-template-rows: none; /* <track-list> valu..
grid-template-columns
grid-template-columnsThe grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.Syntax/* Keyword value */ grid-template-columns: none; /* <track-l..
grid-template-areas
grid-template-areasThe 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..
grid-template
grid-templateThe grid-template CSS property is a shorthand property for defining grid columns, rows, and areas.Constituent propertiesThis property is a shorthand for the following CSS properties: g..
grid-row-start
grid-row-startThe 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 specifyin..
grid-row-end
grid-row-endThe 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 ..
grid-row
grid-rowThe grid-row CSS shorthand property specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifyi..
grid-column-start
grid-column-startThe 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. This sta..
grid-column-end
grid-column-endThe 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 specif..
grid-column
grid-columnThe 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 s..
grid-auto-rows
grid-auto-rowsThe 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 g..
grid-auto-flow
grid-auto-flowThe grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.Syntax/* Keyword values */ grid-auto-fl..
grid-auto-columns
grid-auto-columnsThe 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 explicitl..
grid-area
grid-areaThe 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 t..
grid
gridThe 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-t..
gap
gap (grid-gap)The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.Syntax/* One <length> value */ gap: 20px; gap: 1em; gap: 3vmin; ..
:future
:futureThe :future CSS pseudo-class selector is a time-dimensional pseudo-class that will match for any element which appears entirely after an element that matches :current. For example in a video wi..
format()
srcThe src CSS descriptor of the @font-face rule specifies the resource containing font data. It is required for the @font-face rule to be valid.Syntax/* <url> values */ src: url(https://someweb..
font-weight (@font-face)
font-weightThe font-weight CSS descriptor allows authors to specify font weights for the fonts specified in the @font-face rule. The font-weight property can separately be used to set how thick or thi..
font-variation-settings (@font-face)
font-variation-settingsThe font-variation-settings CSS descriptor allows authors to specify low-level OpenType or TrueType font variations in the @font-face rule.Syntax/* Use the default settings */ f..
font-variant-position
font-variant-positionThe 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 bas..
font-variant-numeric
font-variant-numericThe font-variant-numeric CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.Syntaxfont-variant-numeric: normal; font-variant-numeric: o..
font-variant-ligatures
font-variant-ligaturesThe font-variant-ligatures CSS property controls which ligatures and contextual forms are used in textual content of the elements it applies to. This leads to more harmonized for..
font-variant-east-asian
font-variant-east-asianThe font-variant-east-asian CSS property controls the use of alternate glyphs for East Asian scripts, like Japanese and Chinese. font-variant-east-asian: normal; font-variant-ea..
font-variant-caps
font-variant-capsThe font-variant-caps CSS property controls the use of alternate glyphs for capital letters. When a given font includes capital letter glyphs of multiple different sizes, this propert..
font-variant-alternates
font-variant-alternatesThe 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. /..
font-variant (@font-face)
font-variantThe font-variant CSS shorthand property allows you to set all the font variants for the fonts specified in the @font-face rule.Constituent propertiesThis property is a shorthand for the fo..
font-style (@font-face)
font-styleThe font-style CSS descriptor allows authors to specify font styles for the fonts specified in the @font-face rule. For a particular font family, authors can download various font faces whic..
font-stretch (@font-face)
font-stretchThe font-stretch CSS descriptor allows authors to specify a normal, condensed, or expanded face for the fonts specified in the @font-face rule. For a particular font family, authors can do..
font-size
font-sizeThe 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.Syntax/* <a..
font-language-override
font-language-overrideThe font-language-override CSS property controls the use of language-specific glyphs in a typeface. /* Keyword value */ font-language-override: normal; /* <string> values ..
font-feature-settings
font-feature-settingsThe font-feature-settings CSS property controls advanced typographic features in OpenType fonts.Syntax/* Use the default settings */ font-feature-settings: normal; /* Set values ..
font-family (@font-face)
font-familyThe font-family CSS descriptor allows authors to specify the font family for the font specified in an @font-face rule.Syntax/* <string> values */ font-family: "font family"; font-fami..
@font-face
@font-faceThe @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.Synta..
font-display (@font-face)
font-displayThe font-display descriptor determines how a font face is displayed based on whether and when it is downloaded and ready to use.Syntax/* Keyword values */ font-display: auto; font-display:..
font
fontThe 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 va..
:focus-visible
:focus-visibleThe :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the UA (User Agent) determines via heuristics that the focus should be made evident on the el..
float
floatThe 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, ..
flex_value#fr
<flex>The <flex> CSS data type denotes a flexible length within a grid container. It is used in grid-template-columns, grid-template-rows and other related properties.SyntaxThe <flex>..
flex-wrap
flex-wrapThe 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. See Using CS..
flex-shrink
flex-shrinkThe 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, items shrink to fit according to flex-shrink. In us..
flex-grow
flex-growThe flex-grow CSS property sets the flex grow factor of a flex item's main size.Syntax/* <number> values */ flex-grow: 3; flex-grow: 0.6; /* Global values */ flex-grow: inherit; flex-g..
flex-direction
flex-directionThe 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-rever..
flex-basis
flex-basisThe 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. In this example the flex-grow and flex-shrink..
flex
flexThe flex CSS shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.Constituent propertiesThis property is a shorthand for the following CSS p..
<flex>
<flex>The <flex> CSS data type denotes a flexible length within a grid container. It is used in grid-template-columns, grid-template-rows and other related properties.SyntaxThe <flex>..
<filter-function>
<filter-function>The <filter-function> CSS data type represents a graphical effect that can change the appearance of an input image. It is used in the filter and backdrop-filter properties..
length#ex
<length>The <length> CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-sh..
length#em
<length>The <length> CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-sh..
env()
env()The env() CSS function can be used to insert the value of a user agent-defined environment variable into your CSS, in a similar fashion to the var() function and custom properties. The difference..
:empty
:emptyThe :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 d..
resolution#dppx
<resolution>The <resolution> CSS data type, used for describing resolutions in media queries, denotes the pixel density of an output device, i.e., its resolution. On screens, the units are..
resolution#dpi
<resolution>The <resolution> CSS data type, used for describing resolutions in media queries, denotes the pixel density of an output device, i.e., its resolution. On screens, the units are..
resolution#dpcm
<resolution>The <resolution> CSS data type, used for describing resolutions in media queries, denotes the pixel density of an output device, i.e., its resolution. On screens, the units are..
<display-outside>
<display-outside>The <display-outside> keywords specify the element's outer display type, which is essentially its role in flow layout. These keywords are used as values of the display pro..
<display-listitem>
<display-listitem>The list-item keyword causes the element to generate a ::marker pseudo-element with the content specified by its list-style properties (for example a bullet point) together wit..
<display-legacy>
<display-legacy>CSS 2 used a single-keyword syntax for the display property, requiring separate keywords for block-level and inline-level variants of the same layout mode. This page details thos..
<display-internal>
<display-internal>Some layout models such as table and ruby have a complex internal structure, with several different roles that their children and descendants can fill. This page defines those ..
<display-inside>
<display-inside>These keywords specify the element's inner display type, which defines the type of formatting context that lays out its contents (assuming it is a non-replaced element). These ke..
<display-box>
<display-box>These keywords define whether an element generates display boxes at all.SyntaxValid <display-box> values: contents These elements don't produce a specific box by the..
display
displayThe display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. Formally, the display property ..
direction
directionThe 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 writ..
descent-override (@font-face)
descent-overrideThe descent-override CSS descriptor defines the descent metric for the font. The descent metric is the height below the baseline that CSS uses to lay out line boxes in an inline format..
:defined
:definedThe :defined CSS pseudo-class represents any element that has been defined. This includes any standard element built in to the browser, and custom elements that have been successfully defined ..
length#cm
<length>The <length> CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-sh..
length#ch
<length>The <length> CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-sh..
length#cap
<length>The <length> CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-sh..
cursor
cursorThe 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 ..
:current
:currentThe :current CSS pseudo-class selector is a time-dimensional pseudo-class that represents the element, or an ancestor of the element, that is currently being displayed. For example in a video ..
cubic-bezier()
<easing-function>The <easing-function> CSS data type denotes a mathematical function that describes the rate at which a numerical value changes. This transition between two values may be a..
counters()
counters()The counters() CSS function enables nested counters, returning a concatenated string representing the current values of the named counters, if there are any. The counters() function has two ..
counter-reset
counter-reset The counter-reset CSS property resets a CSS counter to a given value. This property will create a new counter or reversed counter with the given name on the specified element. No..
<counter>
counter() The counter() CSS function returns a string representing the current value of the named counter, if there is one. It is generally used in the content property of pseudo-elements, but can..
content-visibility
content-visibilityThe 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 potential..
content
contentThe content CSS property replaces an element with a generated value. Objects inserted using the content property are anonymous replaced elements. /* Keywords that cannot be combined with other ..
contain
containThe contain CSS property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree. This allows the browser to recalcu..
column-gap
column-gap (grid-column-gap)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 b..
color-adjust
print-color-adjust The print-color-adjust CSS property sets what, if anything, the user agent may do to optimize the appearance of the element on the output device. By default, the browser is allo..
<color>
<color> The <color> CSS data type represents a color. A <color> may also include an alpha-channel transparency value, indicating how the color should composite with its backgroun..
clip-path
clip-pathThe 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.Syntax/* Key..
clip
clipThe clip CSS property defines a visible portion of an element. The clip property applies only to absolutely positioned elements — that is, elements with position:absolute or position:fixed. /* K..
clear
clearThe 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 n..
:checked
:checkedThe :checked CSS pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">), or option (<option> in a <select>) element that ..
character-variant()
font-variant-alternatesThe 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. /..
caret-color
caret-colorThe 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 curso..
calc()
calc()The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentag..
break-inside
break-insideThe 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. /* Keyword values */ brea..
border-style
border-styleThe border-style shorthand CSS property sets the line style for all four sides of an element's border.Constituent propertiesThis property is a shorthand for the following CSS properties: ..
border-image-source
border-image-sourceThe 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,..
border-image-slice
border-image-sliceThe 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. The slicing proce..
border-image
border-imageThe border-image CSS property draws an image around a given element. It replaces the element's regular border. Note: You should specify a separate border-style in case the border image ..
border-collapse
border-collapseThe 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 groove..
::before (:before)
::before (:before)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 inl..
background-repeat
background-repeatThe 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. By defau..
background-origin
background-originThe 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 backgroun..
background-image
background-imageThe 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 spe..
background-clip
background-clipThe background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box. If the element has no background-image or backgroun..
backface-visibility
backface-visibilityThe 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. Th..
backdrop-filter
backdrop-filterThe 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, ..
::backdrop
::backdropThe ::backdrop CSS pseudo-element is a box the size of the viewport which is rendered immediately beneath any element being presented in fullscreen mode. This includes both elements which ha..
ascent-override (@font-face)
ascent-overrideThe ascent-override CSS descriptor defines the ascent metric for the font. The ascent metric is the height above the baseline that CSS uses to lay out line boxes in an inline formatting..
appearance
appearance (-moz-appearance, -webkit-appearance)The appearance CSS property is used to display an element using platform-native styling, based on the operating system's theme. The -moz-appearance and ..
annotation()
font-variant-alternatesThe 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. /..
animation-timing-function
animation-timing-functionThe animation-timing-function CSS property sets how an animation progresses through the duration of each cycle. It is often convenient to use the shorthand property animation ..
animation-fill-mode
animation-fill-modeThe animation-fill-mode CSS property sets how a CSS animation applies styles to its target before and after its execution. It is often convenient to use the shorthand property anima..
align-self
align-selfThe align-self CSS property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis. The propert..
align-items
align-itemsThe 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 a..
align-content
align-contentThe CSS align-content property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. The interactive example below use Grid ..
accent-color
accent-colorThe 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 elem..
-webkit-line-clamp
-webkit-line-clampThe -webkit-line-clamp CSS property allows limiting of the contents of a block container to the specified number of lines. It only works in combination with the display property set ..
