Quick reference

CSS reference

Selectors, layout, type, colour and motion with examples that run in the page.

CSS turns structure into an interface. Start from normal flow, prefer layout primitives such as flexbox and grid over positioning, and name variables by their role rather than their value. Every example below targets a .demo element so you can run it immediately.

Read the full explanationCSS Essentials

Work through the guided lesson, then test yourself with a challenge.

At-rules

@charset

@charset "UTF-8";

Declares the stylesheet encoding. It must be the very first bytes of the file; UTF-8 is the default.

@color-profile

@color-profile --name { … }

Declares a color profile for color() values.

@counter-style

@counter-style name { … }

Defines a custom list marker style.

@font-feature-values

@font-feature-values family { … }

Defines named font feature values that can be reused.

@media range syntax

@media (width >= 40rem)

Range syntax compares viewport features without min-width/max-width pairs.

@namespace

@namespace svg url(…);

Declares a namespace prefix for XML-based selectors such as SVG.

@page

@page { … }

Styles printed pages, including size and margins.

@property

@property --name { … }

Declares a typed custom property with a syntax, inheritance rule and initial value.

@scope (at-rule)

@scope (.card) to (.card footer) { … }

Scopes rules to a subtree and optionally stops at a boundary.

@starting-style

@starting-style { … }

Defines the initial style for an element entering the document, enabling entry transitions.

@supports selector()

@supports selector(:has(a))

Tests support for a selector rather than a declaration.

@view-transition

@view-transition { navigation: auto; }

Opts a document into cross-document view transitions.

At-rules, values and responsive design

@container

@container (min-width: 20rem) { … }

Styles children based on the size of their container rather than the viewport.

@font-face

@font-face { … }

Declares a custom font and its source files, weight range and display behaviour.

@import

@import url("theme.css");

Loads another stylesheet. It must come before every other rule except @charset and @layer.

@layer

@layer base, components, utilities;

Orders cascade layers. Later layers win regardless of selector specificity.

@media query

@media (min-width: 40rem) { … }

Applies rules when a media condition matches: width, pointer type, colour scheme or reduced motion.

@supports

@supports (display: grid) { … }

Applies rules only when the browser supports a declaration.

calc()

calc(100% - 2rem)

Performs maths across units. Operators need spaces around them.

clamp()

clamp(1rem, 2.5vw, 2rem)

Clamps a value between a minimum and a maximum. Perfect for fluid type and spacing.

Color functions

rgb() / hsl() / oklch()

Create colours with channels, alpha or perceptual lightness. oklch() makes consistent palettes easier.

container-type

container-type: inline-size

Establishes a query container so descendants can respond with @container.

Custom property

--brand: #2f74c0

Defines a reusable value. Custom properties inherit and can be changed at runtime.

Logical properties

margin-inline, padding-block

Properties that follow writing direction instead of physical left and right.

min() / max()

min(80vw, 40rem)

Returns the smaller or larger of the supplied values, useful for responsive caps.

var()

