Cascading Style Sheets (CSS) Working Group - Publications

CSS 2.1 is derived from and is intended to replace CSS2. It supports media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc. It also supports content positioning, table layout, features for internationalization and some properties related to user interface. CSS 2.1 corrects a few errors in CSS2 (the most important being a new definition of the height/width of absolutely positioned elements, more influence for HTML's "style" attribute and a new calculation of the 'clip' property), and adds a few highly requested features which have already been widely implemented. But most of all CSS 2.1 represents a "snapshot" of CSS usage: it consists of all CSS features that are implemented interoperably at the date of publication of the Recommendation.

This section is informative.

CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents on screen, on paper, in speech, etc. It uses various selectors, properties and values to style basic user interface elements in a document. This specification describes those user interface related selectors, properties and values that are proposed for CSS level 3 to style HTML and XML (including XHTML and XForms). It includes and extends user interface related features from the selectors, properties and values of CSS level 2 revision 1 and Selectors specifications.

This CSS module describes how to collate style rules and assign values to all properties on all elements. By way of cascading and inheritance, values are propagated for all properties on all elements.

CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents on screen, on paper, in speech, etc. It uses color-related properties and values to color the text, backgrounds, borders, and other parts of elements in a document. This specification describes color values and properties for foreground color and group opacity. These include properties and values from CSS level 2 and new values.

This CSS module describes the contain property, which indicates that the element’s subtree is independent of the rest of the page. This enables heavy optimizations by user agents when used well.

This CSS3 module describes how font properties are specified and how font resources are loaded dynamically. The contents of this specification are a consolidation of content previously divided into CSS3 Fonts and CSS3 Web Fonts modules.

This CSS Namespaces module defines the syntax for using namespaces in CSS. It defines the @namespace rule for declaring the default namespace and binding namespaces to namespace prefixes, and it also defines a syntax that other specifications can adopt for using those prefixes in namespace-qualified names.

Describes the syntax and interpretation of the CSS fragment that can be used in "style" attributes inside mark-up, e.g., in HTML, SVG and MathML.

This module specifies the text layout model in CSS and the properties that control it. It covers bidirectional and vertical text.

HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. ‘screen’ and ‘print’ are two media types that have been defined. Media queries extend the functionality of media types by allowing more precise labeling of style sheets.

A media query consists of a media type and zero or more expressions to limit the scope of style sheets. Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

Selectors are patterns that match against elements in a tree. Selectors have been optimized for use with HTML and XML, and are designed to be usable in performance-critical code.

CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents on screen, on paper, in speech, etc. CSS uses Selectors for binding style properties to elements in the document. This document describes extensions to the selectors defined in CSS level 2. These extended selectors will be used by CSS level 3.

Selectors define the following function:

 expression ∗ element → boolean 

That is, given an element and a selector, this specification defines whether that element matches the selector.

These expressions can also be used, for instance, to select a set of elements, or a single element from a set of elements, by evaluating the expression across all the elements in a subtree. STTS (Simple Tree Transformation Sheets), a language for transforming XML trees, uses this mechanism. [STTS]

This document collects together into one definition all the specs that together form the current state of Cascading Style Sheets (CSS) as of 2021. The primary audience is CSS implementers, not CSS authors, as this definition includes modules by specification stability, not Web browser adoption rate.

CSS is a simple, declarative language for creating style sheets that specify the rendering of HTML and other structured documents. This specification is part of level 3 of CSS (“CSS3”) and contains features to describe layouts at a high level, meant for tasks such as the positioning and alignment of “widgets” in a graphical user interface or the layout grid for a page or a window, in particular when the desired visual order is different from the order of the elements in the source document. Other CSS3 modules contain properties to specify fonts, colors, text alignment, list numbering, tables, etc.

The features in this module are described together for easier reading, but are usually not implemented as a group. CSS3 modules often depend on other modules or contain features for several media types. Implementers should look at the various “profiles” of CSS, which list consistent sets of features for each type of media.

This specification describes the margin and padding properties, which create spacing in and around a CSS box.

Compositing describes how shapes of different elements are combined into a single image by overlaying, masking, blending, etc. The specification also defines a syntax for using compositing in CSS.

By way of cascading and inheritance, values are propagated for all properties on all elements. New in level 4 are the 'default' keyword and for the @import rule.

This CSS module describes how to collate style rules and assign values to all properties on all elements. By way of cascading and inheritance, values are propagated for all properties on all elements.

This module contains the features of CSS for conditional processing of parts of style sheets, conditioned on capabilities of the processor or the document the style sheet is being applied to. It includes and extends the functionality of CSS level 2, which builds on CSS level 1. The main extensions compared to level 2 are allowing nesting of certain at-rules inside @media, and the addition of the @supports rule for conditional processing.

CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc.

This module contains the features of CSS for conditional processing of parts of style sheets. The main extensions compared to level 2 are allowing nesting of certain at-rules inside @media, and the addition of the @supports rule for conditional processing.

This module introduces the @counter-style rule, which allows authors to define their own custom counter styles for use with CSS list-marker and generated-content counters [CSS-LISTS-3]. It also predefines a set of common counter styles, including the ones present in CSS2 and CSS2.1.

This module contains features of CSS relating to variables. A variable is a type of value that is accepted by all properties and several properties can share the same variable.

The CSS Display Module contains the features of CSS relating to the 'display' property and some other box-generation details.

The draft describes a CSS box model optimized for interface design. It provides an additional layout system alongside the ones already in CSS. [CSS21] In this new box model, the children of a box are laid out either horizontally or vertically, and unused space can be assigned to a particular child or distributed among the children by assignment of “flex” to the children that should expand. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

This CSS module defines the style properties that specify the points in a document where text may be broken to start a new page, a new column, or any similar kind of region.

This specification describes multi-column layouts in CSS, a style sheet language for the web. Using functionality described in the specification, content can be flowed into multiple columns with a gap and a rule between them.

This module contains features to control panning and scrolling behavior with “snap positions”.

CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc.

CSS Scrollbars standardizes the ability to color scrollbars introduced in 2000 by Windows IE 5.5. This is useful when building web applications which use color schemes very different from the appearance of default platform scrollbars.

CSS transforms allows elements styled with CSS to be transformed in two-dimensional or three-dimensional space.

This CSS3 module describes the various values and units that CSS properties accept. Also, it describes how values are computed from "specified" (which is what the cascading process yields) through "computed" and "used" into "actual" values. The main purpose of this module is to define common values and units in one specification which can be referred to by other modules. As such, it does not make sense to claim conformance with this module alone.

CSS Writing Modes Level 4 defines CSS support for various international writing modes, such as left-to-right (e.g. Latin or Indic), right-to-left (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and Arabic) and vertical (e.g. Asian scripts).

This specification provides basic geometric interfaces.

This draft contains the features of CSS relating to borders and backgrounds. The main extensions compared to level 2 are borders consisting of images, boxes with multiple backgrounds, boxes with rounded corners and boxes with shadows.

This module introduces a model and controls over automatic color adjustment by the user agent to handle user preferences, such as "Dark Mode", contrast adjustment, or specific desired color schemes.

This specification describes CSS <color> values and properties for foreground color and group opacity.

This CSS module describes a way for authors to define a transformation to be applied to the time of an animation. This can be used to produce animations that mimic physical phenomena such as momentum or to cause the animation to move in discrete steps producing robot-like movement.

The Grid Layout module of CSS allows designers to define invisible grids of horizontal and vertical lines. Elements from a document can then be anchored to points in the grid, which allows them to be visually aligned to each other, even if they are not next to each other in the source.

This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid. Level 2 expands Grid by adding “subgrid” capabilities for nested grids to participate in the sizing of their parent grids; and aspect-ratio–controlled gutters.

The draft defines how to refer to images and other external objects from within CSS, including fallback images in different formats, special URLs for vector images of color gradients, and different ways to set the size of images and other objects.

CSS Masking provides two means for partially or fully hiding portions of visual elements: masking and clipping.

Masking describes how to use another graphical element or image as a luminance or alpha mask. Typically, rendering an element via CSS or SVG can conceptually be described as if the element, including its children, are drawn into a buffer and then that buffer is composited into the element’s parent. Luminance and alpha masks influence the transparency of this buffer before the compositing stage.

Clipping describes the visible region of visual elements. The region can be described by using certain SVG graphics elements or basic shapes. Anything outside of this region is not rendered.

This specification describes an API which allows developers to paint a part of an box in response to geometry / computed style changes with an additional <image> function.

CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents on screen, on paper, in speech, etc. CSS defines aural properties that give control over rendering XML to speech. This draft describes the text to speech properties proposed for CSS level 3. These are designed for match the model described in the Speech Synthesis Markup Language (SSML) Version 1.0 [SSML10]

The CSS3 Speech Module is a community effort and if you would like to help with implementation and driving the specification forward along the W3C Recommendation track, please contact the editors.

This CSS3 module describes the basic structure of CSS style sheets, some of the details of the syntax, and the rules for parsing CSS style sheets. It also describes (in some cases, informatively) how stylesheets can be linked to documents and how those links can be media-dependent. Additional details of the syntax of some parts of CSS described in other modules will be described in those modules. The selectors module has a grammar for selectors. Modules that define properties give the grammar for the values of those properties, in a format described in this document.

This module contains the features of CSS relating to text decoration, such as underlines, text shadows, and emphasis marks.

This CSS module defines properties for text manipulation and specifies their processing model. It covers line breaking, justification and alignment, white space handling, and text transformation.

The 'will-change' property allows an author to inform the UA what kinds of style changes are likely to be made to an element, e.g., as a result of animations or other dynamic effects. This allows the UA to optimize how it handles the element.

Media Queries allow authors to test and query values or features of the user agent or display device, independent of the document being rendered.

CSS Animations allow an author to modify CSS property values over time.

CSS Basic UI Level 4 describes CSS properties and values to style basic user interface elements.

This module contains the features of CSS relating to the alignment of boxes within their containers in the various CSS box layout models: block layout, table layout, flex layout, and grid layout.

This specification describes the margin and padding properties, which create spacing in and around a CSS box. It may later be extended to include borders (currently described in [css-backgrounds-3]).

This module of CSS defines keywords for the 'width' and 'height' properties to allow a designer to specify that an element should be as small as possible, as large as possible, or as large as possible up to the limit of its containing block. The 'width' and 'height' properties themselves are defined in the CSS Box Model.

This module extends the CSS sizing properties with keywords that represent content-based "intrinsic" sizes and context-based "extrinsic" sizes, allowing CSS to more easily describe boxes that fit their content or fit into a particular layout context. This is a delta spec over CSS Sizing Level 3.

This CSS module describes how to collate style rules and assign values to all properties on all elements. By way of cascading and inheritance, values are propagated for all properties on all elements.

This module extends CSS Color 4 to add color modification functions.

This CSS module describes the contain property, which indicates that the element’s subtree is independent of the rest of the page. This enables heavy optimizations by user agents when used well.

This CSS module describes the contain property, which indicates that the element’s subtree is independent of the rest of the page. This enables heavy optimizations by user agents when used well.

This CSS module describes a mechanism for styling arbitrary ranges of a document identified by script.

This specification provides a way for an author to specify, in CSS, the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.

The module defines (1) properties to assign a shape (circle or polygon) to CSS boxes, to control the line length more precisely than with margins; (2) properties to define how text in other boxes wraps around such a shaped box; and (3) properties to turn an absolutely positioned box into an exclusion, causing text to wrap around it, too.

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

This specification defines modifications to the existing CSS Fonts 3 specification along with additional features.

This specification defines modifications to the existing CSS Fonts 4 specification along with additional features.

This module describes features often used in printed publications. In particular, this specification describes how CSS style sheets can express running headers and footers, leaders, cross-references, footnotes, sidenotes, named flows, hyphenation, new counter styles, character substitution, image resolution, page floats, advanced multi-column layout, conditional content, crop and cross marks, bookmarks, CMYK colors, continuation markers, change bars, line numbers, named page lists, and generated lists. Along with two other CSS3 modules – multi-column layout and paged media – this module offers advanced functionality for presenting structured documents on paged media.

This CSS3 Module describes how to insert content in a document.

The specification describes how CSS uses images: external images linked via a URL, sets of fallback images and various built-in color gradients. Images can be resized or cropped.

This module describes the positioning in the block progression direction both of elements and text within lines and of the lines themselves. It also describes special features for formatting of first lines and drop caps.

This module contains CSS features for aligning content to a baseline grid.

This CSS level 3 module describes how lists are styled.

CSS Logical Properties and Values Level 1 defines properties that indirectly set certain other CSS properties (including width, margin, float, text-align and page-break) based on the writing mode: left-to-right, right-to-left or top-to-bottom. They are useful in simple, generic style sheets, such as User Agent style sheets, but may also save a few lines in styles for documents with both left-to-right and right-to-left text.

This module introduces the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule. This increases the modularity and maintainability of CSS stylesheets.

CSSOM defines APIs (including generic parsing and serialization rules) for Media Queries, Selectors, and CSS itself.

CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. This module contains the features of CSS relating to new mechanisms of overflow handling in visual media (e.g., screen or paper). In interactive media, it describes features that allow the overflow from a fixed size container to be handled by pagination (displaying one page at a time). It also describes features, applying to all visual media, that allow the contents of an element to be spread across multiple fragments, allowing the contents to flow across multiple regions or to have different styles for different fragments.

CSS Overflow allows the contents of an element to be spread across multiple fragments, allowing the contents to flow across multiple regions or to have different styles for different fragments.

This module describes the page model that partitions a flow into pages. It builds on the Box model module and introduces and defines the page model and paged media. It adds functionality for pagination, page margins, page size and orientation, headers and footers, widows and orphans, and image orientation. Finally it extends generated content to enable page numbering and running headers / footers.

CSS Positioned Layout defines the five ways to lay out elements with CSS: four ways from CSS level 2 ('static', 'relative', 'absolute' and 'fixed') and a fifth way, to position elements relative to a page box.

This CSS module defines an API for registering new CSS properties. Properties registered using this API are provided with a parse syntax that defines a type, inheritance behaviour, and an initial value.

This CSS module defines pseudo-elements, abstract elements that represent portions of the CSS render tree that can be selected and styled.

The CSS Regions specification defines CSS properties to distribute the content of one element over multiple, disconnected regions, such as the regions defined by CSS Grid Layout.

CSS Round Display Level 1 describes CSS features to help authors build a Web page suitable for a round display. It extends CSS modules such as Media Queries, CSS Shapes, Borders, and Positioned Layout.

The set of CSS properties proposed in this document can be used in combination with the ruby elements of HTML to produce the stylistic effects needed to display ruby text appropriately relative to base text.

Changes in DOM elements above the visible region of a scrolling box can result in the page moving while the user is in the middle of consuming the content.

This spec proposes a mechanism to mitigate this jarring user experience by keeping track of the position of an anchor node and adjusting the scroll offset accordingly.

This spec also proposes an API for web developers to opt-out of this behavior.

This specification defines a general model for navigating the focus using the arrow keys, as well as related CSS, JavaScript features and Events.

This CSS module defines a two-dimensional grid-based layout system, optimized for tabular data rendering. In the table layout model, each display node is assigned to an intersection between a set of consecutive rows and a set of consecutive columns, themselves generated from the table structure and sized according to their content.

This module contains the features of CSS relating to text decoration, such as underlines, text shadows, and emphasis marks.

This module defines properties for text manipulation and specifies their processing model. It covers line breaking, justification and alignment, white space handling, and text transformation.

CSS Transforms 2 adds new transform functions and properties for three-dimensional transforms, and convenience functions for simple transforms.

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.

Converting CSSOM value strings into meaningfully typed JavaScript representations and back can incur a significant performance overhead. This specification exposes CSS values as typed JavaScript objects to facilitate their performant manipulation.

CSS Values and Units 4 describes the common values and units that CSS properties accept, and the syntax used for describing them in CSS property definitions.

This module defines the View Transition API, along with associated properties and pseudo-elements.

The APIs introduced by this specification provide authors with a way to inspect and manipulate the view information of a document. This includes getting the position of element layout boxes, obtaining the width of the viewport through script, and also scrolling an element.

Filter effects are a way of processing an element's rendering before it is displayed in the document. Typically, rendering an element via CSS or SVG can conceptually described as if the element, including its children, are drawn into a buffer (such as a raster image) and then that buffer is composited into the elements parent. Filters apply an effect before the compositing stage. Examples of such effects are blurring, changing color intensity and warping the image.

Although originally designed for use in SVG, filter effects are a set a set of operations to apply on an image buffer and therefore can be applied to nearly any presentational environment, including CSS. They are triggered by a style instruction (the ‘filter’ property). This specification describes filters in a manner that allows them to be used in content styled by CSS, such as HTML and SVG. It also defines a CSS property value function that produces a CSS value.

Media Queries allow authors to test and query values or features of the user agent or display device, independent of the document being rendered. They are used in the CSS @media rule to conditionally apply styles to a document, and in various other contexts and languages, such as HTML and JavaScript.

The Motion Path module of CSS defines an additional way to define the position and rotation of elements when rendering a document. The position is given by a trajectory and an offset along that trajectory between 0 and 100%. In combination with animations, the offset can also be animated.

Defines an API and markup for creating animations that are tied to the scroll offset of a scroll container.

Selectors are patterns that match against elements in a tree. They are a core component of CSS (Cascading Style Sheets), which uses Selectors to bind style properties to elements in a document.

This specification defines a model for synchronization and timing of changes to the presentation of a Web page. This specification also defines an application programming interface for interacting with this model and it is expected that further specifications will define declarative means for exposing these features.

CSS is a style sheet language that allows authors and users to attach style (e.g., fonts and spacing) to structured documents (e.g., HTML documents and XML applications). CSS 2.2 is the second revision of level 2 of CSS. It corrects a few errors in CSS 2.1.

The Animation Worklet API provides a method to create scripted animations that control a set of animation effects. The API is designed to make it possible for user agents to run such animations in their own dedicated thread to provide a degree of performance isolation from main thread.

This CSS module describes a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior.

This module contains the features of CSS for conditional processing of parts of style sheets, based on capabilities of the processor or the environment the style sheet is being applied in. It includes and extends the functionality of CSS Conditional 4 [css-conditional-4], adding the generalized conditional rule @when and the chained conditional rule @else, as well as introducing font processing queries to the supports query syntax used in @supports rules.

This module contains the features of CSS relating to filling and stroking text and SVG shapes.

This module describes the fragmentation model that partitions a flow into pages, columns, or regions. It builds on the Page model module and introduces and defines the fragmentation model. It adds functionality for pagination, breaking variable fragment size and orientation, widows and orphans.

This specification describes an API which allows developers to layout a box in response to computed style and box tree changes.

This module defines overscroll-behavior to control the behavior when the scroll position of a scroll container reaches the edge of the scrollport. This allows content authors to hint that the boundary default actions, such as scroll chaining and overscroll, should not be triggered.

CSS Page Floats describes how to use CSS to place "floats" at the top or bottom of certain areas. This feature has traditionally been used in print publications in which figures and photos are moved to the top or bottom of columns or pages.

This specification allows controlling sizes of CSS objects to be multiple of a unit, for example to produce a consistent vertical typographic rhythm.

This specification defines various scoping/encapsulation mechanisms for CSS, including scoped styles and the @scope rule, Shadow DOM selectors, and page/region-based styling.

CSS Shadow Parts defines the ::part() pseudo-element on shadow hosts, allowing shadow hosts to selectively expose chosen elements from their shadow tree to the outside page for styling purposes.

This specification describes an API for observing changes to Element’s size.

This specification defines a model for synchronization and timing of changes to the presentation of a Web page. This specification also defines an application programming interface for interacting with this model and it is expected that further specifications will define declarative means for exposing these features.

This document collects together into one definition all the specs that together form the current state of Cascading Style Sheets (CSS) as of 2022. The primary audience is CSS implementers, not CSS authors, as this definition includes modules by specification stability, not Web browser adoption rate.

This document collects together into one definition all the specs that together form the current state of Cascading Style Sheets (CSS) as of 2023. The primary audience is CSS implementers, not CSS authors, as this definition includes modules by specification stability, not Web browser adoption rate.