-
Notifications
You must be signed in to change notification settings - Fork 0
CSS Cascading
CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc.
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.
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’.
Declaring a shorthand property to be !important is equivalent to declaring all of its sub-properties to be !important.
Name: all
Value: initial | inherit | unset
The ‘all’ property is a shorthand that resets all CSS properties except ‘direction’ and ‘unicode-bidi’.
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.
- Declared Values
Each property declaration applied to an element contributes a declared value for that property associated with the element.
These values are then processed by the cascade to choose a single “winning value”. - 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.
- Specified Values
The specified value 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 ‘initial’ and ‘inherit’ keywords are handled specially when they are the cascaded value of a property, - 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.
- Used Values 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 layout of the document. If the property does not apply to this element, then the element has no used value for that property.
- Actual Values 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.
- Examples
Property Winning declaration Cascaded value Specified value Computed value Used value Actual value
‘text-align’ text-align: left ‘left’ ‘left’ ‘left’ ‘left’ ‘left’
‘width’ (none) (none) ‘auto’ (initial value) ‘auto’ ‘120px’ ‘120px’
‘font-size’ font-size: 1.2em ‘1.2em’ ‘1.2em’ ‘14.1px’ ‘14.1px’ ‘14px’
‘width’ width: 80% ‘80%’ ‘80%’ ‘80%’ ‘354.2px’ ‘354px’
‘width’ width: auto ‘auto’ ‘auto’ ‘auto’ ‘134px’ ‘134px’
‘height’ height: auto ‘auto’ ‘auto’ ‘auto’ ‘176px’ ‘176px’
The cascade takes a unordered list of declared values for a given property on a given element, sorts them by their declaration’s precedence as determined below, and outputs a single cascaded value.
The cascade sorts declarations according to the following criteria, in descending order of priority:
A selector's specificity is calculated as follows:
•count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
•count the number of ID attributes in the selector (= b)
•count the number of other attributes and pseudo-classes in the selector (= c)
•count the number of element names and pseudo-elements in the selector (= d)
The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD.
Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.
Some examples:
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
<HEAD>
<STYLE type="text/css">
#x97z { color: red }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>
In the above example, the color of the P element would be green. The declaration in the "style" attribute will override the one in the STYLE element because of cascading rule 3, since it has a higher specificity.
Selector Example Example description
::after p::after Insert something after the content of each <p> element
::before p::before Insert something before the content of each <p> element
::first-letter p::first-letter Selects the first letter of each <p> element
::first-line p::first-line Selects the first line of each <p> element
::selection p::selection Selects the portion of an element that is selected by a user
In short: more specific rules override more general ones. Specificity is defined based on how many IDs, classes, and element names are involved, as well as whether the !important declaration was used. When multiple rules of the same "specificity level" exist, whichever one appears last wins.
tell me how get back to sunshine