var(--brand, #2f74c0)

Reads a custom property with an optional fallback.

Colour and backgrounds

accent-color

accent-color: #2f74c0

Tints native form controls such as checkboxes and progress bars.

background-clip

background-clip: text

Limits the background to the content box or to the text glyphs.

background-color

background-color: #fff3ef

Paints the box background behind content and padding.

background-image

background-image: linear-gradient(…), url(…)

Paints one or more images or gradients behind content. Layers are comma-separated.

background-position

background-position: center

Places the background image inside the box.

background-repeat

background-repeat: no-repeat

Controls tiling of background images.

background-size

background-size: cover

Scales a background image: auto, cover, contain or explicit sizes.

color

color: #17130f

Sets the text colour. Check contrast against the background, not against white.

currentColor

border-color: currentColor

A keyword that resolves to the element’s current text colour.

filter

filter: blur(2px) brightness(1.1)

Applies graphical effects such as blur, brightness, contrast and grayscale.

mix-blend-mode

mix-blend-mode: multiply

Blends an element with what is behind it.

opacity

Makes an element and all of its children partially transparent. For colours only, use rgb() with alpha.

Functions and values

attr()

Reads an attribute value. Content support is broad; use with a fallback when needed.

blur()

Applies a Gaussian blur as a filter.

brightness() / contrast()

brightness(amount)

Adjusts the brightness or contrast of an element.

circle() / ellipse()

circle(radius at position)

Defines a circular or elliptical shape for clip-path and shape-outside.

color-mix()

color-mix(in srgb, a 40%, b)

Mixes two colours in a chosen colour space.

color() function

color(display-p3 1 0 0)

Selects a colour in a specific colour space such as display-p3.

conic-gradient()

conic-gradient(from angle, stops)

A gradient that sweeps around a centre, ideal for charts and pie shapes.

counter() / counters()

counter(name, style)

Reads a CSS counter for generated numbering.

cubic-bezier()

cubic-bezier(x1, y1, x2, y2)

Defines a custom timing curve for transitions and animations.

drop-shadow()

drop-shadow(x y blur color)

Adds a shadow that follows the shape of the element, including transparency.

env()

env(safe-area-inset-top)

Reads device environment values such as safe-area insets.

fit-content()

fit-content(limit)

A track that sizes to its content up to a limit.

grayscale() / sepia()

Removes colour or applies a warm sepia tone.

hex colour

Six-digit hex for opaque colours, or eight digits for alpha.

hsl()

hsl(210 60% 50%)

Colours by hue, saturation and lightness, which is easier to tweak by hand.

hue-rotate()

hue-rotate(angle)

Shifts hues, handy for recolouring simple graphics.

hwb()

hwb(210 20% 10%)

Colours by hue, whiteness and blackness.

inset() function

inset(top right bottom left round radius)

Defines a rectangular inset shape for clipping.

invert()

Inverts colours. Useful for dark-mode image treatment.

lab() / lch()

lch(60% 50 250)

Perceptually uniform colour spaces based on CIELAB.

light-dark()

light-dark(light, dark)

Chooses a colour based on the user’s colour scheme.

linear-gradient()

linear-gradient(direction, stops)

A gradient along a straight line. Supports hard stops and colour hints.

matrix() / matrix3d()

matrix(a, b, c, d, e, f)

The compact mathematical form of a transform.

minmax()

minmax(min, max)

Defines a grid track that can grow between a minimum and a maximum.

oklab() / oklch()

oklch(0.62 0.16 250)

Perceptually uniform colour spaces designed for modern displays and palettes.

path()

path("M … Z")

Uses SVG path data as a clipping or motion shape.

perspective() function

perspective(distance)

Adds depth to a 3D transform applied to the same element.

polygon()

polygon(x y, x y, …)

Defines an arbitrary polygon for clip-path.

radial-gradient()

radial-gradient(shape, stops)

A gradient that radiates from a centre point.

repeat()

repeat(count, tracks)

Repeats a grid track list, optionally auto-fitting to the container.

repeating-linear-gradient()

repeating-linear-gradient(...)

Repeats a linear gradient, great for stripes and patterns.

rgb() / rgba()

rgb(47 116 192 / 0.8)

Colours with red, green, blue channels and optional alpha.

rotate() function

rotate(angle)

Rotates an element around its transform origin.

saturate()

saturate(amount)

Changes colour saturation.

scale() function

Scales an element around its transform origin.

steps()

steps(count, jump-term)

A stepped timing function, perfect for sprite frames and mechanical motion.

translate() function

translate(x, y)

Moves an element without affecting layout. Part of the transform functions.

transparent

A fully transparent colour, equivalent to rgb(0 0 0 / 0).

url()

References an external resource such as an image or font.

Interaction and accessibility

Colour scheme

color-scheme: dark

Tells the browser which native control colours to use, such as scrollbars and form fields.

cursor

cursor: pointer

Changes the pointer shape. Use it on interactive elements, and not-allowed on disabled controls.

Filter on focus

outline via :focus-visible

Visible focus is an accessibility requirement. Never set outline: none without a replacement.

Forced colours

@media (forced-colors: active)

Adjusts styles when the operating system forces high-contrast colours.

pointer-events

pointer-events: none

Makes an element ignore pointer input. Not a substitute for disabling a button.

Scroll behaviour

scroll-behavior: smooth

Makes in-page scrolling animate. Pair it with reduced-motion media queries.

Layout

align-content

align-content: flex-start

Aligns wrapped lines on the cross axis when there is extra space.

align-items

align-items: center

Aligns items on the cross axis of a flex container.

align-self

align-self: flex-end

Overrides align-items for a single flex item.

clear

Prevents an element from sitting beside a floated element.

display

display: block | flex | grid | none

Selects the layout model for an element and its children. display:none removes it from layout and accessibility.

flex

display: flex

Lays children out in one dimension and distributes free space along the main axis.

flex-basis

flex-basis: 12rem

The starting size of a flex item before growth or shrinking.

flex-direction

flex-direction: row | column

Sets the main axis: row, row-reverse, column or column-reverse.

flex-grow

How much a flex item grows when there is free space.

flex-shrink

flex-shrink: 0

Whether a flex item may shrink when space is tight. Prevent shrinking on icons and buttons.

flex-wrap

flex-wrap: wrap

Allows items to move onto new lines instead of shrinking forever.

float

Pushes an element to one side and lets text wrap. Modern layout should use flexbox or grid.

gap

Space between grid or flex items. Removes the need for margin hacks.

grid

display: grid

Two-dimensional layout with explicit rows and columns.

grid-column

grid-column: 1 / -1

Places an item across columns. Negative line numbers count from the end.

grid-row

grid-row: span 2

Places an item across rows.

grid-template-areas

grid-template-areas: "a b"

Names grid regions so children can be placed by area.

grid-template-columns

grid-template-columns: repeat(3, 1fr)

Defines the column track list. repeat(auto-fit, minmax(12rem, 1fr)) is a responsive default.

grid-template-rows

grid-template-rows: auto 1fr

Defines the row track list.

Inset

Shorthand for top, right, bottom and left. inset:0 stretches an absolutely positioned element.

justify-content

justify-content: space-between

Distributes items along the main axis.

order

Changes visual order without changing DOM order. Do not reorder focusable content unpredictably.

place-content

place-content: center

Shorthand for align-content and justify-content.

place-items

place-items: center

Shorthand for align-items and justify-items in grid or flex.

position

position: relative | absolute | fixed | sticky

Removes an element from normal flow in all modes except relative and sticky.

z-index

Orders positioned or flex/grid items on the stacking axis. It only works where stacking applies.

More selectors

::backdrop

Styles the backdrop behind a modal dialog or a fullscreen element.

::file-selector-button

::file-selector-button

Styles the button inside a file input.

::first-letter

::first-letter

Styles the first letter for drop caps and editorial treatment.

::first-line

Styles the first line of a block. The exact text can change with the viewport.

::marker

Styles list markers and summary markers.

::part()

Styles a named part exposed by a web component.

::slotted()

::slotted(selector)

Styles light-DOM content projected into a slot from inside a shadow tree.

::target-text

::target-text

Styles the text highlighted by a URL text fragment.

:autofill

Matches fields the browser has autofilled. Style it carefully because browser defaults are strong.

:default

Matches the default option or the default submit button of a form.

:dir()

Matches elements by text direction, including inherited direction.

:first-of-type / :last-of-type

:first-of-type

Matches by position among siblings of the same tag.

:in-range / :out-of-range

Matches number and date inputs whose value is inside or outside the min and max.

:lang()

Matches elements in a given language, including inherited language.

:nth-last-child()

:nth-last-child(2)

Counts from the end of the sibling list.

:nth-last-of-type()

:nth-last-of-type(1)

Counts from the end among siblings of the same tag.

:only-child

Matches an element that is the only child of its parent.

:only-of-type

:only-of-type

Matches an element that is the only sibling of its type.

:placeholder-shown

:placeholder-shown

Matches an input or textarea while its placeholder is visible, which means it is empty.

:read-only / :read-write

Matches elements whose content can be edited.

:required / :optional

Matches form controls based on the required attribute.

:root

Matches the document root, usually html. The standard place to declare design tokens.

:scope

Matches the element a selector is scoped to. Useful inside components and querySelector calls.

:target

Matches the element whose id is in the URL fragment.

:user-invalid

:user-invalid

Matches a field after the user has interacted and the value is invalid. Better than :invalid for UX.

Attribute operators

[href^="https"]

Attribute selectors support =, ~=, |=, ^=, $= and *=.

Selector list

Applies one rule to several selectors. A single invalid selector invalidates the whole list unless :is() is used.

Motion and transforms

@keyframes

@keyframes name { … }

Defines the intermediate steps of an animation.

animation

animation: name 1s ease infinite

Shorthand for animating keyframes: name, duration, timing, delay, iteration and direction.

animation-duration

animation-duration: 300ms

How long one animation cycle lasts.

animation-iteration-count

animation-iteration-count: infinite

How many times the animation repeats. Prefer short, finite animations for attention.

animation-name

animation-name: pulse

Selects which keyframes block to run.

perspective

perspective: 600px

Adds depth to 3D transforms applied to children.

prefers-reduced-motion

@media (prefers-reduced-motion: reduce)

Respects users who ask the operating system to reduce motion. Disable non-essential animation here.

transform

transform: translateY(-4px) scale(1.02)

Moves, rotates, scales or skews an element without affecting layout. Multiple functions apply in order.

transform-origin

transform-origin: top left

Sets the anchor point for transforms.

transition

transition: 160ms ease

Animates changes to animatable properties when their value changes.

transition-duration

transition-duration: 200ms

How long a transition takes. UI feedback usually lands between 120ms and 260ms.

transition-property

transition-property: opacity, transform

Chooses which properties animate. Avoid transition: all because it animates unintended changes.

transition-timing-function

transition-timing-function: ease-out

The acceleration curve. ease-out feels responsive for entrances and hover states.

will-change

will-change: transform

Hints that a property will animate so the browser can optimise ahead. Use temporarily, never as a blanket rule.

Properties — Compositing and Blending

background-blend-mode

background-blend-mode: <blend-mode>#

The CSS background-blend-mode property. Initial value: normal. Not inherited.

isolation

isolation: auto | isolate

The CSS isolation property. Initial value: auto. Not inherited.

Properties — CSS Anchor Positioning

anchor-name

anchor-name: none | <dashed-ident>#

The CSS anchor-name property. Initial value: none. Not inherited.

anchor-scope

anchor-scope: none | all | <dashed-ident>#

The CSS anchor-scope property. Initial value: none. Not inherited.

bottom

bottom: auto | <length-percentage> | <anchor()> | <anchor-size()>

The CSS bottom property. Initial value: auto. Not inherited.

left

left: auto | <length-percentage> | <anchor()> | <anchor-size()>

The CSS left property. Initial value: auto. Not inherited.

margin-bottom

margin-bottom: <length-percentage> | auto | <anchor-size()>

The CSS margin-bottom property. Initial value: 0. Not inherited.

margin-left

margin-left: <length-percentage> | auto | <anchor-size()>

The CSS margin-left property. Initial value: 0. Not inherited.

margin-right

margin-right: <length-percentage> | auto | <anchor-size()>

The CSS margin-right property. Initial value: 0. Not inherited.

margin-top

margin-top: <length-percentage> | auto | <anchor-size()>

The CSS margin-top property. Initial value: 0. Not inherited.

position-anchor

position-anchor: normal | auto | none | <anchor-name> | match-parent

The CSS position-anchor property. Initial value: normal. Not inherited.

position-area

position-area: none | <position-area>

The CSS position-area property. Initial value: none. Not inherited.

position-try

position-try: <'position-try-order'>? <'position-try-fallbacks'>

The CSS position-try property. Initial value: position-try-fallbacks,position-try-order. Not inherited.

position-try-fallbacks

position-try-fallbacks: none | [ [<dashed-ident> || <try-tactic>] | <'position-area'> ]#

The CSS position-try-fallbacks property. Initial value: none. Not inherited.

position-try-order

position-try-order: normal | <try-size>

The CSS position-try-order property. Initial value: normal. Not inherited.

position-visibility

position-visibility: always | [ anchors-valid || anchors-visible || no-overflow ]

The CSS position-visibility property. Initial value: anchors-visible. Not inherited.

right

right: auto | <length-percentage> | <anchor()> | <anchor-size()>

The CSS right property. Initial value: auto. Not inherited.

top

top: auto | <length-percentage> | <anchor()> | <anchor-size()>

The CSS top property. Initial value: auto. Not inherited.

Properties — CSS Animations

animation-composition

animation-composition: <single-animation-composition>#

The CSS animation-composition property. Initial value: replace. Not inherited.

animation-delay

animation-delay: <time>#

The CSS animation-delay property. Initial value: 0s. Not inherited.

animation-direction

animation-direction: <single-animation-direction>#

The CSS animation-direction property. Initial value: normal. Not inherited.

animation-fill-mode

animation-fill-mode: <single-animation-fill-mode>#

The CSS animation-fill-mode property. Initial value: none. Not inherited.

animation-play-state

animation-play-state: <single-animation-play-state>#

The CSS animation-play-state property. Initial value: running. Not inherited.

animation-timeline

animation-timeline: <single-animation-timeline>#

The CSS animation-timeline property. Initial value: auto. Not inherited.

animation-timing-function

animation-timing-function: <easing-function>#

The CSS animation-timing-function property. Initial value: ease. Not inherited.

animation-trigger

animation-trigger: [ none | [ <dashed-ident> <animation-action>+ ]+ ]#

The CSS animation-trigger property. Initial value: none. Not inherited.

timeline-trigger

timeline-trigger: none | [ <'timeline-trigger-name'> <'timeline-trigger-source'> <'timeline-trigger-activation-range'> [ '/' <'timeline-trigger-active-range'> ]? ]#

The CSS timeline-trigger property. Initial value: timeline-trigger-name,timeline-trigger-source,timeline-trigger-activation-range,timeline-trigger-active-range. Not inherited.

timeline-trigger-activation-range

timeline-trigger-activation-range: [ <'timeline-trigger-activation-range-start'> <'timeline-trigger-activation-range-end'>? ]#

The CSS timeline-trigger-activation-range property. Initial value: timeline-trigger-activation-range-start,timeline-trigger-activation-range-end. Not inherited.

timeline-trigger-activation-range-end

timeline-trigger-activation-range-end: [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#

The CSS timeline-trigger-activation-range-end property. Initial value: normal. Not inherited.

timeline-trigger-activation-range-start

timeline-trigger-activation-range-start: [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#

The CSS timeline-trigger-activation-range-start property. Initial value: normal. Not inherited.

timeline-trigger-active-range

timeline-trigger-active-range: [ <'timeline-trigger-active-range-start'> <'timeline-trigger-active-range-end'>? ]#

The CSS timeline-trigger-active-range property. Initial value: timeline-trigger-active-range-start,timeline-trigger-active-range-end. Not inherited.

timeline-trigger-active-range-end

timeline-trigger-active-range-end: [ auto | normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#

The CSS timeline-trigger-active-range-end property. Initial value: auto. Not inherited.

timeline-trigger-active-range-start

timeline-trigger-active-range-start: [ auto | normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#

The CSS timeline-trigger-active-range-start property. Initial value: auto. Not inherited.

timeline-trigger-name

timeline-trigger-name: none | <dashed-ident>#

The CSS timeline-trigger-name property. Initial value: none. Not inherited.

timeline-trigger-source

timeline-trigger-source: <single-animation-timeline>#

The CSS timeline-trigger-source property. Initial value: auto. Not inherited.

trigger-scope

trigger-scope: none | all | <dashed-ident>#

The CSS trigger-scope property. Initial value: none. Not inherited.

Properties — CSS Backgrounds and Borders

background

background: <bg-layer>#? , <final-bg-layer>

The CSS background property. Initial value: background-image,background-position,background-size,background-repeat,background-origin,background-clip,background-attachment,background-color. Not inherited.

background-attachment

background-attachment: <attachment>#

The CSS background-attachment property. Initial value: scroll. Not inherited.

background-origin

background-origin: <visual-box>#

The CSS background-origin property. Initial value: padding-box. Not inherited.

background-position-x

background-position-x: [ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#

The CSS background-position-x property. Initial value: 0%. Not inherited.

background-position-y

background-position-y: [ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#

The CSS background-position-y property. Initial value: 0%. Not inherited.

border-bottom

border-bottom: <line-width> || <line-style> || <color>

The CSS border-bottom property. Initial value: border-bottom-width,border-bottom-style,border-bottom-color. Not inherited.

border-bottom-color

border-bottom-color: <'border-top-color'>

The CSS border-bottom-color property. Initial value: currentcolor. Not inherited.

border-bottom-left-radius

border-bottom-left-radius: <length-percentage [0,∞]>{1,2}

The CSS border-bottom-left-radius property. Initial value: 0. Not inherited.

border-bottom-right-radius

border-bottom-right-radius: <length-percentage [0,∞]>{1,2}

The CSS border-bottom-right-radius property. Initial value: 0. Not inherited.

border-bottom-style

border-bottom-style: <line-style>

The CSS border-bottom-style property. Initial value: none. Not inherited.

border-bottom-width

border-bottom-width: <line-width>

The CSS border-bottom-width property. Initial value: medium. Not inherited.

border-color

border-color: <color>{1,4}

The CSS border-color property. Initial value: border-top-color,border-right-color,border-bottom-color,border-left-color. Not inherited.

border-image

border-image: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

The CSS border-image property. Initial value: border-image-source,border-image-slice,border-image-width,border-image-outset,border-image-repeat. Not inherited.

border-image-outset

border-image-outset: [ <length [0,∞]> | <number [0,∞]> ]{1,4}

The CSS border-image-outset property. Initial value: 0. Not inherited.

border-image-repeat

border-image-repeat: [ stretch | repeat | round | space ]{1,2}

The CSS border-image-repeat property. Initial value: stretch. Not inherited.

border-image-slice

border-image-slice: [ <number [0,∞]> | <percentage [0,∞]> ]{1,4} && fill?

The CSS border-image-slice property. Initial value: 100%. Not inherited.

border-image-source

border-image-source: none | <image>

The CSS border-image-source property. Initial value: none. Not inherited.

border-image-width

border-image-width: [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}

The CSS border-image-width property. Initial value: 1. Not inherited.

border-left

border-left: <line-width> || <line-style> || <color>

The CSS border-left property. Initial value: border-left-width,border-left-style,border-left-color. Not inherited.

border-left-color

border-left-color: <color>

The CSS border-left-color property. Initial value: currentcolor. Not inherited.

border-left-style

border-left-style: <line-style>

The CSS border-left-style property. Initial value: none. Not inherited.

border-left-width

border-left-width: <line-width>

The CSS border-left-width property. Initial value: medium. Not inherited.

border-right

border-right: <line-width> || <line-style> || <color>

The CSS border-right property. Initial value: border-right-width,border-right-style,border-right-color. Not inherited.

border-right-color

border-right-color: <color>

The CSS border-right-color property. Initial value: currentcolor. Not inherited.

border-right-style

border-right-style: <line-style>

The CSS border-right-style property. Initial value: none. Not inherited.

border-right-width

border-right-width: <line-width>

The CSS border-right-width property. Initial value: medium. Not inherited.

border-shape

border-shape: none | [ <basic-shape> <geometry-box>?]{1,2}

The CSS border-shape property. Initial value: none. Not inherited.

border-style

border-style: <line-style>{1,4}

The CSS border-style property. Initial value: border-top-style,border-right-style,border-bottom-style,border-left-style. Not inherited.

border-top

border-top: <line-width> || <line-style> || <color>

The CSS border-top property. Initial value: border-top-width,border-top-style,border-top-color. Not inherited.

border-top-color

border-top-color: <color>

The CSS border-top-color property. Initial value: currentcolor. Not inherited.

border-top-left-radius

border-top-left-radius: <length-percentage [0,∞]>{1,2}

The CSS border-top-left-radius property. Initial value: 0. Not inherited.

border-top-right-radius

border-top-right-radius: <length-percentage [0,∞]>{1,2}

The CSS border-top-right-radius property. Initial value: 0. Not inherited.

border-top-style

border-top-style: <line-style>

The CSS border-top-style property. Initial value: none. Not inherited.

border-top-width

border-top-width: <line-width>

The CSS border-top-width property. Initial value: medium. Not inherited.

border-width

border-width: <line-width>{1,4}

The CSS border-width property. Initial value: border-top-width,border-right-width,border-bottom-width,border-left-width. Not inherited.

corner-block-end-shape

corner-block-end-shape: <corner-shape-value>{1,2}

The CSS corner-block-end-shape property. Initial value: corner-end-start-shape,corner-end-end-shape. Not inherited.

corner-block-start-shape

corner-block-start-shape: <corner-shape-value>{1,2}

The CSS corner-block-start-shape property. Initial value: corner-start-start-shape,corner-start-end-shape. Not inherited.

corner-bottom-left-shape

corner-bottom-left-shape: <corner-shape-value>

The CSS corner-bottom-left-shape property. Initial value: round. Not inherited.

corner-bottom-right-shape

corner-bottom-right-shape: <corner-shape-value>

The CSS corner-bottom-right-shape property. Initial value: round. Not inherited.

corner-bottom-shape

corner-bottom-shape: <corner-shape-value>{1,2}

The CSS corner-bottom-shape property. Initial value: corner-bottom-left-shape,corner-bottom-right-shape. Not inherited.

corner-end-end-shape

corner-end-end-shape: <corner-shape-value>

The CSS corner-end-end-shape property. Initial value: round. Not inherited.

corner-end-start-shape

corner-end-start-shape: <corner-shape-value>

The CSS corner-end-start-shape property. Initial value: round. Not inherited.

corner-inline-end-shape

corner-inline-end-shape: <corner-shape-value>{1,2}

The CSS corner-inline-end-shape property. Initial value: corner-start-end-shape,corner-end-end-shape. Not inherited.

corner-inline-start-shape

corner-inline-start-shape: <corner-shape-value>{1,2}

The CSS corner-inline-start-shape property. Initial value: corner-start-start-shape,corner-start-end-shape. Not inherited.

corner-left-shape

corner-left-shape: <corner-shape-value>{1,2}

The CSS corner-left-shape property. Initial value: corner-top-left-shape,corner-bottom-left-shape. Not inherited.

corner-right-shape

corner-right-shape: <corner-shape-value>{1,2}

The CSS corner-right-shape property. Initial value: corner-top-right-shape,corner-bottom-right-shape. Not inherited.

corner-shape

corner-shape: <corner-shape-value>{1,4}

The CSS corner-shape property. Initial value: corner-top-left-shape,corner-top-right-shape,corner-bottom-left-shape,corner-bottom-right-shape. Not inherited.

corner-start-end-shape

corner-start-end-shape: <corner-shape-value>

The CSS corner-start-end-shape property. Initial value: round. Not inherited.

corner-start-start-shape

corner-start-start-shape: <corner-shape-value>

The CSS corner-start-start-shape property. Initial value: round. Not inherited.

corner-top-left-shape

corner-top-left-shape: <corner-shape-value>

The CSS corner-top-left-shape property. Initial value: round. Not inherited.

corner-top-right-shape

corner-top-right-shape: <corner-shape-value>

The CSS corner-top-right-shape property. Initial value: round. Not inherited.

corner-top-shape

corner-top-shape: <corner-shape-value>{1,2}

The CSS corner-top-shape property. Initial value: corner-top-left-shape,corner-top-right-shape. Not inherited.

Properties — CSS Basic User Interface

appearance

appearance: none | auto | <compat-auto> | <compat-special>

The CSS appearance property. Initial value: none. Not inherited.

caret

caret: <'caret-color'> || <'caret-animation'> || <'caret-shape'>

The CSS caret property. Initial value: caret-color,caret-animation,caret-shape. Inherited.

caret-animation

caret-animation: auto | manual

The CSS caret-animation property. Initial value: auto. Inherited.

caret-color

caret-color: auto | <color>

The CSS caret-color property. Initial value: auto. Inherited.

caret-shape

caret-shape: auto | bar | block | underscore

The CSS caret-shape property. Initial value: auto. Inherited.

field-sizing

field-sizing: content | fixed

The CSS field-sizing property. Initial value: fixed. Not inherited.

interactivity

interactivity: auto | inert

The CSS interactivity property. Initial value: auto. Inherited.

interest-delay

interest-delay: <'interest-delay-start'>{1,2}

The CSS interest-delay property. Initial value: interest-delay-start,interest-delay-end. Inherited.

interest-delay-end

interest-delay-end: normal | <time>

The CSS interest-delay-end property. Initial value: normal. Inherited.

interest-delay-start

interest-delay-start: normal | <time>

The CSS interest-delay-start property. Initial value: normal. Inherited.

outline-color

outline-color: auto | <color>

The CSS outline-color property. Initial value: auto. Not inherited.

outline-offset

outline-offset: <length>

The CSS outline-offset property. Initial value: 0. Not inherited.

outline-style

outline-style: auto | <outline-line-style>

The CSS outline-style property. Initial value: none. Not inherited.

outline-width

outline-width: <line-width>

The CSS outline-width property. Initial value: medium. Not inherited.

resize

resize: none | both | horizontal | vertical | block | inline

The CSS resize property. Initial value: none. Not inherited.

window-drag

window-drag: none | move

The CSS window-drag property. Initial value: none. Inherited.

Properties — CSS Box Alignment

column-gap

column-gap: normal | <length-percentage>

The CSS column-gap property. Initial value: normal. Not inherited.

justify-items

justify-items: normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ] | anchor-center

The CSS justify-items property. Initial value: legacy. Not inherited.

justify-self

justify-self: auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | anchor-center

The CSS justify-self property. Initial value: auto. Not inherited.

place-self

place-self: <'align-self'> <'justify-self'>?

The CSS place-self property. Initial value: align-self,justify-self. Not inherited.

row-gap

row-gap: normal | <length-percentage>

The CSS row-gap property. Initial value: normal. Not inherited.

Properties — CSS Box Model

margin-trim

margin-trim: none | in-flow | all

The CSS margin-trim property. Initial value: none. Not inherited.

padding-bottom

padding-bottom: <length-percentage [0,∞]>

The CSS padding-bottom property. Initial value: 0. Not inherited.

padding-left

padding-left: <length-percentage [0,∞]>

The CSS padding-left property. Initial value: 0. Not inherited.

padding-right

padding-right: <length-percentage [0,∞]>

The CSS padding-right property. Initial value: 0. Not inherited.

padding-top

padding-top: <length-percentage [0,∞]>

The CSS padding-top property. Initial value: 0. Not inherited.

Properties — CSS Box Sizing

column-height

column-height: auto | <length [0,∞]>

The CSS column-height property. Initial value: auto. Not inherited.

column-width

column-width: auto | <length [0,∞]>

The CSS column-width property. Initial value: auto. Not inherited.

column-wrap

column-wrap: auto | nowrap | wrap

The CSS column-wrap property. Initial value: auto. Not inherited.

contain-intrinsic-block-size

contain-intrinsic-block-size: auto? [ none | <length> ]

The CSS contain-intrinsic-block-size property. Initial value: none. Not inherited.

contain-intrinsic-height

contain-intrinsic-height: auto? [ none | <length> ]

The CSS contain-intrinsic-height property. Initial value: none. Not inherited.

contain-intrinsic-inline-size

contain-intrinsic-inline-size: auto? [ none | <length> ]

The CSS contain-intrinsic-inline-size property. Initial value: none. Not inherited.

contain-intrinsic-size

contain-intrinsic-size: [ auto? [ none | <length> ] ]{1,2}

The CSS contain-intrinsic-size property. Initial value: contain-intrinsic-width,contain-intrinsic-height. Not inherited.

contain-intrinsic-width

contain-intrinsic-width: auto? [ none | <length> ]

The CSS contain-intrinsic-width property. Initial value: none. Not inherited.

frame-sizing

frame-sizing: auto | content-width | content-height | content-block-size | content-inline-size

The CSS frame-sizing property. Initial value: auto. Not inherited.

max-height

max-height: none | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>

The CSS max-height property. Initial value: none. Not inherited.

max-width

max-width: none | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>

The CSS max-width property. Initial value: none. Not inherited.

min-height

min-height: auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>

The CSS min-height property. Initial value: auto. Not inherited.

min-width

min-width: auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>

The CSS min-width property. Initial value: auto. Not inherited.

Properties — CSS Cascading and Inheritance

all

all: initial | inherit | unset | revert | revert-layer

The CSS all property. Initial value: noPracticalInitialValue. Not inherited.

Properties — CSS Color

color-scheme

color-scheme: normal | [ light | dark | <custom-ident> ]+ && only?

The CSS color-scheme property. Initial value: normal. Inherited.

dynamic-range-limit

dynamic-range-limit: standard | no-limit | constrained | <dynamic-range-limit-mix()>

The CSS dynamic-range-limit property. Initial value: no-limit. Inherited.

forced-color-adjust

forced-color-adjust: auto | none | preserve-parent-color

The CSS forced-color-adjust property. Initial value: auto. Inherited.

print-color-adjust

print-color-adjust: economy | exact

The CSS print-color-adjust property. Initial value: economy. Inherited.

Properties — CSS Conditional Rules

container-name

container-name: none | <custom-ident>+

The CSS container-name property. Initial value: none. Not inherited.

Properties — CSS Containment

contain

contain: none | strict | content | [ [ size || inline-size ] || layout || style || paint ]

The CSS contain property. Initial value: none. Not inherited.

content-visibility

content-visibility: visible | auto | hidden

The CSS content-visibility property. Initial value: visible. Not inherited.

Properties — CSS Display

reading-flow

reading-flow: normal | source-order | flex-visual | flex-flow | grid-rows | grid-columns | grid-order

The CSS reading-flow property. Initial value: normal. Not inherited.

reading-order

reading-order: <integer>

The CSS reading-order property. Initial value: 0. Not inherited.

visibility

visibility: visible | hidden | collapse

The CSS visibility property. Initial value: visible. Inherited.

Properties — CSS Flexible Box Layout

flex-flow

flex-flow: <'flex-direction'> || <'flex-wrap'>

The CSS flex-flow property. Initial value: flex-direction,flex-wrap. Not inherited.

flex-line-count

flex-line-count: <integer [1,∞]>

The CSS flex-line-count property. Initial value: 1. Not inherited.

Properties — CSS Fonts

font

font: [ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'># ] | <system-family-name>

The CSS font property. Initial value: font-style,font-variant,font-weight,font-stretch,font-size,line-height,font-family. Inherited.

font-feature-settings

font-feature-settings: normal | <feature-tag-value>#

The CSS font-feature-settings property. Initial value: normal. Inherited.

font-kerning

font-kerning: auto | normal | none

The CSS font-kerning property. Initial value: auto. Inherited.

font-language-override

font-language-override: normal | <string>

The CSS font-language-override property. Initial value: normal. Inherited.

font-optical-sizing

font-optical-sizing: auto | none

The CSS font-optical-sizing property. Initial value: auto. Inherited.

font-palette

font-palette: normal | light | dark | <palette-identifier> | <palette-mix()>

The CSS font-palette property. Initial value: normal. Inherited.

font-size-adjust

font-size-adjust: none | [ ex-height | cap-height | ch-width | ic-width | ic-height ]? [ from-font | <number> ]

The CSS font-size-adjust property. Initial value: none. Inherited.

font-synthesis

font-synthesis: none | [ weight || style || small-caps || position]

The CSS font-synthesis property. Initial value: weight style small-caps position . Inherited.

font-synthesis-position

font-synthesis-position: auto | none

The CSS font-synthesis-position property. Initial value: none. Inherited.

font-synthesis-small-caps

font-synthesis-small-caps: auto | none

The CSS font-synthesis-small-caps property. Initial value: auto. Inherited.

font-synthesis-style

font-synthesis-style: auto | none

The CSS font-synthesis-style property. Initial value: auto. Inherited.

font-synthesis-weight

font-synthesis-weight: auto | none

The CSS font-synthesis-weight property. Initial value: auto. Inherited.

font-variant

font-variant: normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic( <feature-value-name> ) || historical-forms |

The CSS font-variant property. Initial value: normal. Inherited.

font-variant-alternates

font-variant-alternates: normal | [ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> )

The CSS font-variant-alternates property. Initial value: normal. Inherited.

font-variant-caps

font-variant-caps: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps

The CSS font-variant-caps property. Initial value: normal. Inherited.

font-variant-east-asian

font-variant-east-asian: normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]

The CSS font-variant-east-asian property. Initial value: normal. Inherited.

font-variant-emoji

font-variant-emoji: normal | text | emoji | unicode

The CSS font-variant-emoji property. Initial value: normal. Inherited.

font-variant-ligatures

font-variant-ligatures: normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]

The CSS font-variant-ligatures property. Initial value: normal. Inherited.

font-variant-position

font-variant-position: normal | sub | super

The CSS font-variant-position property. Initial value: normal. Inherited.

font-variation-settings

font-variation-settings: normal | [ <string> <number> ]#

The CSS font-variation-settings property. Initial value: normal. Inherited.

font-width

font-width: normal | <percentage [0,∞]> | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

The CSS font-width property. Initial value: normal. Inherited.

Properties — CSS Fragmentation

box-decoration-break

box-decoration-break: slice | clone

The CSS box-decoration-break property. Initial value: slice. Not inherited.

break-after

break-after: auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region

The CSS break-after property. Initial value: auto. Not inherited.

break-before

break-before: auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region

The CSS break-before property. Initial value: auto. Not inherited.

break-inside

break-inside: auto | avoid | avoid-page | avoid-column | avoid-region

The CSS break-inside property. Initial value: auto. Not inherited.

orphans

orphans: <integer>

The CSS orphans property. Initial value: 2. Inherited.

widows

widows: <integer>

The CSS widows property. Initial value: 2. Inherited.

Properties — CSS Generated Content

content

content: normal | none | [ <content-replacement> | <content-list> ] [ / [ <string> | <counter> | <attr()> ]+ ]?

The CSS content property. Initial value: normal. Not inherited.

quotes

quotes: none | auto | [ <string> <string> ]+

The CSS quotes property. Initial value: dependsOnUserAgent. Inherited.

Properties — CSS Grid Layout

grid-area

grid-area: <grid-line> [ / <grid-line> ]{0,3}

The CSS grid-area property. Initial value: grid-row-start,grid-column-start,grid-row-end,grid-column-end. Not inherited.

grid-auto-columns

grid-auto-columns: <track-size>+

The CSS grid-auto-columns property. Initial value: auto. Not inherited.

grid-auto-flow

grid-auto-flow: [ row | column ] || dense

The CSS grid-auto-flow property. Initial value: row. Not inherited.

grid-auto-rows

grid-auto-rows: <track-size>+

The CSS grid-auto-rows property. Initial value: auto. Not inherited.

grid-column-end

grid-column-end: <grid-line>

The CSS grid-column-end property. Initial value: auto. Not inherited.

grid-column-start

grid-column-start: <grid-line>

The CSS grid-column-start property. Initial value: auto. Not inherited.

grid-row-end

grid-row-end: <grid-line>

The CSS grid-row-end property. Initial value: auto. Not inherited.

grid-row-start

grid-row-start: <grid-line>

The CSS grid-row-start property. Initial value: auto. Not inherited.

grid-template

grid-template: none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

The CSS grid-template property. Initial value: grid-template-columns,grid-template-rows,grid-template-areas. Not inherited.

Properties — CSS Images

image-orientation

image-orientation: from-image | <angle> | [ <angle>? flip ]

The CSS image-orientation property. Initial value: from-image. Inherited.

image-rendering

image-rendering: auto | crisp-edges | pixelated | smooth

The CSS image-rendering property. Initial value: auto. Inherited.

image-resolution

image-resolution: [ from-image || <resolution> ] && snap?

The CSS image-resolution property. Initial value: 1dppx. Inherited.

object-view-box

object-view-box: none | <basic-shape-rect>

The CSS object-view-box property. Initial value: none. Not inherited.

Properties — CSS Inline

alignment-baseline

alignment-baseline: baseline | alphabetic | ideographic | middle | central | mathematical | text-before-edge | text-after-edge

The CSS alignment-baseline property. Initial value: baseline. Not inherited.

baseline-shift

baseline-shift: <length-percentage> | sub | super | baseline

The CSS baseline-shift property. Initial value: 0. Not inherited.

baseline-source

baseline-source: auto | first | last

The CSS baseline-source property. Initial value: auto. Not inherited.

dominant-baseline

dominant-baseline: auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top

The CSS dominant-baseline property. Initial value: auto. Inherited.

initial-letter

initial-letter: normal | [ <number> <integer>? ]

The CSS initial-letter property. Initial value: normal. Not inherited.

initial-letter-align

initial-letter-align: [ auto | alphabetic | hanging | ideographic ]

The CSS initial-letter-align property. Initial value: auto. Not inherited.

text-box

text-box: normal | <'text-box-trim'> || <'text-box-edge'>

The CSS text-box property. Initial value: normal. Not inherited.

text-box-edge

text-box-edge: auto | <text-edge>

The CSS text-box-edge property. Initial value: auto. Not inherited.

text-box-trim

text-box-trim: none | trim-start | trim-end | trim-both

The CSS text-box-trim property. Initial value: none. Not inherited.

vertical-align

vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>

The CSS vertical-align property. Initial value: baseline. Not inherited.

Properties — CSS Lists and Counters

counter-increment

counter-increment: [ <counter-name> <integer>? ]+ | none

The CSS counter-increment property. Initial value: none. Not inherited.

counter-reset

counter-reset: [ <counter-name> <integer>? | <reversed-counter-name> <integer>? ]+ | none

The CSS counter-reset property. Initial value: none. Not inherited.

counter-set

counter-set: [ <counter-name> <integer>? ]+ | none

The CSS counter-set property. Initial value: none. Not inherited.

list-style-image

list-style-image: <image> | none

The CSS list-style-image property. Initial value: none. Inherited.

list-style-position

list-style-position: inside | outside

The CSS list-style-position property. Initial value: outside. Inherited.

list-style-type

list-style-type: <counter-style> | <string> | none

The CSS list-style-type property. Initial value: disc. Inherited.

Properties — CSS Logical Properties and Values

block-size

block-size: <'width'>

The CSS block-size property. Initial value: auto. Not inherited.

border-block

border-block: <'border-top'>

The CSS border-block property. Initial value: border-block-width,border-block-style,border-block-color. Not inherited.

border-block-color

border-block-color: <'border-top-color'>{1,2}

The CSS border-block-color property. Initial value: border-block-start-color,border-block-end-color. Not inherited.

border-block-end

border-block-end: <'border-top'>

The CSS border-block-end property. Initial value: border-block-end-width,border-block-end-style,border-block-end-color. Not inherited.

border-block-end-color

border-block-end-color: <'border-top-color'>

The CSS border-block-end-color property. Initial value: currentcolor. Not inherited.

border-block-end-style

border-block-end-style: <'border-top-style'>

The CSS border-block-end-style property. Initial value: none. Not inherited.

border-block-end-width

border-block-end-width: <'border-top-width'>

The CSS border-block-end-width property. Initial value: medium. Not inherited.

border-block-start

border-block-start: <'border-top'>

The CSS border-block-start property. Initial value: border-block-start-width,border-block-start-style,border-block-start-color. Not inherited.

border-block-start-color

border-block-start-color: <'border-top-color'>

The CSS border-block-start-color property. Initial value: currentcolor. Not inherited.

border-block-start-style

border-block-start-style: <'border-top-style'>

The CSS border-block-start-style property. Initial value: none. Not inherited.

border-block-start-width

border-block-start-width: <'border-top-width'>

The CSS border-block-start-width property. Initial value: medium. Not inherited.

border-block-style

border-block-style: <'border-top-style'>{1,2}

The CSS border-block-style property. Initial value: border-block-start-style,border-block-end-style. Not inherited.

border-block-width

border-block-width: <'border-top-width'>{1,2}

The CSS border-block-width property. Initial value: border-block-start-width,border-block-end-width. Not inherited.

border-end-end-radius

border-end-end-radius: <'border-top-left-radius'>

The CSS border-end-end-radius property. Initial value: 0. Not inherited.

border-end-start-radius

border-end-start-radius: <'border-top-left-radius'>

The CSS border-end-start-radius property. Initial value: 0. Not inherited.

border-inline

border-inline: <'border-top'>

The CSS border-inline property. Initial value: border-inline-width,border-inline-style,border-inline-color. Not inherited.

border-inline-color

border-inline-color: <'border-top-color'>{1,2}

The CSS border-inline-color property. Initial value: border-inline-start-color,border-inline-end-color. Not inherited.

border-inline-end

border-inline-end: <'border-top'>

The CSS border-inline-end property. Initial value: border-inline-end-width,border-inline-end-style,border-inline-end-color. Not inherited.

border-inline-end-color

border-inline-end-color: <'border-top-color'>

The CSS border-inline-end-color property. Initial value: currentcolor. Not inherited.

border-inline-end-style

border-inline-end-style: <'border-top-style'>

The CSS border-inline-end-style property. Initial value: none. Not inherited.

border-inline-end-width

border-inline-end-width: <'border-top-width'>

The CSS border-inline-end-width property. Initial value: medium. Not inherited.

border-inline-start

border-inline-start: <'border-top'>

The CSS border-inline-start property. Initial value: border-inline-start-width,border-inline-start-style,border-inline-start-color. Not inherited.

border-inline-start-color

border-inline-start-color: <'border-top-color'>

The CSS border-inline-start-color property. Initial value: currentcolor. Not inherited.

border-inline-start-style

border-inline-start-style: <'border-top-style'>

The CSS border-inline-start-style property. Initial value: none. Not inherited.

border-inline-start-width

border-inline-start-width: <'border-top-width'>

The CSS border-inline-start-width property. Initial value: medium. Not inherited.

border-inline-style

border-inline-style: <'border-top-style'>{1,2}

The CSS border-inline-style property. Initial value: border-inline-start-style,border-inline-end-style. Not inherited.

border-inline-width

border-inline-width: <'border-top-width'>{1,2}

The CSS border-inline-width property. Initial value: border-inline-start-width,border-inline-end-width. Not inherited.

border-start-end-radius

border-start-end-radius: <'border-top-left-radius'>

The CSS border-start-end-radius property. Initial value: 0. Not inherited.

border-start-start-radius

border-start-start-radius: <'border-top-left-radius'>

The CSS border-start-start-radius property. Initial value: 0. Not inherited.

inline-size

inline-size: <'width'>

The CSS inline-size property. Initial value: auto. Not inherited.

inset-block

inset-block: <'top'>{1,2}

The CSS inset-block property. Initial value: inset-block-start,inset-block-end. Not inherited.

inset-block-end

inset-block-end: <'top'>

The CSS inset-block-end property. Initial value: auto. Not inherited.

inset-block-start

inset-block-start: <'top'>

The CSS inset-block-start property. Initial value: auto. Not inherited.

inset-inline

inset-inline: <'top'>{1,2}

The CSS inset-inline property. Initial value: inset-inline-start,inset-inline-end. Not inherited.

inset-inline-end

inset-inline-end: <'top'>

The CSS inset-inline-end property. Initial value: auto. Not inherited.

inset-inline-start

inset-inline-start: <'top'>

The CSS inset-inline-start property. Initial value: auto. Not inherited.

margin-block

margin-block: <'margin-top'>{1,2}

The CSS margin-block property. Initial value: margin-block-start,margin-block-end. Not inherited.

margin-block-end

margin-block-end: <'margin-top'>

The CSS margin-block-end property. Initial value: 0. Not inherited.

margin-block-start

margin-block-start: <'margin-top'>

The CSS margin-block-start property. Initial value: 0. Not inherited.

margin-inline

margin-inline: <'margin-top'>{1,2}

The CSS margin-inline property. Initial value: margin-inline-start,margin-inline-end. Not inherited.

margin-inline-end

margin-inline-end: <'margin-top'>

The CSS margin-inline-end property. Initial value: 0. Not inherited.

margin-inline-start

margin-inline-start: <'margin-top'>

The CSS margin-inline-start property. Initial value: 0. Not inherited.

max-block-size

max-block-size: <'max-width'>

The CSS max-block-size property. Initial value: none. Not inherited.

max-inline-size

max-inline-size: <'max-width'>

The CSS max-inline-size property. Initial value: none. Not inherited.

min-block-size

min-block-size: <'min-width'>

The CSS min-block-size property. Initial value: 0. Not inherited.

min-inline-size

min-inline-size: <'min-width'>

The CSS min-inline-size property. Initial value: 0. Not inherited.

padding-block

padding-block: <'padding-top'>{1,2}

The CSS padding-block property. Initial value: padding-block-start,padding-block-end. Not inherited.

padding-block-end

padding-block-end: <'padding-top'>

The CSS padding-block-end property. Initial value: 0. Not inherited.

padding-block-start

padding-block-start: <'padding-top'>

The CSS padding-block-start property. Initial value: 0. Not inherited.

padding-inline

padding-inline: <'padding-top'>{1,2}

The CSS padding-inline property. Initial value: padding-inline-start,padding-inline-end. Not inherited.

padding-inline-end

padding-inline-end: <'padding-top'>

The CSS padding-inline-end property. Initial value: 0. Not inherited.

padding-inline-start

padding-inline-start: <'padding-top'>

The CSS padding-inline-start property. Initial value: 0. Not inherited.

Properties — CSS Masking

clip-path

clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

The CSS clip-path property. Initial value: none. Not inherited.

clip-rule

clip-rule: nonzero | evenodd

The CSS clip-rule property. Initial value: nonzero. Inherited.

mask

mask: <mask-layer>#

The CSS mask property. Initial value: mask-image,mask-mode,mask-repeat,mask-position,mask-clip,mask-origin,mask-size,mask-composite. Not inherited.

mask-border

mask-border: <'mask-border-source'> || <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? || <'mask-border-repeat'> || <'mask-border-mode'>

The CSS mask-border property. Initial value: mask-border-mode,mask-border-outset,mask-border-repeat,mask-border-slice,mask-border-source,mask-border-width. Not inherited.

mask-border-mode

mask-border-mode: luminance | alpha

The CSS mask-border-mode property. Initial value: alpha. Not inherited.

mask-border-outset

mask-border-outset: [ <length> | <number> ]{1,4}

The CSS mask-border-outset property. Initial value: 0. Not inherited.

mask-border-repeat

mask-border-repeat: [ stretch | repeat | round | space ]{1,2}

The CSS mask-border-repeat property. Initial value: stretch. Not inherited.

mask-border-slice

mask-border-slice: <number-percentage>{1,4} fill?

The CSS mask-border-slice property. Initial value: 0. Not inherited.

mask-border-source

mask-border-source: none | <image>

The CSS mask-border-source property. Initial value: none. Not inherited.

mask-border-width

mask-border-width: [ <length-percentage> | <number> | auto ]{1,4}

The CSS mask-border-width property. Initial value: auto. Not inherited.

mask-clip

mask-clip: [ <coord-box> | no-clip ]#

The CSS mask-clip property. Initial value: border-box. Not inherited.

mask-composite

mask-composite: <compositing-operator>#

The CSS mask-composite property. Initial value: add. Not inherited.

mask-image

mask-image: <mask-reference>#

The CSS mask-image property. Initial value: none. Not inherited.

mask-mode

mask-mode: <masking-mode>#

The CSS mask-mode property. Initial value: match-source. Not inherited.

mask-origin

mask-origin: <coord-box>#

The CSS mask-origin property. Initial value: border-box. Not inherited.

mask-position

mask-position: <position>#

The CSS mask-position property. Initial value: 0% 0%. Not inherited.

mask-repeat

mask-repeat: <repeat-style>#

The CSS mask-repeat property. Initial value: repeat. Not inherited.

mask-size

mask-size: <bg-size>#

The CSS mask-size property. Initial value: auto. Not inherited.

mask-type

mask-type: luminance | alpha

The CSS mask-type property. Initial value: luminance. Not inherited.

Properties — CSS Mobile Text Size Adjustment

text-size-adjust

text-size-adjust: none | auto | <percentage>

The CSS text-size-adjust property. Initial value: autoForSmartphoneBrowsersSupportingInflation. Inherited.

Properties — CSS Multi-column Layout

column-count

column-count: <integer> | auto

The CSS column-count property. Initial value: auto. Not inherited.

column-fill

column-fill: auto | balance

The CSS column-fill property. Initial value: balance. Not inherited.

column-rule

column-rule: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>

The CSS column-rule property. Initial value: column-rule-width,column-rule-style,column-rule-color. Not inherited.

column-rule-color

column-rule-color: <color>

The CSS column-rule-color property. Initial value: currentcolor. Not inherited.

column-rule-style

column-rule-style: <line-style>

The CSS column-rule-style property. Initial value: none. Not inherited.

column-rule-width

column-rule-width: <line-width>

The CSS column-rule-width property. Initial value: medium. Not inherited.

column-span

column-span: none | all

The CSS column-span property. Initial value: none. Not inherited.

columns

columns: [ <'column-width'> || <'column-count'> ] [ / <'column-height'> ]?

The CSS columns property. Initial value: column-width,column-count,column-height. Not inherited.

Properties — CSS Overflow

line-clamp

line-clamp: none | <integer>

The CSS line-clamp property. Initial value: none. Not inherited.

max-lines

max-lines: none | <integer>

The CSS max-lines property. Initial value: none. Not inherited.

overflow-block

overflow-block: visible | hidden | clip | scroll | auto

The CSS overflow-block property. Initial value: auto. Not inherited.

overflow-clip-margin

overflow-clip-margin: <visual-box> || <length [0,∞]>

The CSS overflow-clip-margin property. Initial value: 0px. Not inherited.

overflow-inline

overflow-inline: visible | hidden | clip | scroll | auto

The CSS overflow-inline property. Initial value: auto. Not inherited.

overflow-x

overflow-x: visible | hidden | clip | scroll | auto

The CSS overflow-x property. Initial value: visible. Not inherited.

overflow-y

overflow-y: visible | hidden | clip | scroll | auto

The CSS overflow-y property. Initial value: visible. Not inherited.

scroll-axis-lock

scroll-axis-lock: auto | none

The CSS scroll-axis-lock property. Initial value: auto. Not inherited.

scroll-behavior

scroll-behavior: auto | smooth

The CSS scroll-behavior property. Initial value: auto. Not inherited.

scroll-marker-group

scroll-marker-group: none | before | after

The CSS scroll-marker-group property. Initial value: none. Not inherited.

scroll-target-group

scroll-target-group: none | auto

The CSS scroll-target-group property. Initial value: none. Not inherited.

scrollbar-gutter

scrollbar-gutter: auto | stable && both-edges?

The CSS scrollbar-gutter property. Initial value: auto. Not inherited.

Properties — CSS Overscroll Behavior

overscroll-behavior

overscroll-behavior: [ contain | none | auto ]{1,2}

The CSS overscroll-behavior property. Initial value: auto. Not inherited.

overscroll-behavior-block

overscroll-behavior-block: contain | none | auto

The CSS overscroll-behavior-block property. Initial value: auto. Not inherited.

overscroll-behavior-inline

overscroll-behavior-inline: contain | none | auto

The CSS overscroll-behavior-inline property. Initial value: auto. Not inherited.

overscroll-behavior-x

overscroll-behavior-x: contain | none | auto

The CSS overscroll-behavior-x property. Initial value: auto. Not inherited.

overscroll-behavior-y

overscroll-behavior-y: contain | none | auto

The CSS overscroll-behavior-y property. Initial value: auto. Not inherited.

Properties — CSS Positioned Layout

overlay

overlay: none | auto

The CSS overlay property. Initial value: none. Not inherited.

Properties — CSS Rhythmic Sizing

line-height-step

line-height-step: <length>

The CSS line-height-step property. Initial value: 0. Inherited.

Properties — CSS Ruby

ruby-align

ruby-align: start | center | space-between | space-around

The CSS ruby-align property. Initial value: space-around. Inherited.

ruby-merge

ruby-merge: separate | collapse | auto

The CSS ruby-merge property. Initial value: separate. Inherited.

ruby-overhang

ruby-overhang: auto | none

The CSS ruby-overhang property. Initial value: auto. Inherited.

ruby-position

ruby-position: [ alternate || [ over | under ] ] | inter-character

The CSS ruby-position property. Initial value: alternate. Inherited.

Properties — CSS Scroll Anchoring

overflow-anchor

overflow-anchor: auto | none

The CSS overflow-anchor property. Initial value: auto. Not inherited.

Properties — CSS Scroll Snap

scroll-initial-target

scroll-initial-target: none | nearest

The CSS scroll-initial-target property. Initial value: none. Not inherited.

scroll-margin

scroll-margin: <length>{1,4}

The CSS scroll-margin property. Initial value: scroll-margin-bottom,scroll-margin-left,scroll-margin-right,scroll-margin-top. Not inherited.

scroll-margin-block

scroll-margin-block: <length>{1,2}

The CSS scroll-margin-block property. Initial value: scroll-margin-block-start,scroll-margin-block-end. Not inherited.

scroll-margin-block-end

scroll-margin-block-end: <length>

The CSS scroll-margin-block-end property. Initial value: 0. Not inherited.

scroll-margin-block-start

scroll-margin-block-start: <length>

The CSS scroll-margin-block-start property. Initial value: 0. Not inherited.

scroll-margin-bottom

scroll-margin-bottom: <length>

The CSS scroll-margin-bottom property. Initial value: 0. Not inherited.

scroll-margin-inline

scroll-margin-inline: <length>{1,2}

The CSS scroll-margin-inline property. Initial value: scroll-margin-inline-start,scroll-margin-inline-end. Not inherited.

scroll-margin-inline-end

scroll-margin-inline-end: <length>

The CSS scroll-margin-inline-end property. Initial value: 0. Not inherited.

scroll-margin-inline-start

scroll-margin-inline-start: <length>

The CSS scroll-margin-inline-start property. Initial value: 0. Not inherited.

scroll-margin-left

scroll-margin-left: <length>

The CSS scroll-margin-left property. Initial value: 0. Not inherited.

scroll-margin-right

scroll-margin-right: <length>

The CSS scroll-margin-right property. Initial value: 0. Not inherited.

scroll-margin-top

scroll-margin-top: <length>

The CSS scroll-margin-top property. Initial value: 0. Not inherited.

scroll-padding

scroll-padding: [ auto | <length-percentage> ]{1,4}

The CSS scroll-padding property. Initial value: scroll-padding-bottom,scroll-padding-left,scroll-padding-right,scroll-padding-top. Not inherited.

scroll-padding-block

scroll-padding-block: [ auto | <length-percentage> ]{1,2}

The CSS scroll-padding-block property. Initial value: scroll-padding-block-start,scroll-padding-block-end. Not inherited.

scroll-padding-block-end

scroll-padding-block-end: auto | <length-percentage>

The CSS scroll-padding-block-end property. Initial value: auto. Not inherited.

scroll-padding-block-start

scroll-padding-block-start: auto | <length-percentage>

The CSS scroll-padding-block-start property. Initial value: auto. Not inherited.

scroll-padding-bottom

scroll-padding-bottom: auto | <length-percentage>

The CSS scroll-padding-bottom property. Initial value: auto. Not inherited.

scroll-padding-inline

scroll-padding-inline: [ auto | <length-percentage> ]{1,2}

The CSS scroll-padding-inline property. Initial value: scroll-padding-inline-start,scroll-padding-inline-end. Not inherited.

scroll-padding-inline-end

scroll-padding-inline-end: auto | <length-percentage>

The CSS scroll-padding-inline-end property. Initial value: auto. Not inherited.

scroll-padding-inline-start

scroll-padding-inline-start: auto | <length-percentage>

The CSS scroll-padding-inline-start property. Initial value: auto. Not inherited.

scroll-padding-left

scroll-padding-left: auto | <length-percentage>

The CSS scroll-padding-left property. Initial value: auto. Not inherited.

scroll-padding-right

scroll-padding-right: auto | <length-percentage>

The CSS scroll-padding-right property. Initial value: auto. Not inherited.

scroll-padding-top

scroll-padding-top: auto | <length-percentage>

The CSS scroll-padding-top property. Initial value: auto. Not inherited.

scroll-snap-align

scroll-snap-align: [ none | start | end | center ]{1,2}

The CSS scroll-snap-align property. Initial value: none. Not inherited.

scroll-snap-stop

scroll-snap-stop: normal | always

The CSS scroll-snap-stop property. Initial value: normal. Not inherited.

scroll-snap-type

scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]?

The CSS scroll-snap-type property. Initial value: none. Not inherited.

Properties — CSS Scrollbars Styling

scrollbar-color

scrollbar-color: auto | <color>{2}

The CSS scrollbar-color property. Initial value: auto. Inherited.

scrollbar-width

scrollbar-width: auto | thin | none

The CSS scrollbar-width property. Initial value: auto. Not inherited.

Properties — CSS Shapes

shape-image-threshold

shape-image-threshold: <opacity-value>

The CSS shape-image-threshold property. Initial value: 0.0. Not inherited.

shape-margin

shape-margin: <length-percentage>

The CSS shape-margin property. Initial value: 0. Not inherited.

shape-outside

shape-outside: none | [ <shape-box> || <basic-shape> ] | <image>

The CSS shape-outside property. Initial value: none. Not inherited.

Properties — CSS Speech

speak-as

speak-as: normal | spell-out || digits || [ literal-punctuation | no-punctuation ]

The CSS speak-as property. Initial value: auto. Inherited.

Properties — CSS Table

border-collapse

border-collapse: separate | collapse

The CSS border-collapse property. Initial value: separate. Inherited.

border-spacing

border-spacing: <length>{1,2}

The CSS border-spacing property. Initial value: 0. Inherited.

caption-side

caption-side: top | bottom

The CSS caption-side property. Initial value: top. Inherited.

empty-cells

empty-cells: show | hide

The CSS empty-cells property. Initial value: show. Inherited.

table-layout

table-layout: auto | fixed

The CSS table-layout property. Initial value: auto. Not inherited.

Properties — CSS Text

hanging-punctuation

hanging-punctuation: none | [ first || [ force-end | allow-end ] || last ]

The CSS hanging-punctuation property. Initial value: none. Inherited.

hyphenate-character

hyphenate-character: auto | <string>

The CSS hyphenate-character property. Initial value: auto. Inherited.

hyphenate-limit-chars

hyphenate-limit-chars: [ auto | <integer> ]{1,3}

The CSS hyphenate-limit-chars property. Initial value: auto. Inherited.

hyphens

hyphens: none | manual | auto

The CSS hyphens property. Initial value: manual. Inherited.

line-break

line-break: auto | loose | normal | strict | anywhere

The CSS line-break property. Initial value: auto. Inherited.

tab-size

tab-size: <integer> | <length>

The CSS tab-size property. Initial value: 8. Inherited.

text-align-last

text-align-last: auto | start | end | left | right | center | justify

The CSS text-align-last property. Initial value: auto. Inherited.

text-autospace

text-autospace: normal | <autospace> | auto

The CSS text-autospace property. Initial value: normal. Inherited.

text-fit

text-fit: [ none | grow | shrink ] [consistent | per-line | per-line-all]? <percentage>?

The CSS text-fit property. Initial value: none. Inherited.

text-justify

text-justify: auto | inter-character | inter-word | none

The CSS text-justify property. Initial value: auto. Inherited.

text-spacing-trim

text-spacing-trim: space-all | normal | space-first | trim-start

The CSS text-spacing-trim property. Initial value: normal. Inherited.

text-wrap

text-wrap: <'text-wrap-mode'> || <'text-wrap-style'>

The CSS text-wrap property. Initial value: wrap. Inherited.

text-wrap-mode

text-wrap-mode: wrap | nowrap

The CSS text-wrap-mode property. Initial value: wrap. Inherited.

text-wrap-style

text-wrap-style: auto | balance | stable | pretty

The CSS text-wrap-style property. Initial value: auto. Inherited.

white-space-collapse

white-space-collapse: collapse | preserve | preserve-breaks | preserve-spaces | break-spaces

The CSS white-space-collapse property. Initial value: collapse. Inherited.

word-break

word-break: normal | break-all | keep-all | break-word | auto-phrase

The CSS word-break property. Initial value: normal. Inherited.

word-wrap

word-wrap: normal | break-word

The CSS word-wrap property. Initial value: normal. Inherited.

Properties — CSS Text Decoration

text-decoration-color

text-decoration-color: <color>

The CSS text-decoration-color property. Initial value: currentcolor. Not inherited.

text-decoration-inset

text-decoration-inset: <length-percentage>{1,2} | auto

The CSS text-decoration-inset property. Initial value: 0. Not inherited.

text-decoration-line

text-decoration-line: none | [ underline || overline || line-through || blink ] | spelling-error | grammar-error

The CSS text-decoration-line property. Initial value: none. Not inherited.

text-decoration-skip

text-decoration-skip: none | [ objects || [ spaces | [ leading-spaces || trailing-spaces ] ] || edges || box-decoration ]

The CSS text-decoration-skip property. Initial value: objects. Inherited.

text-decoration-skip-ink

text-decoration-skip-ink: auto | all | none

The CSS text-decoration-skip-ink property. Initial value: auto. Inherited.

text-decoration-style

text-decoration-style: solid | double | dotted | dashed | wavy

The CSS text-decoration-style property. Initial value: solid. Not inherited.

text-decoration-thickness

text-decoration-thickness: auto | from-font | <length> | <percentage>

The CSS text-decoration-thickness property. Initial value: auto. Not inherited.

text-emphasis

text-emphasis: <'text-emphasis-style'> || <'text-emphasis-color'>

The CSS text-emphasis property. Initial value: text-emphasis-style,text-emphasis-color. Inherited.

text-emphasis-color

text-emphasis-color: <color>

The CSS text-emphasis-color property. Initial value: currentcolor. Inherited.

text-emphasis-position

text-emphasis-position: auto | [ over | under ] && [ right | left ]?

The CSS text-emphasis-position property. Initial value: auto. Inherited.

text-emphasis-style

text-emphasis-style: none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string>

The CSS text-emphasis-style property. Initial value: none. Inherited.

text-underline-offset

text-underline-offset: auto | <length> | <percentage>

The CSS text-underline-offset property. Initial value: auto. Inherited.

text-underline-position

text-underline-position: auto | from-font | [ under || [ left | right ] ]

The CSS text-underline-position property. Initial value: auto. Inherited.

Properties — CSS Transforms

backface-visibility

backface-visibility: visible | hidden

The CSS backface-visibility property. Initial value: visible. Not inherited.

perspective-origin

perspective-origin: <position>

The CSS perspective-origin property. Initial value: 50% 50%. Not inherited.

rotate

rotate: none | <angle> | [ x | y | z | <number>{3} ] && <angle>

The CSS rotate property. Initial value: none. Not inherited.

scale

scale: none | [ <number> | <percentage> ]{1,3}

The CSS scale property. Initial value: none. Not inherited.

transform-box

transform-box: content-box | border-box | fill-box | stroke-box | view-box

The CSS transform-box property. Initial value: view-box. Not inherited.

transform-style

transform-style: flat | preserve-3d

The CSS transform-style property. Initial value: flat. Not inherited.

translate

translate: none | <length-percentage> [ <length-percentage> <length>? ]?

The CSS translate property. Initial value: none. Not inherited.

Properties — CSS Transitions

transition-behavior

transition-behavior: <transition-behavior-value>#

The CSS transition-behavior property. Initial value: normal. Not inherited.

transition-delay

transition-delay: <time>#

The CSS transition-delay property. Initial value: 0s. Not inherited.

Properties — CSS Values and Units

interpolate-size

interpolate-size: numeric-only | allow-keywords

The CSS interpolate-size property. Initial value: numeric-only. Inherited.

link-parameters

link-parameters: none | <param()>#

The CSS link-parameters property. Initial value: none. Not inherited.

Properties — CSS View Transitions

view-transition-class

view-transition-class: none | <custom-ident>+

The CSS view-transition-class property. Initial value: none. Not inherited.

view-transition-name

view-transition-name: none | <custom-ident> | match-element

The CSS view-transition-name property. Initial value: none. Not inherited.

view-transition-scope

view-transition-scope: none | all

The CSS view-transition-scope property. Initial value: none. Not inherited.

Properties — CSS Viewport

zoom

zoom: normal | reset | <number [0,∞]> || <percentage [0,∞]>

The CSS zoom property. Initial value: 1. Not inherited.

Properties — CSS Writing Modes

direction

direction: ltr | rtl

The CSS direction property. Initial value: ltr. Inherited.

text-combine-upright

text-combine-upright: none | all | [ digits <integer>? ]

The CSS text-combine-upright property. Initial value: none. Inherited.

text-orientation

text-orientation: mixed | upright | sideways

The CSS text-orientation property. Initial value: mixed. Inherited.

unicode-bidi

unicode-bidi: normal | embed | isolate | bidi-override | isolate-override | plaintext

The CSS unicode-bidi property. Initial value: normal. Not inherited.

writing-mode

writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

The CSS writing-mode property. Initial value: horizontal-tb. Inherited.

Properties — Filter Effects

backdrop-filter

backdrop-filter: none | <filter-value-list>

The CSS backdrop-filter property. Initial value: none. Not inherited.

color-interpolation-filters

color-interpolation-filters: auto | sRGB | linearRGB

The CSS color-interpolation-filters property. Initial value: linearRGB. Inherited.

flood-color

flood-color: <color>

The CSS flood-color property. Initial value: black. Not inherited.

flood-opacity

flood-opacity: <'opacity'>

The CSS flood-opacity property. Initial value: black. Not inherited.

lighting-color

lighting-color: <color>

The CSS lighting-color property. Initial value: white. Not inherited.

Properties — MathML

math-depth

math-depth: auto-add | add(<integer>) | <integer>

The CSS math-depth property. Initial value: 0. Inherited.

math-shift

math-shift: normal | compact

The CSS math-shift property. Initial value: normal. Inherited.

math-style

math-style: normal | compact

The CSS math-style property. Initial value: normal. Inherited.

Properties — Motion Path

offset

offset: [ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?

The CSS offset property. Initial value: offset-position,offset-path,offset-distance,offset-anchor,offset-rotate. Not inherited.

offset-anchor

offset-anchor: auto | <position>

The CSS offset-anchor property. Initial value: auto. Not inherited.

offset-distance

offset-distance: <length-percentage>

The CSS offset-distance property. Initial value: 0. Not inherited.

offset-path

offset-path: none | <offset-path> || <coord-box>

The CSS offset-path property. Initial value: none. Not inherited.

offset-position

offset-position: normal | auto | <position>

The CSS offset-position property. Initial value: normal. Not inherited.

offset-rotate

offset-rotate: [ auto | reverse ] || <angle>

The CSS offset-rotate property. Initial value: auto. Not inherited.

Properties — Pointer Events

touch-action

touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation

The CSS touch-action property. Initial value: auto. Not inherited.

Properties — Scalable Vector Graphics

cx

cx: <length> | <percentage>

The CSS cx property. Initial value: 0. Not inherited.

cy

cy: <length> | <percentage>

The CSS cy property. Initial value: 0. Not inherited.

d

d: none | path(<string>)

The CSS d property. Initial value: none. Not inherited.

fill

fill: <paint>

The CSS fill property. Initial value: black. Inherited.

fill-opacity

fill-opacity: <'opacity'>

The CSS fill-opacity property. Initial value: 1. Inherited.

fill-rule

fill-rule: nonzero | evenodd

The CSS fill-rule property. Initial value: nonzero. Inherited.

marker-end

marker-end: none | <url>

The CSS marker-end property. Initial value: none. Inherited.

marker-mid

marker-mid: none | <url>

The CSS marker-mid property. Initial value: none. Inherited.

marker-start

marker-start: none | <url>

The CSS marker-start property. Initial value: none. Inherited.

paint-order

paint-order: normal | [ fill || stroke || markers ]

The CSS paint-order property. Initial value: normal. Inherited.

path-length

path-length: none | <length> [0,∞]

The CSS path-length property. Initial value: none. Not inherited.

r

r: <length> | <percentage>

The CSS r property. Initial value: 0. Not inherited.

rx

rx: <length-percentage> | auto

The CSS rx property. Initial value: auto. Not inherited.

ry

ry: <length-percentage> | auto

The CSS ry property. Initial value: auto. Not inherited.

shape-rendering

shape-rendering: auto | optimizeSpeed | crispEdges | geometricPrecision

The CSS shape-rendering property. Initial value: auto. Inherited.

stop-color

stop-color: <'color'>

The CSS stop-color property. Initial value: black. Not inherited.

stop-opacity

stop-opacity: <'opacity'>

The CSS stop-opacity property. Initial value: black. Not inherited.

stroke

stroke: <paint>

The CSS stroke property. Initial value: stroke-dasharray,stroke-dashoffset,stroke-linecap,stroke-linejoin,stroke-miterlimit,stroke-opacity,stroke-width. Inherited.

stroke-color

stroke-color: <color>

The CSS stroke-color property. Initial value: transparent. Inherited.

stroke-dasharray

stroke-dasharray: none | <dasharray>

The CSS stroke-dasharray property. Initial value: none. Inherited.

stroke-dashoffset

stroke-dashoffset: <length-percentage> | <number>

The CSS stroke-dashoffset property. Initial value: 0. Inherited.

stroke-linecap

stroke-linecap: butt | round | square

The CSS stroke-linecap property. Initial value: butt. Inherited.

stroke-linejoin

stroke-linejoin: miter | miter-clip | round | bevel | arcs

The CSS stroke-linejoin property. Initial value: miter. Inherited.

stroke-miterlimit

stroke-miterlimit: <number>

The CSS stroke-miterlimit property. Initial value: 4. Inherited.

stroke-opacity

stroke-opacity: <'opacity'>

The CSS stroke-opacity property. Initial value: 1. Inherited.

stroke-width

stroke-width: <length-percentage> | <number>

The CSS stroke-width property. Initial value: 1px. Inherited.

text-anchor

text-anchor: start | middle | end

The CSS text-anchor property. Initial value: start. Inherited.

text-rendering

text-rendering: auto | optimizeSpeed | optimizeLegibility | geometricPrecision

The CSS text-rendering property. Initial value: auto. Inherited.

vector-effect

vector-effect: none | non-scaling-stroke | non-scaling-size | non-rotation | fixed-position

The CSS vector-effect property. Initial value: none. Not inherited.

x

x: <length> | <percentage>

The CSS x property. Initial value: 0. Not inherited.

y

y: <length> | <percentage>

The CSS y property. Initial value: 0. Not inherited.

Properties — Scroll-driven Animations

animation-range

animation-range: [ <'animation-range-start'> <'animation-range-end'>? ]#

The CSS animation-range property. Initial value: animation-range-start,animation-range-end. Not inherited.

animation-range-end

animation-range-end: [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#

The CSS animation-range-end property. Initial value: normal. Not inherited.

animation-range-start

animation-range-start: [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#

The CSS animation-range-start property. Initial value: normal. Not inherited.

scroll-timeline

scroll-timeline: [ <'scroll-timeline-name'> <'scroll-timeline-axis'>? ]#

The CSS scroll-timeline property. Initial value: scroll-timeline-name,scroll-timeline-axis. Not inherited.

scroll-timeline-axis

scroll-timeline-axis: [ block | inline | x | y ]#

The CSS scroll-timeline-axis property. Initial value: block. Not inherited.

scroll-timeline-name

scroll-timeline-name: [ none | <dashed-ident> ]#

The CSS scroll-timeline-name property. Initial value: none. Not inherited.

timeline-scope

timeline-scope: none | <dashed-ident>#

The CSS timeline-scope property. Initial value: none. Not inherited.

view-timeline

view-timeline: [ <'view-timeline-name'> [ <'view-timeline-axis'> || <'view-timeline-inset'> ]? ]#

The CSS view-timeline property. Initial value: view-timeline-name,view-timeline-axis. Not inherited.

view-timeline-axis

view-timeline-axis: [ block | inline | x | y ]#

The CSS view-timeline-axis property. Initial value: block. Not inherited.

view-timeline-inset

view-timeline-inset: [ [ auto | <length-percentage> ]{1,2} ]#

The CSS view-timeline-inset property. Initial value: auto. Not inherited.

view-timeline-name

view-timeline-name: [ none | <dashed-ident> ]#

The CSS view-timeline-name property. Initial value: none. Not inherited.

Selectors and cascade

::after

Inserts generated content after an element, often used for clearfixes or decoration.

::before

Inserts generated content before an element. It is not in the DOM and not read reliably by screen readers.

::placeholder

::placeholder

Styles placeholder text. Placeholders are hints, not labels; always keep a visible label.

::selection

Styles text the user has selected.

:active

Matches while an element is being pressed.

:checked

Matches checked radio buttons and checkboxes, or selected options.

:disabled

Matches disabled form controls. It does not constrain normal elements; use :not([disabled]) for pointer rules.

:empty

Matches elements with no children, including whitespace-only text nodes.

:first-child

Matches an element that is the first child of its parent.

:focus

Styles the element that currently has focus. Never remove the outline without a replacement.

:focus-visible

:focus-visible

Matches keyboard focus while avoiding a ring on mouse clicks. The modern accessible default.

:has()

form:has(input:invalid)

Matches an element if it contains something that matches the inner selector.

:hover

Styles an element while the pointer is over it. Never put essential information behind hover only.

:invalid

Matches a control whose value does not satisfy its constraints.

:is()

:is(h1, h2, h3)

Matches any selector in the list and adopts the highest specificity in it. Handy for grouping.

:last-child

Matches an element that is the last child of its parent.

:not()

Excludes elements that match the inner selector. Chain :not() for multiple exclusions.

:nth-child()

li:nth-child(2n)

Matches elements by position among their siblings. Use odd, even or an+b patterns.

:nth-of-type()

p:nth-of-type(2)

Matches by position among siblings of the same tag.

:where()

:where(h1, h2)

Like :is() but with zero specificity, so later rules override it without a fight.

!important

color: red !important;

Forces a declaration above normal cascade rules. Treat it as a warning sign, not a tool.

.class selector

.card { … }

Targets every element with that class. Classes are reusable and belong in stylesheets.

#id selector

#hero { … }

Targets the one element with that id. Prefer classes for styling; ids are for anchors and labels.

Adjacent sibling

h2 + p { … }

Selects the element immediately after another with the same parent.

Attribute selector

a[target="_blank"] { … }

Targets elements by attribute or attribute value. Operators include =, ^=, $=, *= and ~=.

Child combinator

nav > a { … }

Selects only direct children. Safer than descendant when nesting can grow.

Descendant combinator

article p { … }

Selects descendants at any depth, not just direct children.

General sibling

h2 ~ p { … }

Selects every matching sibling after the first element.

Pseudo-class

:hover, :focus, :active

A keyword that selects an element in a particular state without changing the markup.

Pseudo-element

::before, ::after, ::marker

A keyword that selects a part of an element, such as the first line, first letter or a marker.

Specificity

id > class > type

The weight that decides which rule wins. Inline styles beat selectors; !important beats everything.

Type selector

button { … }

Targets every element of that tag name. Great for base styles.

Universal selector

Targets every element. Use sparingly, usually for box-sizing or resets.

The box model

aspect-ratio

aspect-ratio: 16 / 9

Locks a box to a ratio so it reserves space before media loads.

border

border: 1px solid #d8d0c6

Sets width, style and colour of the border in one shorthand.

border-radius

border-radius: 12px

Rounds corners. Use 50% for a circle on a square box.

box-shadow

box-shadow: 0 8px 24px rgb(0 0 0 / 0.12)

Draws shadows outside or inside the box. Multiple shadows are comma-separated.

box-sizing

box-sizing: border-box

Makes width include padding and border. Almost every project should set it globally.

height

Sets the content height. Prefer min-height over fixed heights so content can grow.

margin

margin: 16px auto

Space outside the border. Auto horizontal margins centre a fixed-width block.

margin-block / margin-inline

margin-block: 16px

Logical shorthand for vertical and horizontal margins that follows writing direction.

min-width / max-width

max-width: 60ch

Caps or floors the size. max-width: 100% keeps images inside their container.

object-fit

object-fit: cover

How replaced content such as images fills its box without distorting.

object-position

object-position: center

Chooses the focal point when object-fit crops the media.

outline

outline: 2px solid

A ring drawn outside the border that does not affect layout. Essential for focus styles.

overflow

overflow: hidden

Controls what happens when content is larger than the box: visible, hidden, scroll or auto.

padding

padding: 12px 16px

Space inside the border, between border and content.

width

Sets the content width. With box-sizing: border-box it includes padding and border.

Typography

font-family

font-family: system-ui, sans-serif

A fallback list of fonts. End with a generic family so text always renders.

font-size

font-size: clamp(1rem, 2.5vw, 1.5rem)

The text size. Prefer rem for accessibility, because it respects the user’s root size.

font-style

font-style: italic

Normal, italic or oblique text.

font-variant-numeric

font-variant-numeric: tabular-nums

Chooses numeric glyph styles. Tabular numerals keep columns aligned in tables.

font-weight

font-weight: 600

Thickness of the type: 100–900 or normal/bold. Only use weights the font actually includes.

letter-spacing

letter-spacing: 0.02em

Space between characters. Small positive values can improve uppercase labels.

line-height

line-height: 1.6

Vertical distance between lines. Unitless values scale with font size and are usually safest.

list-style

list-style: disc inside

Sets marker type and position for list items.

overflow-wrap

overflow-wrap: anywhere

Breaks long words that would otherwise overflow their container.

text-align

text-align: center

Aligns inline content: left, right, center, justify or start/end for logical direction.

text-decoration

text-decoration: underline wavy

Decorations such as underline, overline and line-through with style and colour.

text-indent

text-indent: 2em

Indents the first line of a block of text.

text-overflow

text-overflow: ellipsis

Shows an ellipsis when text overflows. Requires overflow:hidden and white-space:nowrap.

text-shadow

text-shadow: 0 1px 2px rgb(0 0 0 / 0.3)

Adds a shadow to the glyphs. Keep it subtle for readability.

text-transform

text-transform: uppercase

Changes letter case visually without changing the underlying text.

user-select

user-select: none

Controls whether text can be selected. Do not block selection on content people may want to copy.

white-space

white-space: nowrap

Controls wrapping and whitespace collapsing.

word-spacing

word-spacing: 0.1em

Extra space between words.

Units

% (percentage)

Relative to the containing block or another property’s value, depending on the property.

cap

The cap height of the current font.

ch

The width of the 0 glyph in the current font. Excellent for readable line lengths.

cm / mm / in

Physical units for print styles. One inch equals 2.54cm.

cqmin / cqmax

One percent of the smaller or larger container dimension.

cqw / cqh

One percent of a container query container’s width or height.

deg

Degrees, used by gradients, rotation and hue.

dpi / dppx

Resolution units for media queries and image sets.

dvh / svh / lvh

Dynamic, small and large viewport heights that account for mobile browser chrome.

em

Relative to the element’s own font size. Compounds when nested.

ex

The x-height of the current font, a measure of lowercase height.

fr

A fraction of the free space in a grid track.

grad

Gradians. A full turn is 400grad.

lh

The line height of the element. Useful for vertical rhythm that follows type.

pt / pc

Print-oriented points and picas. Prefer rem for screen typography.

px

A CSS pixel. The reference unit for borders, shadows and small spacing.

rad

Radians for angles.

rem

Relative to the root font size. Predictable for spacing and type scales.

s / ms

Seconds and milliseconds for durations.

turn

Turns. A full turn is 1turn, which is easier to read than 360deg.

vh

One percent of the viewport height. On mobile, use dvh to avoid browser chrome jumps.

vmin / vmax

One percent of the smaller or larger viewport dimension.

vw

One percent of the viewport width. Ignores scrollbars in some browsers; prefer dvw for full layouts.

Keep going

Turn the reference into recall.

Read the full lesson, then solve the challenge without looking. That is where the knowledge sticks.

Open CSS Essentials Practise this topic Practice challenges