CSS guides

This page lists the guides you can use to learn about various CSS concepts and techniques.

Guides are organized by modules, which reflect how CSS specifications are structured. Each module landing page, such as for CSS box model, provides an overview of the specification, lists the features it provides (such as properties, at-rules, and data types), and shows how they relate to other parts of CSS and the web platform. You can use the module pages as a starting point to navigate through the related guides and dive deeper into reference documentation for specific features.

CSS anchor positioning

The CSS anchor positioning module defines features that allow you to tether elements together. Certain elements are defined as anchor elements; anchor-positioned elements can then have their size and position set based on the size and location of the anchor elements to which they are bound.

CSS animations

The CSS animations module lets you animate the values of CSS properties, such as background-position and transform, over time by using keyframes. Each keyframe describes how the animated element should render at a given time during the animation sequence. You can use the properties in the animations module to control the duration, number of repetitions, delayed start, and other aspects of an animation.

CSS backgrounds and borders

The CSS backgrounds and borders module provides properties for adding backgrounds, borders, rounded corners, and box shadows to elements.

CSS basic user interface

The CSS basic user interface module allows you to define the rendering and functionality of features related to the user interface, including outline properties, visual feedback for pointing devices and keyboards, and modifying the default appearance of UI widgets.

CSS borders and box decorations

The CSS borders and box decorations module provides properties for adding borders, shaped corners, and box shadows to elements. This module extends borders and box decorations introduced in the CSS backgrounds and borders module, adding corner-shape and border-shape properties, logical border-radius properties, longhand properties for the box-shadow property, and properties to create partial borders.

CSS box alignment

The CSS box alignment module specifies CSS features relating to the alignment of boxes within their containers. It defines the alignment of the various CSS box layout models including block layout, table layout, flexible box layout (flexbox), and grid layout, creating a consistent alignment method across all of CSS.

CSS box model

The CSS box model module defines the margin and padding properties, which along with the height, width and border properties, make up the CSS box model.

CSS box sizing

The CSS box sizing module enables you to specify how elements fit their content or fit into a particular layout context. It defines sizing, minimum sizing, and maximum sizing properties, and also extends the CSS sizing properties with keywords that represent content-based intrinsic size and context-based extrinsic size.

CSS cascading and inheritance

The CSS cascading and inheritance module defines the rules for assigning values to properties by way of cascading and inheritance. This module specifies the rules for finding the specified value for all properties on all elements.

CSS color adjustment

The CSS color adjustment module provides a model and controls automatic color adjustment by the user agent to handle user preferences, such as "Dark Mode", contrast adjustment, and other color scheme preferences.

CSS colors

The CSS colors module defines colors, color types, color blending, opacity, and how you can apply these colors and effects to HTML content.

CSS compositing and blending

The CSS compositing and blending module defines how an element's background layers can be blended together, how an element can be blended with its container, and whether the element must create a new stacking context.

CSS conditional rules

The CSS conditional rules module defines CSS media and support queries, enabling you to define styles that are only applied if specific conditions are met. The conditional rules defined in this module are based on device, user-agent, and viewport capabilities. With conditional rules, you can target CSS styles based on query values or browser and device features, independent of the document being rendered.

CSS containment

The CSS containment module defines containment and container queries.

CSS counter styles

The CSS counter styles module lets you define your own counter styles to manage the appearance of markers in lists and counters in generated content. It also enables you to extend native browser list styles with your own customizations.

CSS custom functions and mixins

The CSS custom functions and mixins module allows developers to create reusable blocks of CSS code that can accept arguments, contain complex logic (defined using features such as CSS if() functions and @media at-rules), and return values based on that logic.

CSS custom highlight API

The CSS custom highlight API module provides a programmatic way to target specific ranges of text defined by range objects, without affecting the underlying DOM structure. The range objects can then be selected via ::highlight() pseudo-elements, and have highlight styles added and removed. The features of this module can create highlight effects similar to how text editors highlight spelling or grammar errors, and code editors highlight syntax errors.

CSS custom properties for cascading variables

The CSS custom properties for cascading variables module adds support for cascading variables in CSS properties and lets you create custom properties to define these variables along with the mechanisms to use custom properties as the values for other CSS properties.

CSS display

The CSS display module defines how the CSS formatting box tree is generated from the document element tree and defines properties controlling it.

CSS easing functions

