CSS and Hierarchy
Type Selectors specificity value=1
Element { property: value; }
p { color: red; } /* paragraph text color will be red */
<p>
Class Selectors
Element Classes specificity value=11
Element.ClassName { property: value; }
p.links { property: value; }
<p class="links">
Independent Classes specificity value=10
.ClassName { property: value; }
.greysky { color: grey; }
<p class="greysky">
ID Selectors (alphanumeric only, no characters or underscores)
must be unique "id" names to a page, to avoid confusion with <form>
Element IDs specificity value=100
p#navlink { property: value; }
<p id="navlink">
<p id="navlink" class="greysky">
Independent IDs specificity value=100
#bluesky { color: blue; }
<p id="bluesky">
<p id="bluesky" class="links">
Contextual Selectors
also called descendant selectors, for parent-child structures.
Check that other elements do not pick up the style.
parent child { property: value; }
#bluesky span { color: red; }
<div id="bluesky">text text text <span>text</span> text</div>
div#bluesky p.links strong { color: white; background-color: magenta; }
<div id="bluesky"><p class="links>text text <strong>text</strong> text</p></div>
Attribute Selectors
Element Attribute Selector:
element[attribute] { property: value; }
div[align] { color: lime; }
Independent Attribute Selector:
[attribute] { property: value; }
[width="100"] { color: purple; }
Styles are overridden (hierarchy) by "specificity values,"
more weight (100) rides over lighter weight (1).
In addition the four style sheet types have the following hierarchical order to
resolve style conflicts. The strongest is listed first:
Inline styles, inside html element, <p style="color: blue;">
Embedded/Internal style sheets, inside the <head> tags <style type="text/css">a { color: blue;}</style>
Linked/External style sheets, <link rel="stylesheet" type="text/css" href="stylesheets/styles.css">
Imported style sheets, @import url(stylesheets/styles.css); or @import "stylesheets/styles.css";
In the cascade each style sheet type is prioritized. Rules cascade from general to specific
and from external to local, so the more local style sheet has a higher priority. The Inline style
will be closest to the element, it has the highest priority. Child has priority over (rides) Parent - kids cry more...
More about:
css ,
styles ,
W3C ,
Eric Meyer ,
Builder ,
w3schools ,
Tutorial ,
10 tricks ,
University of Html ,
css Zen Garden ,
Return to Top of Page
