Search
Search CSS
writing-mode
writing-modeThe writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. When set for an entire document, it sho..
width
widthThe width CSS property sets an element's width. By default, it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area. The min-width and ..
widows
widowsThe widows CSS property sets the minimum number of lines in a block container that must be shown at the top of a page, region, or column. /* <integer> values */ widows: 2; widows: 3; /* G..
white-space
white-spaceThe white-space CSS property sets how white space inside an element is handled. The property specifies two things: Whether and how white space is collapsed. Whether lines may wrap at s..
:visited
:visitedThe :visited CSS pseudo-class represents links that the user has already visited. For privacy reasons, the styles that can be modified using this selector are very limited. /* Selects any <..
var()
var()The var() CSS function can be used to insert the value of a custom property (sometimes called a "CSS variable") instead of any part of a value of another property. The var() function cannot be us..
:valid
:validThe :valid CSS pseudo-class represents any <input> or other <form> element whose contents validate successfully. This allows to easily make valid fields adopt an appearance that help..
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..
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..
translateY()
translateY() The translateY() CSS function repositions an element vertically on the 2D plane. Its result is a <transform-function> data type. Note: translateY(ty) is equivalent..
translateX()
translateX() The translateX() CSS function repositions an element horizontally on the 2D plane. Its result is a <transform-function> data type. Note: translateX(tx) is equivale..
translate3d()
translate3d() The translate3d() CSS function repositions an element in 3D space. Its result is a <transform-function> data type. This transformation is characterized by a three-dimension..
translate()
translate() The translate() CSS function repositions an element in the horizontal and/or vertical directions. Its result is a <transform-function> data type. This transformation is ..
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-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..
<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-emphasis-color
text-emphasis-colorThe text-emphasis-color CSS property sets the color of emphasis marks. This value can also be set using the text-emphasis shorthand. /* Initial value */ text-emphasis-color: current..
text-decoration-color
text-decoration-colorThe text-decoration-color CSS property sets the color of decorations added to text by text-decoration-line. The color applies to decorations, such as underlines, overlines, strike..
:target-within
:target-withinExperimental: This is an experimental technologyCheck the Browser compatibility table carefully before using this in production. The :target-within CSS pseudo-class represents an element..
::target-text
::target-textExperimental: This is an experimental technologyCheck the Browser compatibility table carefully before using this in production. The ::target-text CSS pseudo-element represents the text t..
: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..
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..
::spelling-error
::spelling-errorExperimental: This is an experimental technologyCheck the Browser compatibility table carefully before using this in production. The ::spelling-error CSS pseudo-element represents a te..
skewY()
skewY() The skewY() CSS function defines a transformation that skews an element in the vertical direction on the 2D plane. Its result is a <transform-function> data type. This transforma..
skewX()
skewX() The skewX() CSS function defines a transformation that skews an element in the horizontal direction on the 2D plane. Its result is a <transform-function> data type. This transfor..
skew()
skew() The skew() CSS function defines a transformation that skews an element on the 2D plane. Its result is a <transform-function> data type. This transformation is a shear mapping (tra..
shape-outside
shape-outsideThe shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; s..
shape-margin
shape-marginThe shape-margin CSS property sets a margin for a CSS shape created using shape-outside. The margin lets you adjust the distance between the edges of the shape (the float element) and the ..
::selection
::selectionThe ::selection CSS pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text). ::selection { back..
@scroll-timeline
@scroll-timelineThe @scroll-timeline CSS at-rule defines an AnimationTimeline whose time values are determined by scrolling progress within a scroll container and not by minutes or seconds. Once speci..
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..
:scope
:scopeThe :scope CSS pseudo-class represents elements that are a reference point for selectors to match against. /* Selects a scoped element */ :scope { background-color: lime; } Currently, when us..
scaleZ()
scaleZ() The scaleZ() CSS function defines a transformation that resizes an element along the z-axis. Its result is a <transform-function> data type. This scaling transformation modifies..
scaleY()
scaleY() The scaleY() CSS function defines a transformation that resizes an element along the y-axis (vertically). Its result is a <transform-function> data type. It modifies the or..
scaleX()
scaleX() The scaleX() CSS function defines a transformation that resizes an element along the x-axis (horizontally). Its result is a <transform-function> data type. It modifies the ..
scale3d()
scale3d() The scale3d() CSS function defines a transformation that resizes an element in 3D space. Because the amount of scaling is defined by a vector, it can resize different dimensions at diffe..
scale()
scale() The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical d..
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: ..
rotateZ()
rotateZ() The rotateZ() CSS function defines a transformation that rotates an element around the z-axis without deforming it. Its result is a <transform-function> data type. The axis of rot..
rotateY()
rotateY() The rotateY() CSS function defines a transformation that rotates an element around the ordinate (vertical axis) without deforming it. Its result is a <transform-function> data type..
rotateX()
rotateX() The rotateX() CSS function defines a transformation that rotates an element around the abscissa (horizontal axis) without deforming it. Its result is a <transform-function> data ty..
rotate3d()
rotate3d() The rotate3d() CSS function defines a transformation that rotates an element around a fixed axis in 3D space, without deforming it. Its result is a <transform-function> data type...
rotate()
rotate() The rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. Its result is a <transform-function> data ty..
right
rightThe right CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.Syntax/* <length> values */ right: 3px; right:..
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..
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..
repeating-linear-gradient()
repeating-linear-gradient()The repeating-linear-gradient() CSS function creates an image consisting of repeating linear gradients. It is similar to linear-gradient() and takes the same arguments, but ..
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..
:read-write
:read-writeThe :read-write CSS pseudo-class represents an element (such as input or textarea) that is editable by the user. input:read-write, textarea:read-write { background-color: #bbf; } p:read-..
:read-only
:read-onlyThe :read-only CSS pseudo-class represents an element (such as input or textarea) that is not editable by the user. input:read-only, textarea:read-only { background-color: #ccc; } p:read-..
radial-gradient()
radial-gradient()The radial-gradient() CSS function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an elli..
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..
: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..
perspective()
perspective() The perspective() CSS function defines a transformation that sets the distance between the user and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional..
<percentage>
<percentage>The <percentage> CSS data type represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentag..
::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..
padding-inline-start
padding-inline-startThe 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, directionali..
padding-inline-end
padding-inline-endThe 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, an..
padding-inline
padding-inlineThe 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 mod..
padding-block-start
padding-block-startThe 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,..
padding-block-end
padding-block-endThe 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 t..
padding-block
padding-blockThe 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, ..
padding
paddingThe 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. Note: Padding cre..
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..
overscroll-behavior-inline
overscroll-behavior-inlineThe overscroll-behavior-inline CSS property sets the browser's behavior when the inline direction boundary of a scrolling area is reached. See overscroll-behavior for a full ..
overscroll-behavior-block
overscroll-behavior-blockThe overscroll-behavior-block CSS property sets the browser's behavior when the block direction boundary of a scrolling area is reached. See overscroll-behavior for a full exp..
outline-color
outline-colorThe outline-color CSS property sets the color of an element's outline.Syntax/* <color> values */ outline-color: #f92525; outline-color: rgb(30,222,121); outline-color: blue; /* Key..
:out-of-range
:out-of-rangeThe :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. /* Selects any <input>..
orphans
orphansThe 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. /* <integer> values */ orphans: 2; orphans: 3..
opacity
opacityThe 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.Syntaxopacity: 0.9 opacity: 90% ..
:only-of-type
:only-of-typeThe :only-of-type CSS pseudo-class represents an element that has no siblings of the same type. /* Selects each <p>, but only if it is the */ /* only <p> element inside its pa..
: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..
offset
offsetThe offset CSS shorthand property sets all the properties required for animating an element along a defined path. Note: Early versions of the spec called this property motion. Constituent pro..
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-last-of-type
:nth-last-of-type()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. /* Selects every fourth <p>..
:nth-last-col
:nth-last-colExperimental: This is an experimental technologyCheck the Browser compatibility table carefully before using this in production. The :nth-last-col() CSS pseudo-class is designed for table..
:nth-last-child
:nth-last-child()The :nth-last-child() CSS pseudo-class matches elements based on their position among a group of siblings, counting from the end. /* Selects every fourth element among any group of..
:nth-col
:nth-colExperimental: This is an experimental technologyCheck the Browser compatibility table carefully before using this in production. The :nth-col() CSS pseudo-class is designed for tables and grid..
: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-inline-size
min-inline-sizeThe 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-..
min-block-size
min-block-sizeThe 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-he..
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 &..
max-inline-size
max-inline-sizeThe 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-..
max-block-size
max-block-sizeThe 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 dir..
matrix()
matrix() The matrix() CSS function defines a homogeneous 2D transformation matrix. Its result is a <transform-function> data type. Note: matrix(a, b, c, d, tx, ty) is a shorthand fo..
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-type
mask-typeThe 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. /* Keyword values */ mask-type: lum..
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-inline-start
margin-inline-startThe 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, ..
margin-inline-end
margin-inline-endThe 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 te..
margin-inline
margin-inlineThe margin-inline CSS shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the ..
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-block-start
margin-block-startThe 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..
margin-block-end
margin-block-endThe 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 ..
margin-block
margin-blockThe 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, directionalit..
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..
:link
:linkThe :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. /* Selects any <a> t..
linear-gradient()
linear-gradient()The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradien..
<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..
left
leftThe left CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.Syntax/* <length> values */ left: 3px; left: 2.4..
:last-of-type
:last-of-typeThe :last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements. /* Selects any <p> that is the last element of its type among its si..
:last-child
:last-childThe :last-child CSS pseudo-class represents the last element among a group of sibling elements. /* Selects any <p> that is the last element among its siblings */ p:last-child { 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..
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..
isolation
isolationThe 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.Synta..
: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..
inset-inline-start
inset-inline-startThe inset-inline-start CSS property defines the logical inline start inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and..
inset-inline-end
inset-inline-endThe inset-inline-end CSS property defines the logical inline end inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text ..
inset-inline
inset-inlineThe 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, direc..
inset-block-start
inset-block-startThe 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 te..
inset-block-end
inset-block-endThe 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 ori..
inset-block
inset-blockThe 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 ..
inset
insetThe 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. While part of the CSS Logical..
inline-size
inline-sizeThe 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, dependi..
:in-range
:in-rangeThe :in-range CSS pseudo-class represents an <input> element whose current value is within the range limits specified by the min and max attributes. /* Selects any <input>, but on..
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..
:hover
:hoverThe :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 e..
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..
::grammar-error
::grammar-errorExperimental: This is an experimental technologyCheck the Browser compatibility table carefully before using this in production. The ::grammar-error CSS pseudo-element represents a text..
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; ..
:fullscreen
:fullscreenThe :fullscreen CSS pseudo-class matches every element which is currently in fullscreen mode. If multiple elements have been put into fullscreen mode, this selects them all.Syntax:fullscree..
forced-color-adjust
forced-color-adjustThe 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.Syntaxforced-color-adjus..
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
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..
fit-content()
fit-contentThe fit-content behaves as fit-content(stretch). In practice this means that the box will use the available space, but never more than max-content. When used as laid out box size for width,..
:first-of-type
:first-of-typeThe :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements. /* Selects any <p> that is the first element of its type among it..
::first-line (:first-line)
::first-line (:first-line)The ::first-line CSS pseudo-element applies styles to the first line of a block-level element. /* Selects the first line of a <p> */ p::first-line { color: red; } Th..
::first-letter (:first-letter)
::first-letter (:first-letter)The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as ..
:first-child
:first-childThe :first-child CSS pseudo-class represents the first element among a group of sibling elements. /* Selects any <p> that is the first element among its siblings */ p:first-child ..
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..
<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
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 ..
:dir
:dir()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; } ..
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..
: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 ..
::cue-region
::cue-regionExperimental: This is an experimental technologyCheck the Browser compatibility table carefully before using this in production. The ::cue-region CSS pseudo-element matches WebVTT cues wit..
::cue
::cueThe ::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. ::cue { color: yellow; font-weight: bol..
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..
conic-gradient()
conic-gradient()The conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example conic ..
column-rule-color
column-rule-colorThe column-rule-color CSS property sets the color of the line drawn between columns in a multi-column layout.Syntax/* <color> values */ column-rule-color: red; column-rule-color..
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-scheme
color-schemeThe color-scheme CSS property allows an element to indicate which color schemes it can comfortably be rendered in. Common choices for operating system color schemes are "light" and "dark",..
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
colorThe 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 p..
<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..
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 ..
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..
box-shadow
box-shadowThe 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 elem..
border-top-style
border-top-styleThe border-top-style CSS property sets the line style of an element's top border. Note: The specification doesn't define how borders of different styles connect in the corners. Synt..
border-top-right-radius
border-top-right-radiusThe 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 ..
border-top-left-radius
border-top-left-radiusThe 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 def..
border-top
border-topThe border-top shorthand CSS property sets all the properties of an element's top border. As with all shorthand properties, border-top always sets the values of all of the properties that it..
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-start-start-radius
border-start-start-radiusThe 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, di..
border-start-end-radius
border-start-end-radiusThe border-start-end-radius CSS property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction..
border-right-style
border-right-styleThe border-right-style CSS property sets the line style of an element's right border. Note: The specification doesn't define how borders of different styles connect in the corners..
border-right
border-rightThe border-right shorthand CSS property sets all the properties of an element's right border. As with all shorthand properties, border-right always sets the values of all of the properties..
border-left-style
border-left-styleThe border-left-style CSS property sets the line style of an element's left border. Note: The specification doesn't define how borders of different styles connect in the corners. S..
border-left
border-leftThe border-left shorthand CSS property sets all the properties of an element's left border. As with all shorthand properties, border-left always sets the values of all of the properties tha..
border-inline-width
border-inline-widthThe border-inline-width CSS property defines the width of the logical inline borders of an element, which maps to a physical border width depending on the element's writing mode, di..
border-inline-style
border-inline-styleThe border-inline-style CSS property defines the style of the logical inline borders of an element, which maps to a physical border style depending on the element's writing mode, di..
border-inline-start-width
border-inline-start-widthThe border-inline-start-width CSS property defines the width of the logical inline-start border of an element, which maps to a physical border width depending on the element's..
border-inline-start-style
border-inline-start-styleThe border-inline-start-style CSS property defines the style of the logical inline start border of an element, which maps to a physical border style depending on the element's..
border-inline-start-color
border-inline-start-colorThe 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..
border-inline-start
border-inline-startThe 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.Constituent ..
border-inline-end-width
border-inline-end-widthThe border-inline-end-width CSS property defines the width of the logical inline-end border of an element, which maps to a physical border width depending on the element's writi..
border-inline-end-style
border-inline-end-styleThe border-inline-end-style CSS property defines the style of the logical inline end border of an element, which maps to a physical border style depending on the element's writi..
border-inline-end-color
border-inline-end-colorThe 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 writi..
border-inline-end
border-inline-endThe 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.Constituent proper..
border-inline-color
border-inline-colorThe border-inline-color CSS 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, di..
border-inline
border-inlineThe 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-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-end-start-radius
border-end-start-radiusThe border-end-start-radius CSS property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction..
border-end-end-radius
border-end-end-radiusThe 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,..
border-color
border-colorThe 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..
border-bottom-style
border-bottom-styleThe border-bottom-style CSS property sets the line style of an element's bottom border. Note: The specification doesn't define how borders of different styles connect in the corn..
border-bottom-right-radius
border-bottom-right-radiusThe 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..
border-bottom-left-radius
border-bottom-left-radiusThe 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 el..
border-bottom
border-bottomThe 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. As with all shorthand pro..
border-block-width
border-block-widthThe border-block-width CSS property defines the width of the logical block borders of an element, which maps to a physical border width depending on the element's writing mode, direc..
border-block-style
border-block-styleThe border-block-style CSS property defines the style of the logical block borders of an element, which maps to a physical border style depending on the element's writing mode, direc..
border-block-start-width
border-block-start-widthThe border-block-start-width CSS property defines the width of the logical block-start border of an element, which maps to a physical border width depending on the element's wr..
border-block-start-style
border-block-start-styleThe border-block-start-style CSS property defines the style of the logical block start border of an element, which maps to a physical border style depending on the element's wr..
border-block-start-color
border-block-start-colorThe 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 wr..
border-block-start
border-block-startThe 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.Constituent pro..
border-block-end-width
border-block-end-widthThe border-block-end-width CSS property defines the width of the logical block-end border of an element, which maps to a physical border width depending on the element's writing ..
border-block-end-style
border-block-end-styleThe border-block-end-style CSS property defines the style of the logical block-end border of an element, which maps to a physical border style depending on the element's writing ..
border-block-end-color
border-block-end-colorThe 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 ..
border-block-end
border-block-endThe 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.Constituent propertie..
border-block-color
border-block-colorThe 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, direc..
border-block
border-blockThe 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 ..
block-size
block-sizeThe 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..
::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-size
background-size 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. ..
background-position-y
background-position-yThe 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 v..
background-position-x
background-position-xThe 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..
background-position
background-positionThe background-position CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin.Syntax/* Keyword va..
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-color
background-colorThe background-color CSS property sets the background color of an element.Syntax/* Keyword values */ background-color: red; background-color: indigo; /* Hexadecimal value */ backgroun..
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..
background
backgroundThe background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.Constituent propertiesThis property is a shorthand..
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..
attr()
attr() Note: The attr() function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse. The attr() C..
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-play-state
animation-play-stateThe animation-play-state CSS property sets whether an animation is running or paused. Resuming a paused animation will start the animation from where it left off at the time it was..
animation-name
animation-nameThe animation-name CSS property specifies the names of one or more @keyframes at-rules describing the animation or animations to apply to the element. It is often convenient to use the s..
animation-iteration-count
animation-iteration-countThe animation-iteration-count CSS property sets the number of times an animation sequence should be played before stopping. If multiple values are specified, each time the ani..
animation-duration
animation-durationThe animation-duration CSS property sets the length of time that an animation takes to complete one cycle. It is often convenient to use the shorthand property animation to set all a..
animation-direction
animation-directionThe animation-direction CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward. It is of..
animation-delay
animation-delayThe 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,..
animation
animationThe animation shorthand CSS property applies an animation between styles. It is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-itera..
all
allThe 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..
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 ..
::after (:after)
::after (:after)In CSS, ::after 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 ..
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..
--*
Custom properties (--*): CSS variablesProperty names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the v..
