CSS guides - CSS | MDN

HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
Learn web development
Get to know MDN better
This page lists CSS modules, which reflect how CSS specifications are structured. Each module 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.
To access the individual guides within each module, click on a module name from the following list to visit its landing page, or use the sidebar to navigate directly to a topic and discover all related guides.
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.
The CSS animation triggers module provides functionality to trigger standard time-based CSS animations when a specific timeline trigger occurs.
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.
The CSS backgrounds and borders module provides properties for adding backgrounds, borders, rounded corners, and box shadows to elements.
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.
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.
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.
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.
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.
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.
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.
The CSS colors module defines colors, color types, color blending, opacity, and how you can apply these colors and effects to HTML content.
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.
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.
The CSS containment module defines containment and container queries.
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.
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.
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.
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.
The CSS display module defines how the CSS formatting box tree is generated from the document element tree and defines properties controlling it.
The CSS easing functions module defines easing functions, which provide a means to control the transforma