CSS Cascading and Inheritance Level 3 CSS Cascading and Inheritance Level 3 W3C Recommendation, 11 February 2021 This version: https://www.w3.org/TR/2021/REC-css-cascade-3-20210211/ Latest published version: https://www.w3.org/TR/css-cascade-3/ Editor's Draft: https://drafts.csswg.org/css-cascade-3/ Previous Versions: https://www.w3.org/TR/2020/PR-css-cascade-3-20201222/ https://www.w3.org/TR/2020/CR-css-cascade-3-20200817/ https://www.w3.org/TR/2018/CR-css-cascade-3-20180828/ https://www.w3.org/TR/2016/CR-css-cascade-3-20160519/ https://www.w3.org/TR/2015/CR-css-cascade-3-20150416/ https://www.w3.org/TR/2013/WD-css-cascade-3-20130730/ https://www.w3.org/TR/2013/WD-css3-cascade-20130103/ https://www.w3.org/TR/2005/WD-css3-cascade-20051215/ Implementation Report: https://drafts.csswg.org/css-cascade-3/implementation-report.html Test Suite: http://test.csswg.org/suites/css-cascade-3_dev/nightly-unstable/ Issue Tracking: CSSWG Issues Repository Disposition of Comments Editors: Elika J. Etemad / fantasai ( Invited Expert ) Tab Atkins Jr. ( Google ) Suggest an Edit for this Spec: GitHub Editor Please check the errata for any errors or issues reported since publication. Copyright © 2021 W3C ® ( MIT , ERCIM , Keio , Beihang ). W3C liability , trademark and permissive document license rules apply. Abstract 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 is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc. Status of this document This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at https://www.w3.org/TR/. This document was published by the CSS Working Group as a Recommendation . A W3C Recommendation is a specification that, after extensive consensus-building, has received the endorsement of the W3C and its Members. W3C recommends the wide deployment of this specification as a standard for the Web. Please send feedback by filing issues in GitHub (preferred), including the spec code “[css-cascade]” in the title, like this: “[css-cascade] …summary of comment… ”. All issues and comments are archived . Alternately, feedback can be sent to the ( archived ) public mailing list [email protected] . This document is governed by the 15 September 2020 W3C Process Document . This document was produced by a group operating under the W3C Patent Policy . W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy . Table of Contents * 1 Introduction * 1.1 Module Interactions * 2 Importing Style Sheets: the @import rule * 2.1 Conditional @import Rules * 2.2 Processing Stylesheet Imports * 2.3 Content-Type of CSS Style Sheets * 3 Shorthand Properties * 3.1 Resetting All Properties: the all property * 4 Value Processing * 4.1 Declared Values * 4.2 Cascaded Values * 4.3 Specified Values * 4.4 Computed Values * 4.5 Used Values * 4.6 Actual Values * 4.7 Examples * 5 Filtering * 6 Cascading * 6.1 Cascade Sorting Order * 6.2 Cascading Origins * 6.3 Important Declarations: the !important annotation * 6.4 Precedence of Non-CSS Presentational Hints * 7 Defaulting * 7.1 Initial Values * 7.2 Inheritance * 7.3 Explicit Defaulting * 7.3.1 Resetting a Property: the initial keyword * 7.3.2 Explicit Inheritance: the inherit keyword * 7.3.3 Erasing All Declarations: the unset keyword * 8 Changes * 8.1 Changes Since the 28 August 2018 Candidate Recommendation * 8.2 Changes Since the 19 May 2016 Candidate Recommendation * 8.3 Changes Since the 3 October 2013 Candidate Recommendation * 8.4 Additions Since Level 2 * Acknowledgments * Privacy and Security Considerations * Conformance * Document conventions * Conformance classes * Partial implementations * Implementations of Unstable and Proprietary Features * Non-experimental implementations * Index * Terms defined by this specification * Terms defined by reference * References * Normative References * Informative References * Property Index 1. Introduction One of the fundamental design principles of CSS is cascading , which allows several style sheets to influence the presentation of a document. When different declarations try to set a value for the same element/property combination, the conflicts must somehow be resolved. The opposite problem arises when no declarations try to set a the value for an element/property combination. In this case, a value is be found by way of inheritance or by looking at the property’s initial value . The cascading and defaulting process takes a set of declarations as input, and outputs a specified value for each property on each element. The rules for finding the specified value for all properties on all elements in the document are described in this specification. The rules for finding the specified values in the page context and its margin boxes are described in [css-page-3] . 1.1. Module Interactions This section is normative. This module replaces and extends the rules for assigning property values, cascading, and inheritance defined in [CSS2] chapter 6. Other CSS modules may expand the definitions of some of the syntax and features defined here. For example, the Media Queries Level 4 specification, when combined with this module, expands the definition of the <media-query> value type as used in this specification. 2. Importing Style Sheets: the @import rule The @import rule allows users to import style rules from other style sheets. If an @import rule refers to a valid stylesheet, user agents must treat the contents of the stylesheet as if they were written in place of the @import rule, with two exceptions: * If a feature (such as the @namespace rule) explicitly defines that it only applies to a particular stylesheet, and not any imported ones, then it doesn’t apply to the imported stylesheet. * If a feature relies on the relative ordering of two or more constructs in a stylesheet (such as the requirement that @namespace rules must not have any other rules other than @import preceding it), it only applies between constructs in the same stylesheet. For example, declarations in style rules from imported stylesheets interact with the cascade as if they were written literally into the stylesheet at the point of the @import . Any @import rules must precede all other valid at-rules and style rules in a style sheet (ignoring @charset ), or else the @import rule is invalid. The syntax of @import is: @import [ <url> | <string> ] <media-query-list> ? ; Where the <url> or <string> gives the URL of the style sheet to be imported, and the optional <media-query-list> (the import conditions ) states the conditions under which it applies. If a <string> is provided, it must be interpreted as a <url> with the same value. The following lines are equivalent in meaning and illustrate both @import syntaxes (one with url() and one with a bare string): @import "mystyle.css" ; @import url ( "mystyle.css" ); 2.1. Conditional @import Rules The import conditions allow the import to be media-dependent. In the absence of any import conditions , the import is unconditional. (Specifying all for the <media-query-list> has the same effect.) If the import conditions do not match, the rules in the imported stylesheet do not apply, exactly as if the imported stylesheet were wrapped in an @media block with the given media query. The following rules illustrate how @import rules can be made media-dependent: @import url ( "fineprint.css" ) print ; @import url ( "bluish.css" ) projection , tv ; @import url ( "narrow.css" ) handheld and ( max-width: 400 px ); User agents may therefore avoid fetching a media-dependent import as long as the media query does not match. The evaluation and full syntax of the import conditions is defined by the Media Queries specification [MEDIAQ] . 2.2. Processing Stylesheet Imports When the same style sheet is imported or linked to a document in multiple places, user agents must process (or act as though they do) each link as though the link were to an independent style sheet. Note: This does not place any requirements on resource fetching, only how the style sheet is reflected in the CSSOM and used in specs such as this one. Assuming appropriate caching, it is perfectly appropriate for a UA to fetch a style sheet only once, even though it’s linked or imported multiple times. The origin of an imported style sheet is the origin of the style sheet that imported it. The environment encoding of an imported style sheet is the encoding of the style sheet that imported it. [css-syntax-3] 2.3. Content-Type of CSS Style Sheets The processing of imported style sheets depends on the actual type of the linked resource. If the resource does not have Content-Type metadata , or the host document is in quirks mode and has the same origin as the imported style sheet, the type of the linked resource is text/css . Otherwise, the type is determined from its Content-Type metadata . If the linked resource’s type is text/css , it must be interpreted as a CSS style sheet. Otherwise, it must be interpreted as a network error. 3. Shorthand Properties Some properties are shorthand properties , meaning that they allow authors to specify the values of several properties with a single property. A shorthand property sets all of its longhand sub-properties , exactly as if expanded in place. When values are omitted from a shorthand form, unless otherwise defined, each “missing” sub-property is assigned its initial value . This means that a shorthand property declaration always sets all of its sub-properties , even those that are not explicitly set. Carelessly used, this might result in inadvertently resetting some sub-properties . Carefully used, a shorthand can guarantee a “blank slate” by resetting sub-properties inadvertently cascaded from other sources. For example, writing background: green rather than background-color: green ensures that the background color overrides any earlier declarations that might have set the background to an image with background-image . For example, the CSS Level 1 font property is a shorthand property for setting font-style , font-variant , font-weight , font-size , line-height , and font-family all at once. The multiple declarations of this example: h1 { font-weight : bold ; font-size : 12 pt ; line-height : 14 pt ; font-family : Helvetica ; font-variant : normal ; font-style : normal ; } can therefore be rewritten as h1 { font : bold 12 pt / 14 pt Helvetica } As more font sub-properties are introduced into CSS, the shorthand declaration resets those to their initial values as well. In some cases, a shorthand might have different syntax or special keywords that don’t directly correspond to values of its sub-properties . (In such cases, the shorthand will explicitly define the expansion of its values.) In other cases, a property might be a reset-only sub-property of the shorthand: Like other sub-properties , it is reset to its initial value by the shorthand when unspecified, but the shorthand might not include syntax to set the sub-property to any of its other values. For example, the border shorthand resets border-image to its initial value of none , but has no syntax to set it to anything else. [css-backgrounds-3] If a shorthand is specified as one of the CSS-wide keywords [css-values-3] , it sets all of its sub-properties to that keyword, including any that are reset-only sub-properties . (Note that these keywords cannot be combined with other values in a single declaration, not even in a shorthand.) Declaring a shorthand property to be !important is equivalent to declaring all of its sub-properties to be !important . 3.1. Resetting All Properties: the all property Name: all Value: initial | inherit | unset Initial: see individual properties Applies to: see individual properties Inherited: see individual properties Percentages: see individual properties Computed value: see individual properties Animation type: see individual properties Canonical order: per grammar The all property is a shorthand that resets all CSS properties except direction and unicode-bidi . It only accepts the CSS-wide keywords . It does not reset custom properties [css-variables-1] . Note: The excepted CSS properties direction and unicode-bidi are actually markup-level features, and should not be set in the author’s style sheet . (They exist as CSS properties only to style document languages not supported by the UA.) Authors should use the appropriate markup, such as HTML’s dir attribute, instead. [css-writing-modes-3] For example, if an author specifies all: initial on an element it will block all inheritance and reset all properties, as if no rules appeared in the author, user, or user-agent levels of the cascade. This can be useful for the root element of a "widget" included in a page, which does not wish to inherit the styles of the outer page. Note, however, that any "default" style applied to that element (such as, e.g. display: block from the UA style sheet on block elements such as <div> ) will also be blown away. 4. Value Processing Once a user agent has parsed a document and constructed a document tree, it must assign, to every element in the tree, and correspondingly to every box in the formatting structure, a value to every property that applies to the target media type. The final value of a CSS property for a given element or box is the result of a multi-step calculation: * First, all the declared values applied to an element are collected, for each property on each element. There may be zero or many declared values applied to the element. * Cascading yields the cascaded value . There is at most one cascaded value per property per element. * Defaulting yields the specified value . Every element has exactly one specified value per property. * Resolving value dependencies yields the computed value . Every element has exactly one computed value per property. * Formatting the document yields the used value . An element only has a used value for a given property if that property applies to the element. * Finally, the used value is transformed to the actual value based on constraints of the display environment. As with the used value , there may or may not be an actual value for a given property on an element. 4.1. Declared Values Each property declaration applied to an element contributes a declared value for that property associated with the element. See Filtering Declarations for details. These values are then processed by the cascade to choose a single “winning value”. 4.2. Cascaded Values The cascaded value represents the result of the cascade : it is the declared value that wins the cascade (is sorted first in the output of the cascade ). If the output of the cascade is an empty list, there is no cascaded value . 4.3. Specified Values The specified value is the value of a given property that the style sheet authors intended for that element. It is the result of putting the cascaded value through the defaulting processes, guaranteeing that a specified value exists for every property on every element. In many cases, the specified value is the cascaded value . However, if there is no cascaded value at all, the specified value is defaulted . The CSS-wide keywords are handled specially when they are the cascaded value of a property, setting the specified value as required by that keyword, see § 7.3 Explicit Defaulting . 4.4. Computed Values The computed value is the result of resolving the specified value as defined in the “Computed Value” line of the property definition table, generally absolutizing it in preparation for inheritance . Note: The computed value is the value that is transferred from parent to child during inheritance . For historical reasons, it is not necessarily the value returned by the getComputedStyle() function, which sometimes returns used values . [CSSOM] Furthermore, the computed value is an abstract data representation: their definitions reflect that data representation, not how that data is serialized. For example, serialization rules often allow omitting certain values which are implied during parsing; but those values are nonetheless part of the computed value . A specified value can be either absolute (i.e., not relative to another value, as in red or 2mm ) or relative (i.e., relative to another value, as in auto , 2em ). Computing a relative value generally absolutizes it: * values with relative units ( em , ex , vh , vw ) must be made absolute by multiplying with the appropriate reference size * certain keywords (e.g., smaller , bolder ) must be replaced according to their definitions * percentages on some properties must be multiplied by a reference value (defined by the property) * valid relative URLs must be resolved to become absolute. See examples (f), (g) and (h) in the table below . Note: In general, the computed value resolves the specified value as far as possible without laying out the document or performing other expensive or hard-to-parallelize operations, such as resolving network requests or retrieving values other than from the element and its parent. The computed value exists even when the property does not apply. However, some properties may change how they determine the computed value based on whether the property applies to the e