Why is css cascading

See Filtering Declarations for details. 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. 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. 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. For example, serialization rules often allow omitting certain values which are implied during parsing; but those values are nonetheless part of the computed value.

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 element.

The used value is the result of taking the computed value and completing any remaining calculations to make it the absolute theoretical value used in the formatting of the document. A used value is in principle ready to be used, but a user agent may not be able to make use of the value in a given environment. For example, a user agent may only be able to render borders with integer pixel widths and may therefore have to approximate the used width. Also, the font size of an element may need adjustment based on the availability of fonts or the value of the font-size-adjust property.

The actual value is the used value after any such adjustments have been made. Note: By probing the actual values of elements, much can be learned about how the document is laid out. However, not all information is recorded in the actual values.

For example, the actual value of the page-break-after property does not reflect whether there is a page break or not after the element. Similarly, the actual value of orphans does not reflect how many orphan lines there is in a certain element.

See examples j and k in the table below. In order to find the declared values , implementations must first identify all declarations that apply to each element. A declaration applies to an element if:. The values of the declarations that apply form, for each property on each element, a list of declared values. The next section, the cascade , prioritizes these lists. The cascade sorts declarations according to the following criteria, in descending order of priority:.

Declarations from origins earlier in this list win over declarations from later origins. The output of the cascade is a potentially empty sorted list of declared values for each property on each element.

Each style rule has a cascade origin , which determines where it enters the cascade. CSS defines three core origins :. Extensions to CSS define the following additional origins :. CSS attempts to create a balance of power between author and user style sheets. To balance this, a declaration can be marked important , which increases its weight in the cascade and inverts the order of precedence.

A declaration is important if it has a! All other declarations are normal non- important. An important declaration takes precedence over a normal declaration. Author and user style sheets may contain important declarations, with user-origin important declarations overriding author-origin important declarations. This CSS feature improves accessibility of documents by giving users with special requirements large fonts, color combinations, etc.

Important declarations from all origins take precedence over animations. This allows authors to override animated values in important cases. Animated values normally override all other rules. User-agent style sheets may also contain important declarations. These override all author and user declarations. All document language-based styling must be translated to corresponding CSS rules and either enter the cascade as UA-origin rules or be treated as author-origin rules with a specificity of zero placed at the start of the author style sheet.

A document language may define whether such a presentational hint enters the cascade as UA-origin or author-origin ; if so, the UA must behave accordingly. For example, [SVG11] maps its presentation attributes into the author level. Note: Presentational hints entering the cascade as UA-origin rules can be overridden by author-origin or user-origin styles.

Presentational hints entering the cascade as author-origin rules can be overridden by author-origin styles, but not by non-important user-origin styles. Host languages should choose the appropriate origin for presentational hints with these considerations in mind. When the cascade does not result in a value, the specified value must be found some other way.

Note: Presentational hints entering the cascade as UA-origin rules can be overridden by author-origin or user-origin styles. Presentational hints entering the cascade as author presentational hint origin rules can be overridden by author-origin styles, but not by non- important user-origin styles. Host languages should choose the appropriate origin for presentational hints with these considerations in mind. When the cascade does not result in a value, the specified value must be found some other way.

Inherited properties draw their defaults from their parent element through inheritance ; all other properties take their initial value.

Authors can explicitly request inheritance or initialization via the inherit and initial keywords. If the property is not an inherited property , and the cascade does not result in a value, then the specified value of the property is its initial value. Inheritance propagates property values from parent elements to their children. For the root element, which has no parent element, the inherited value is the initial value of the property.

For a [DOM] tree with shadows, inheritance operates on the flattened element tree. Pseudo-elements inherit according to the fictional tag sequence described for each pseudo-element. Some properties are inherited properties , as defined in their property definition table. This means that, unless the cascade results in a value, the value will be determined by inheritance. A property can also be explicitly inherited. See the inherit keyword.

Note: Inheritance follows the document tree and is not intercepted by anonymous boxes , or otherwise affected by manipulations of the box tree. Several CSS-wide property values are defined below; declaring a property to have these values explicitly specifies a particular defaulting behavior. If the cascaded value of a property is the unset keyword, then if it is an inherited property, this is treated as inherit , and if it is not, this is treated as initial.