The CSS easing functions module defines easing functions, which provide a means to control the transformation of values. The functions defined include linear, cubic bezier, and step easing functions. These easing functions can be applied to animations and transitions.

CSS environment variables

The CSS environment variables module defines the concept of environment variables and the env function. Environment variables work similarly to custom properties and the var function, except that they are globally defined; they are global variables scoped to the entire document. They are user agent values, provided by the browser or operating system, you can access using the env function enabling you to adapt your styles to the user's device or context.

CSS filter effects

The properties in the CSS filter effects module let you define a way of processing an element's rendering before the element is displayed in the document. Examples of such effects include blurring and changing the intensity of the color of an element.

CSS flexible box layout

The CSS flexible box layout module defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.

CSS font loading

The CSS font loading module describes events and interfaces used for dynamically loading font resources.

CSS fonts

The CSS fonts module defines font-related properties and how font resources are loaded. It lets you define the style of a font, such as its family, size and weight, and the glyph variants to use when multiple are available for a single character.

CSS fragmentation

The CSS fragmentation module defines how content is displayed when it is broken (fragmented) and flows across multiple pages, regions, or columns. This module defines features for pagination, breaking variable fragment size and orientation, widows and orphans.

CSS generated content

The CSS generated content module defines how an element's content can be replaced and content can be added to a document with CSS.

CSS grid layout

The CSS grid layout module excels at dividing a page into major regions or defining the relationship in terms of size, position, and layering between parts of a control built from HTML primitives.

CSS images

The CSS images module defines the types of images that can be used (the <image> type, containing URLs, gradients and other types of images), how to resize them and how they, and other replaced content, interact with the different layout models.

CSS inline layout

The CSS inline layout module defines the block-axis alignment and sizing of inline-level content and adds a special layout mode for drop-caps. It describes the CSS formatting model for a flow of elements and text inside a container to be wrapped across multiple lines.

CSS lists and counters

The CSS lists and counters module enables styling and positioning of list item bullets and manipulating their values with a combination of strings, counters, and other features.

CSS logical properties and values

The CSS logical properties and values module defines logical properties and values that can control layout through logical rather than physical direction and dimension mappings. Logical properties define direction‐relative equivalents to their corresponding physical properties.

CSS masking

The CSS masking module defines masking and clipping, two different graphical operations that are used to partially or fully hide portions of visual elements.

CSS media queries

The CSS media queries module enables testing and querying of viewport values and browser or device features, to conditionally apply CSS styles based on the current user environment. Media queries are used in the CSS @media rule and other contexts and languages such as HTML and JavaScript.

CSS motion path

The CSS motion path module allows authors to animate any graphical object along a custom path.

CSS multi-column layout

The CSS multi-column layout module lets you divide content across multiple columns. By using the properties in this module, you can define the preferred number and width of columns, the gap size between columns, and the visual appearance of the optional column dividing lines (known as column rules). You can also define how content should flow from column to column and how to break content between columns.

CSS namespaces

The CSS namespaces module defines the syntax for using namespaces in CSS.

CSS nesting

The CSS nesting module defines a syntax for nesting selectors, providing the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule.

CSS overflow

The CSS overflow module properties enable you to handle scrollable overflow in visual media.

CSS overscroll behavior

The CSS overscroll behavior module provides properties to control the behavior of a scroll container when its scroll position reaches the scroll boundary. Controlling this aspect is particularly useful in scenarios where embedded scrollable areas should not trigger scrolling of the parent container.

CSS paged media

The CSS paged media module defines the properties that control the presentation of content for print or any other media that splits content into discrete pages. It allows you to set page breaks, control printable areas, and style left and right pages differently.

CSS positioned layout

The CSS positioned layout module defines the coordinate-based positioning and offsetting schemes available in CSS and the properties used to position and stack elements on a web page. The module is best known for defining the basic positioning methods, including relative positioning, sticky positioning, absolute positioning, and fixed positioning. It also defines how positioned elements are painted and layered, clarifying stacking behavior and visual order.

CSS properties and values API

The CSS properties and values API module defines a method for registering new CSS properties, defining the property's data type, inheritance behavior, and, optionally, an initial value. This API expands on CSS custom properties for cascading variables module, which allows authors to define custom properties in CSS using two dash syntax (--). The CSS properties and values API is part of the CSS Houdini umbrella of APIs.

CSS pseudo-elements

