Sideway
output.to from Sideway




Draft for Information Only

Content

The Cascade
 Normal and Important Rules
  Cascading Order of Creator
  Example
 Specificity of Selector
 Order of Rule Sets
  Cascaded Style Rule Order
  Example

The Cascade

There are more than one creator of style sheets for a document. Since style sheets from different creator may overlap in scope, the cascading technology is used in CSS by assignning a weight to each style rule for determining the precedency of each  style rule.

Normal and Important Rules

By default, all rules are normal rules and rules in author style sheets have more weight than rules in user style sheets, while rule in user agent style sheets has the least weight.. The one with the greatest weight takes precedence. In order to provide a way to overide the default cascading order, a type of important rule are defined in addition to normal rules by adding the flag with delimiter token '!' and keyword 'important' follow a norml rule declaration.

h1, h2 { font-weight: bold !important}
p { font-weight: bold !important;font-size: 12px }

Cascading Order of Creator

Both user and auther important rules have more weight than normal rules in the default style sheet of author, user, and user agent. And all user important rules have more weight than author important rules.

The decending order of precedence for creator:

  1. user important declarations
  2. author important declarations
  3. author normal declarations
  4. user normal declarations
  5. user agent declarations

Example

HTML Document Input:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<link rel="stylesheet" type="text/css" href="http://output.to/style/default/std01b.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
h2 {background-color:cyan;color:blue}
p {background-color:cyan;border:1px solid black;margin:5px;padding:5px}
</style>
<title>Sample Page</title>
    </head>
    <body>
<h2 style="color:red; color:black">Example of direct CSS Rule</h2>
<p style="background-color:green;color:red;background-color:cyan">Example of indirect CSS Rule</p>
    </body>
</html>
HTML Web Page Embedded Output:

not support

Specificity of Selector

Not CSS Specification Related

Besides creator, CSS rules of the same element selector may aslo be sepecified in style sheets of different types or different pattern. By default, a more specific element selector have more weight than less specific element selector. The specificity is based only on the form of the selector. However the ','  used in the selector is only a logical partten separator to combine two or more rule sets of the same declarations together. The weight of specificity and the order of precedence for an element in decenting order are:

  • The highest specificity: count 1 if the declaration is from a 'style' attribute rather than a rule with a selector, otherwise count 0.
  • High specificity: count the number of ID attributes in the selector.
  • Less specificity: count the number of other attributes and pseudo-classes in the selector.
  • The least specificity: count the numbe of element names and pseudo-elements in the selector
  • No specificity: count  0 if the selector is '*'

Order of Rule Sets

In general, the property value of a valid styling rule will be overridden by the property value of the later valid styling rule in CSS. In other words, the later styling rule will have more weight than that of the styling rules loaded before in the CSS list.

Cascaded Style Rule Order

In general, there are two types of author rule sets.

  1. Inline Style (inside an HTML element)
  2. External Style Sheets and Embedded Styles (in the head section)

The inline style attribute will always has the highest specificity. If there are duplicate CSS rules inside the style attribute, the latest specified CSS rule in the list will always override the other specified CSS rule of the same property name. But for other style rule sets, the specificity of each style rule set is obtained by counting the number of items in the selector, these selectors may have more than one type of specificity. The specificity order can then be arranged by comparing the hierarchy of specificity weighting. If there are more than one selector of the same specificity weighting, the order of rule will then applied, that is the latest specified CSS rule in the CSS list will always override the other specified CSS rule of the same property name.

Example

HTML Document Input:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {background-color:transparent;width:auto}
del, strong {background-color:inherit;color:inherit;border-width:0;margin:0;padding:0}
q {background-color:inherit;color:inherit;border-width:0;margin:0;padding:0}
* {background-color:cyan;color:blue;border:1px solid blue;margin:5px;padding:5px;}
p {background-color:pink;border:3px solid;margin:5px;padding:15px;text-align:justify;}
p::first-line {background-color:silver;border:10px solid black;margin:15px;padding:15px;text-align:left}
div p {background-color:blue;color:yellow}
div p+p {background-color:black;border:16px solid}
p + *[txt=org] {background-color:green;color:orange}
div p+p.green {background-color:green}
p.red.level {background-color:violet;color:yellow}
#hot1 {background-color:orange}
.cba {color:violet}
.ab {background-color:orange;color:green}
.ba {background-color:yellow}
.abc {color:orange}
</style>
<title>Sample Page</title>
    </head>
    <body>