This keyword effectively erases all declared values occurring earlier in the cascade , correctly inheriting or not as appropriate for the property or all longhands of a shorthand. If the cascaded value of a property is the revert keyword, the behavior depends on the cascade origin to which the declaration belongs:.

If the cascaded value of a property is the revert-layer keyword, the cascaded value is rolled back to the layer below, so that the specified value is calculated as if no rules were specified in the current cascade layer — or between its normal and important levels in the cascade — for this property on this element.

Note: If there are no lower-priority declarations in the same cascade origin as the revert-layer value, the cascaded value will roll back to the previous origin, just as for the revert keyword. Changes since the 8 June Working Draft include:. Revert the ordering of unlayered styles.

Issue Significant changes since the 8 June Working Draft include:. Reserve the CSS-wide keywords for future use in layer-names. Clarify that layer rules respect global conditional rules, but are always applied to the layer order when declared in non-global conditions such as a container query.

Name-defining at-rules follow layer order for collision resolution, similar to specificity resolution. Disallow interleaving of layer with import or namespace rules. Significant changes since the 19 March Working Draft include:. Switched the ordering of unlayered styles from highest to lowest priority in the normal origins.

Switched layer import syntax from using layer to using import. Added revert-layer keyword. The following features have been added since Level 4 :.

Added cascade layers to the cascade sort criteria and defined style attributes as a distinct step of the cascade sort criteria so that they interact appropriately. Introduced the layer rule for defining cascade layers.

Introduced the revert-layer keyword for rolling back values to previous layers. The following features have been added since Level 3 :. Introduced revert keyword, for rolling back the cascade. Introduced supports syntax for supports-conditional import rules. Added encapsulation context to the cascade sort criteria to accommodate Shadow DOM. Defined the property two aliasing mechanisms CSS uses to support legacy syntaxes.

The following features have been added since Level 2 :. The cascade process does not distinguish between same-origin and cross-origin stylesheets, enabling the content of cross-origin stylesheets to be inferred from the computed styles they apply to a document. User preferences and UA defaults expressed via application of style rules are exposed by the cascade process, and can be inferred from the computed styles they apply to a document.

The import rule does not apply the CORS protocol to loading cross-origin stylesheets, instead allowing them to be freely imported and applied. Conformance requirements are expressed with a combination of descriptive assertions and RFC terminology.

However, for readability, these words do not appear in all uppercase letters in this specification. All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module. A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly.

However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. For example, a UA is not required to render color on a monochrome monitor.

An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module. So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid and ignore as appropriate any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support.

In particular, user agents must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid as unsupported values must be , CSS requires that the entire declaration be ignored. Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec.

To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report and, if necessary, the testcases used for that implementation report to the W3C before releasing an unprefixed implementation of any CSS features.

Questions should be directed to the public-css-testsuite w3. Abstract This CSS module describes how to collate style rules and assign values to all properties on all elements. The following conditional import rule only loads the style sheet when the UA supports display: flex , and only applies the style sheet on a handheld device with a maximum viewport width of px.

The following layer imports load the style sheets into the framework. The following lines are equivalent in meaning and illustrate both import syntaxes one with url and one with a bare string : import "mystyle.

The following rules illustrate how import rules can be made media-dependent: import url "fineprint. The following rule illustrates how an author can provide fallback rules for legacy user agents without impacting network performance on newer user agents: import url "fallback-layout.

For example, the following two lines are equivalent: import "mystyle. 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.

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. For example, if old-name is a legacy name alias for new-name , getComputedStyle el.

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. A specified value can be either absolute i. 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.

See examples f , g and h in the table below. The declaration in the second rule will also win due to being marked! Also, the third author rule will lose to the second author rule since the second declaration is!

This shows that! Explicit layer identifiers provide a way to assign multiple style blocks to a single layer. In the following example, the contents of headings. In this example, the nested framework. Each occurrence of an anonymous layer declaration represents a unique cascade layer, thus: Multiple unnamed layer rules place their styles into separate layers, as each occurrence is referencing a distinct anonymous layer name.

The statement syntax allows establishing a layer order in advance, regardless of the order in which style rules are added to each layer.

Navbar Vertical Navbar Horizontal Navbar. Shadow Effects Box Shadow. Report Error. Your message has been sent to W3Schools. W3Schools is optimized for learning and training.

Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.