The CSS pseudo-element module defines abstract elements that are not directly present in the document tree. These abstract elements, called pseudo-elements, represent portions of the render tree that can be selected and styled. Pseudo-elements are used to create abstractions about the document tree beyond those provided by the document tree.

CSS round display

The CSS round display module defines CSS extensions to support a round display, such as wrist-watches, to help developers build web pages suitable for those devices.

CSS ruby layout

The CSS ruby layout module provides the rendering model and formatting controls related to the display of ruby annotations. Ruby annotations are a form of interlinear annotation, consisting of short runs of text alongside the base text. They are typically used in East Asian documents to indicate pronunciation or define meaning.

CSS scoping

The CSS scoping module defines the CSS scoping and encapsulation mechanisms, focusing on the Shadow DOM scoping mechanism.

CSS scroll anchoring

The CSS scroll anchoring module defines a mechanism to prevent page movement due to DOM changes above the visible region of a scrolling box while the user is consuming the visible content.

CSS scroll snap

The CSS scroll snap module provides properties that let you control the panning and scrolling behavior by defining snap positions. Content can be snapped into position as the user scrolls overflowing content within a scroll container, providing paging and scroll positioning.

CSS scroll-driven animations

The CSS scroll-driven animations module provides functionality that builds on the CSS animations module and Web Animations API. It allows you to animate property values along a scroll-based timeline rather than the default time-based document timeline. This means that you can animate an element by scrolling the element, its scroll container, or its root element, rather than just by the passing of time.

CSS scrollbars styling

The CSS scrollbars styling module defines properties that you can use for visual styling of scrollbars. You can customize the width of the scrollbar as required. You can also customize the color of the scrollbar track, which is the background of the scrollbar, and the color of the scrollbar thumb, which is the draggable handle of the scrollbar.

CSS selectors

The CSS selectors module defines the patterns to select elements to which a set of CSS rules are then applied along with their specificity. The CSS selectors module provides us with more than 60 selectors and five combinators. Other modules provide additional pseudo-class selectors and pseudo-elements.

CSS shadow parts

The CSS shadow parts module defines the ::part pseudo-element that can be set on a shadow host. Using this pseudo-element, you can enable shadow hosts to expose the selected element in the shadow tree to the outside page for styling purposes.

CSS shapes

The CSS shapes module describes geometric shapes. It also defines CSS properties that can use the shapes to control the geometry of an element's float area; this area can then be applied to exclusions, or specify an element's content area.

CSS syntax

The CSS syntax module describes, in general terms, the structure and syntax of cascading stylesheets, or CSS. It defines CSS as the language for describing the rendering of structured documents (such as HTML and XML), on the web and elsewhere.

CSS table

The CSS table module helps you define how to lay out table data.

CSS text

The CSS text module defines how to perform text manipulation, like line breaking, justification and alignment, white space handling, and text transformation.

CSS text decoration

The CSS text decoration module defines features relating to text decoration, such as underlines, text shadows, and emphasis marks. Text decoration features can provide visual cues for spelling errors, grammar issues, and links. These features can help improve the usability, accessibility, functionality, and aesthetics of your text.

CSS transforms

The CSS transforms module defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.

CSS transitions

The CSS transitions module specifies functionality for creating gradual transitions between different CSS property values. The behavior of these transitions can be controlled by specifying their easing function, duration, and other values.

CSS values and units

Every CSS declaration consists of a property/value pair. The value can take various forms depending on the property, such as a single integer, keyword, function, or a combination of different items; some values have units, while others do not. Every property also accepts the CSS-wide values. The CSS values and units module defines the data types — values and units — that CSS properties accept. This module also defines the CSS value definition syntax, or formal grammar, used to define the set of valid values for every CSS property and function.

CSS view transitions

The CSS view transitions module defines the behavior of the View Transition API, which allows developers to create animated transitions between different states within a document and across documents. This module also defines the CSS properties and pseudo-elements for styling these transitions.

CSS viewport

The CSS viewport module enables specifying the size, zoom factor, and orientation of the user-agent's initial containing block, or viewport.

CSS writing modes

The CSS writing modes module defines support for various international writing modes and their combinations, including left-to-right and right-to-left text ordering as well as horizontal and vertical orientations.

CSSOM view

The CSSOM view module lets you manipulate the visual view of a document, including getting the position of element layout boxes, obtaining the width or height of the viewport through script, and also scrolling an element.