Search
Search CSS
word-break
word-breakThe word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.Syntax/* Keyword values */ word-break: normal; word-break: break-all; w..
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..
:where
:where()The :where() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. /* Selects any paragraph inside..
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..
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..
translate
translateThe translate CSS property allows you to specify translation transforms individually and independently of the transform property. This maps better to typical user interface usage, and saves h..
transition-property
transition-propertyThe transition-property CSS property sets the CSS properties to which a transition effect should be applied. Note: The set of properties that can be animated is subject to change..
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: ..
transition
transitionThe transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. Transitions enable you to define the trans..
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-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..
text-underline-position
text-underline-positionThe text-underline-position CSS property specifies the position of the underline which is set using the text-decoration property's underline value.Syntax/* Single keyword */ tex..
text-rendering
text-renderingThe text-rendering CSS property provides information to the rendering engine about what to optimize for when rendering text. The browser makes trade-offs among speed, legibility, and geo..
text-justify
text-justifyThe text-justify CSS property sets what type of justification should be applied to text when text-align: justify; is set on an element.Syntaxtext-justify: none; text-justify: auto; text-ju..
text-decoration-skip-ink
text-decoration-skip-inkThe text-decoration-skip-ink CSS property specifies how overlines and underlines are drawn when they pass over glyph ascenders and descenders. text-decoration-skip-ink is not p..
text-decoration-skip
text-decoration-skipThe text-decoration-skip CSS property sets what parts of an element's content any text decoration affecting the element must skip over. It controls all text decoration lines drawn ..
text-align-last
text-align-lastThe text-align-last CSS property sets how the last line of a block or a line, right before a forced line break, is aligned.Syntax/* Keyword values */ text-align-last: auto; text-align-l..
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. /..
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. /..
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..
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 ..
scale
scaleThe scale CSS property allows you to specify scale transforms individually and independently of the transform property. This maps better to typical user interface usage, and saves having to remem..
rotate
rotateThe rotate CSS property allows you to specify rotation transforms individually and independently of the transform property. This maps better to typical user interface usage, and saves having to ..
: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-..
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
::placeholderThe ::placeholder CSS pseudo-element represents the placeholder text in an <input> or <textarea> element. ::placeholder { color: blue; font-size: 1.5em; } Only the subset..
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..
paint-order
paint-orderThe paint-order CSS property lets you control the order in which the fill and stroke (and painting markers) of text content and shapes are drawn.Syntax/* Normal */ paint-order: normal; /* ..
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..
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..
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. /..
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% ..
object-fit
object-fitThe object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container. You can alter the alignment of the re..
@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()
max()The max() CSS function lets you set the largest (most positive) value from a list of comma-separated expressions as the value of a CSS property value. The max() function can be used anywhere a &l..
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..
::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..
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..
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-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..
line-height-step
line-height-stepExperimental: This is an experimental technologyCheck the Browser compatibility table carefully before using this in production. The line-height-step CSS property sets the step unit fo..
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..
<length-percentage>
<length-percentage>The <length-percentage> CSS data type represents a value that can be either a <length> or a <percentage>.SyntaxRefer to the documentation for <length> ..
<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..
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..
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-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-size-adjust
font-size-adjustThe font-size-adjust CSS property sets the size of lower-case letters relative to the current font size (which defines the size of upper-case letters). /* Use the specified font size *..
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-optical-sizing
font-optical-sizingThe font-optical-sizing CSS property sets whether text rendering is optimized for viewing at different sizes.Syntax/* keyword values */ font-optical-sizing: none; font-optical-sizin..
font-kerning
font-kerningThe font-kerning CSS property sets the use of the kerning information stored in a font. Kerning defines how letters are spaced. In well-kerned fonts, this feature makes character spacing m..
font-family
font-familyThe font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element. Values are separated by commas to indicate t..
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..
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..
::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 ..
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..
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..
::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..
clamp()
clamp()The clamp() CSS function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. It takes three..
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. /..
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..
break-before
break-beforeThe break-before CSS property sets how page, column, or region breaks should behave before a generated box. If there is no generated box, the property is ignored. /* Generic break values *..
break-after
break-afterThe break-after CSS property sets how page, column, or region breaks should behave after a generated box. If there is no generated box, the property is ignored. /* Generic break values */ b..
bottom
bottomThe bottom CSS property participates in setting the vertical position of a positioned element. It has no effect on non-positioned elements. The effect of bottom depends on how the element is pos..
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..
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..
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-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..
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 ..
