| 6 Assigning property values, Cascading, and Inheritance |
|---|
| @import not as the first declaration |
|
| An @import is ignored if it is not the first statement in a style block. |
|
| Importing external stylesheets with @import |
|
| An @import used to import external stylesheets. |
|
| Importing styles using @import with a string |
|
| An @import used with just a string is interpreted as if it had url(...) around it. |
|
| Media dependency on @import set to 'print' |
|
| Specifying a media-dependency of print does not apply rules to the user agent display. |
|
| Media dependency on @import set to 'all' |
|
| Specifying the media-dependency of 'all' applies to all media types including user agent display. |
|
| Media dependency on @import set to 'screen' |
|
| Specifying the media-dependent import rules to 'screen' applies to user agent display. |
|
| @import with @charset |
|
| An @import is valid after @charset. |
|
| Overriding the default style sheet |
A |
| Default style sheet settings can be overridden. |
|
| Attribute 'align' vs. CSS 'text-align' specificity |
|
| Attribute 'align' has a specificity of zero and is overridden by CSS. |
|
| Attribute 'alink' vs. CSS active specificity |
I |
| Attribute 'alink' has a specificity of zero and is overridden by CSS. |
|
| Attribute 'bgcolor' vs. CSS 'background-color' specificity |
|
| Attribute 'bgcolor' has a specificity of zero and is overridden by CSS. |
|
| Attribute 'border' vs. CSS border specificity |
|
| Attribute 'border' has 0 specificity and is overridden by CSS. |
|
| Attribute 'cellpadding' vs. CSS 'padding' specificity |
|
| Attribute 'cellpadding' has a specificity of zero and is overridden by CSS. |
|
| Attribute 'cellspacing' vs. CSS border-spacing specificity |
|
| Attribute 'cellspacing' has 0 specificity and is overridden by CSS. |
|
| Attribute 'clear' vs. CSS 'clear' specificity |
|
| Attribute 'clear' has a specificity of zero and is overridden by CSS. |
|
| Attribute 'color' vs. CSS 'color' specificity |
|
| Attribute 'color' has a specificity of zero and is overridden by CSS. |
|
| Attribute 'width' vs. CSS 'width' specificity |
|
| Attribute 'width' has a specificity of zero and is overridden by CSS. |
|
| Attribute 'face' vs. CSS 'font-family' specificity |
A |
| Attribute 'face' has a specificity of zero and is overridden by CSS. |
|
| Attribute 'valign' vs. CSS 'vertical-align' specificity |
|
| Attribute 'valign' has a specificity of zero and is overridden by CSS. |
|
| Attribute 'frame' vs. CSS 'border' specificity |
|
| Attribute 'frame' has a specificity of zero and is overridden by CSS. |
|
| Attribute 'rules' vs. CSS border specificity |
|
| Attribute 'rules' has a specificity of zero and is overridden by CSS. |
|
| Attribute 'height' vs. CSS 'height' specificity |
|
| Attribute 'height' has a specificity of zero and is overridden by CSS. |
|
| Attribute 'hspace' vs. CSS 'margin' specificity |
G |
| Attribute 'hspace' has a specificity of zero and is overridden by CSS. |
|
| Attribute 'vspace' vs. CSS 'margin' specificity |
G |
| Attribute 'vspace' has a specificity of zero and is overridden by CSS. |
|
| Attribute 'link' vs. CSS ':link' specificity |
|
| Attribute 'link' has a specificity of zero and is overridden by CSS. |
|
| Attribute 'marginheight' vs. CSS 'margin' specificity |
|
| Attribute 'marginheight' has a specificity of zero and is overridden by CSS. |
|
| Attribute 'marginwidth' vs. CSS 'margin' specificity |
|
| Attribute 'marginwidth' has a specificity of zero and is overridden by CSS. |
|
| Attribute 'nowrap' vs. CSS 'white-space' specificity |
|
| Attribute 'nowrap' has a specificity of zero and is overridden by CSS. |
|
| Attribute 'text' vs. CSS 'color' specificity |
|
| Attribute 'text' has a specificity of zero and is overridden by CSS. |
|
| Attribute 'vlink' vs. CSS ':visited' specificity |
|
| Attribute 'vlink' has a specificity of zero and is overridden by CSS. |
|
| Element selector precedence |
|
| The element selector takes precedence over the font element 'color' attribute. |
|
| Universal selector precedence |
|
| The universal selector and the 'color' attribute have the same specificity. The universal selector is applied since CSS takes precedence. |
|
| User style sheet precedence |
|
| The 'font' element's 'color' attribute trumps the user stylesheet's universal selector. They have the same specificity but the font element is a virtual author rule. |
|
| Inheritance |
|
| Children elements can inherit properties from parents. |
|
| Inheriting computed values |
A |
| The computed value of a font-size with a percentage is the percentage of its parent's font-size value. A nested element which also has a percentage applies the parents' specified value (which is inherited). |
|
| Non-inherited values |
|
| If the cascade results in a value, use it. |
|
| Calculating specificity - Specificity 0010 vs. 0001 |
|
| The element selector has the highest specificity - specificity 0010 takes precedence over 0001. |
|
| Calculating specificity - Inline Style |
|
| Specificity of the inline style trumps all other selectors. |
|
| Calculating specificity - Specificity 0100 vs. 0011 |
|
| The element selector has the highest specificity - specificity 0100 takes precedence over 0011. |
|
| Calculating specificity - Specificity 0011 vs. 0010 |
|
| The element selector has the highest specificity - specificity 0011 takes precedence over 0010. |
|
| Calculating specificity - Specificity 0002 vs. 0001 |
|
| First-line selector with highest specificity wins - specificity 0002 takes precedence over 0001. |
|
| Calculating specificity - Pseudo-element vs. simple element |
|
| The pseudo-element 'first-line' takes precedence over simple element selector. |
|
| Calculating specificity - Specificity 0001 vs. 0000 |
|
| The element selector has the highest specificity - specificity 0001 takes precedence over 0000. |
|
| Calculating specificity - specificity 0003 vs. 0001 |
|
| First-line selector with highest specificity wins - specificity 0003 takes precedence over 0001. |
|
| Calculating specificity - specificity 0003 vs. 0002 |
|
| First-line selector with highest specificity wins - specificity 0003 take precedence over 0002. |
|
| User defined stylesheet can be applied |
|
| User stylesheet can be applied to the page. |
|
| User defined stylesheet can be applied and persisted |
|
| The user stylesheet is still applied after close and reopen the user agent window. |
|
| User defined stylesheet cannot override property defined in style tag |
|
| The user style sheet cannot override property defined in style tag. |
|
| User defined stylesheet cannot override inline style |
|
| The user style sheet cannot override property defined in inline style attribute. |
|
| Descendant selector defined in user stylesheet can be applied |
|
| The descendant selector defined in user stylesheet is applied to the appropriate element. |
|
| ID selector defined in user stylesheet can be applied |
|
| The ID selector defined in user stylesheet is applied to the appropriate element. |
|
| Link defined in user stylesheet can be applied |
|
| The pseudo-class selector :link defined in user stylesheet is applied to all links. |
|
| Visited selector defined in user stylesheet can be applied |
I |
| The pseudo-class selector :visited defined in user stylesheet is applied when a link has already been visited. |
|
| Pseudo-class :active defined in user stylesheet can be applied |
I |
| The pseudo-class selector :active defined in user stylesheet is implemented. |
|