html, body:- html, body {background-color:transparent;width:auto}; * {<del>background-color:cyan;</del>color:blue;border:1px solid blue;margin:5px;padding:5px;}
<h2 style="color:red; color:black">h2 style="<del>color:red;</del>color:black":- * {background-color:cyan;<del>color:blue;</del>border:1px solid blue; margin:5px;padding:5px;}</h2>
<p>p:- p {background-color:pink;border:3px solid; margin:5px;padding:15px; text-align:justify;}; p::first-line {background-color:silver;<del>border:10px solid black;margin:15px;padding:15px;text-align:left</del>}; * {<del>background-color:cyan; </del><strong>color:blue</strong>;<del>border:1px solid blue;margin:5px;padding:5px;</del>}</p>
<p style="background-color:green;color:red;background-color:yellow">p style="<del>background-color:green;</del><strong>color:red;</strong>background-color:yellow":- p {<del>background-color:pink;</del>border:3px solid; margin:5px;padding:15px; text-align:justify;}; p::first-line {background-color:silver;<del>border:10px solid black;margin:15px;padding:15px;text-align:left</del>}; * {<del>background-color:cyan; color:blue;border:1px solid blue;margin:5px;padding:5px;</del>}</p>
<div class="red">div <del>class="red"</del>
<p>p:- div p {background-color:blue;<strong>color:yellow</strong>}; p {<del>background-color:pink;</del>border:3px solid; margin:5px;padding:15px; text-align:justify;}; p::first-line {background-color:silver;<del>border:10px solid black;margin:15px;padding:15px;text-align:left</del>}; * {<del>background-color:cyan; color:blue;border:1px solid blue;margin:5px;padding:5px;</del>}</p>
<p>p:- div p+p {background-color:black;border:16px solid}; div p {<del>background-color:blue;</del><strong>color:yellow</strong>}; p {<del>background-color:pink; border:3px solid; </del>margin:5px;padding:15px; text-align:justify;}; p::first-line {background-color:silver;<del>border:10px solid black; margin:15px;padding:15px;text-align:left</del>}; * {<del>background-color:cyan; color:blue;border:1px solid blue; margin:5px; padding:5px;</del>}</p>
<p class="green">p class="green":- div p+p.green {background-color:green}; div p+p {<del>background-color:black;</del>border:16px solid}; div p {<del>background-color:blue;</del><strong>color:yellow</strong>}; p {<del>background-color:pink; border:3px solid; </del>margin:5px;padding:15px; text-align:justify;}; p::first-line {background-color:silver;<del>border:10px solid black; margin:15px;padding:15px;text-align:left</del>}; * {<del>background-color:cyan; color:blue;border:1px solid blue; margin:5px; padding:5px;</del>}</p>
<p>p:- div p+p {background-color:black;border:16px solid}; div p {<del>background-color:blue;</del><strong>color:yellow</strong>}; p {<del>background-color:pink; border:3px solid; </del>margin:5px;padding:15px; text-align:justify;}; p::first-line {background-color:silver;<del>border:10px solid black; margin:15px;padding:15px;text-align:left</del>}; * {<del>background-color:cyan; color:blue;border:1px solid blue; margin:5px; padding:5px;</del>}</p>
</div>
<p class="red level">p class="red level":- p.red.level {background-color:violet;<strong>color:yellow</strong>}; p {<del>background-color:pink;</del>border:3px solid; margin:5px;padding:15px; text-align:justify;}; p::first-line {background-color:silver;<del>border:10px solid black;margin:15px;padding:15px;text-align:left</del>}; * {<del>background-color:cyan; color:blue;border:1px solid blue;margin:5px;padding:5px;</del>}</p>
<p class="red">p <del>class="red"</del>:- p {background-color:pink;border:3px solid; margin:5px;padding:15px; text-align:justify;}; p::first-line {background-color:silver;<del>border:10px solid black;margin:15px;padding:15px;text-align:left</del>}; * {<del>background-color:cyan; </del><strong>color:blue</strong>;<del>border:1px solid blue;margin:5px;padding:5px;</del>}</p>
<p id="hot1" class="red level">p id="hot1" class="red level":- #hot1 {background-color:orange}; p.red.level {<del>background-color:violet;</del><strong>color:yellow</strong>}; p {<del>background-color:pink;</del>border:3px solid; margin:5px;padding:15px; text-align:justify;}; p::first-line {background-color:silver;<del>border:10px solid black;margin:15px;padding:15px;text-align:left</del>}; * {<del>background-color:cyan; color:blue;border:1px solid blue;margin:5px;padding:5px;</del>}</p>
<div txt="org">div  txt="org":- p + *[txt=org] {background-color:green;color:orange}; * {<del>background-color:cyan;color:blue;</del>border:1px solid blue;margin:5px;padding:5px;}</div>
<q class="abc cba ab ba">q class="abc cba ab ba":- .abc {color:orange}; .ba {background-color:yellow}; .ab {<del>background-color:orange;color:green</del>}; .cba {<del>color:violet</del>}; q {<del>background-color:inherit;color:inherit;</del>border-width:0;margin:0;padding:0}; * {<del>background-color:cyan;color:blue;</del>border:1px solid blue;margin:5px;padding:5px;}</q>
<br />
<q class="abc cba ba ab">q class="abc cba ba ab":- .abc {color:orange}; .ba {background-color:yellow}; .ab {<del>background-color:orange;color:green</del>}; .cba {<del>color:violet</del>}; q {<del>background-color:inherit;color:inherit;</del>border-width:0;margin:0;padding:0}; * {<del>background-color:cyan;color:blue;</del>border:1px solid blue;margin:5px;padding:5px;}</q>

    </body>
</html>
HTML Web Page Embedded Output:

not support


©sideway
close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close

ID: 190400009 Last Updated: 4/9/2019 Revision: Ref:

IMAGE

Home (5)

Business

Management

HBR (3)

Information

Recreation

Hobbies (7)

Culture

Chinese (1097)

English (336)

Reference (66)

Computer

Hardware (149)

Software

Application (187)

Digitization (24)

Numeric (19)

Programming

Web (705)new

CSS (SC)

ASP.NET (SC)

Regular Expression (SC)

HTML

Knowledge Base

Common Color (SC)

Html Entity (Unicode) (SC)

Html 401 Special (SC)

OS (389)

MS Windows

Windows10 (SC)

.NET Framework (SC)

DeskTop (7)

Knowledge

Mathematics

Formulas (8)

Algebra (20)

Number Theory (206)

Trigonometry (18)

Geometry (18)

Calculus (67)

Complex Analysis (21)

Engineering

Tables (8)

Mechanical

Mechanics (1)

Rigid Bodies

Statics (92)

Dynamics (37)

Fluid (5)

Fluid Kinematics (5)

Control

Process Control (1)

Acoustics (19)

FiniteElement (2)

Biology (1)

Geography (1)

Latest Updated Links

Copyright © 2000-2019 Sideway . All rights reserved Disclaimers last modified on 10 Feb 2019