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
- Default style sheet settings can be overridden.
|
A |
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
- Attribute 'alink' has a specificity of zero and is overridden by CSS.
|
I |
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 'cols' vs CSS 'width' specificity
- Attribute 'cols' 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
- Attribute 'face' has a specificity of zero and is overridden by CSS.
|
A |
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
- Attribute 'hspace' has a specificity of zero and is overridden by CSS.
|
G |
Attribute 'vspace' vs. CSS 'margin' specificity
- Attribute 'vspace' has a specificity of zero and is overridden by CSS.
|
G |
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 'rows' vs CSS 'height' specificity
- Attribute 'rows' has a specificity of zero and is overridden by CSS.
|
|
Attribute 'size' vs CSS 'height' specificity
- Attribute 'size' 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
- 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).
|
A |
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.
|
|
Child selector defined in user stylesheet can be applied
- The child selector defined in user stylesheet is applied to the appropriate element.
|
|
Adjacent sibling selector defined in user stylesheet can be applied
- The adjacent sibling selector defined in user stylesheet is applied to the appropriate element.
|
|
Attribute selector defined in user stylesheet can be applied
- The attribute 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.
|
|
Pseudo-class selector :first-child defined in user stylesheet can be applied
- The pseudo-class selector :first-child defined in user stylesheet is applied to the first child of an element.
|
|
Pseudo-element first-line selector defined in user stylesheet can be applied
- The pseudo-element selector :first-line defined in user stylesheet is applied to the first line of an 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
- The pseudo-class selector :visited defined in user stylesheet is applied when a link has already been visited.
|
I |
Hover defined in user stylesheet can be applied
- The pseudo-class selector :hover defined in user stylesheet is applied when the mouse is above an element.
|
I |
Pseudo-class :active defined in user stylesheet can be applied
- The pseudo-class selector :active defined in user stylesheet is implemented.
|
I |
Pseudo-element first-letter selector defined in user stylesheet can be applied
- The pseudo-element selector :first-letter defined in user stylesheet is applied to the first letter of an element.
|
|
Pseudo-element before selector defined in user stylesheet can be applied
- The pseudo-element selector :before defined in user stylesheet is inserted before an element.
|
|
Pseudo-element after selector defined in user stylesheet can be applied
- The pseudo-element selector :after defined in user stylesheet is inserted after an element.
|
|