CSS and Hierarchy
Type Selectors specificity value=1 Element { property: value; } p { color: blue; } /* paragraph text color will be blue */ <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: blue; } <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... Parents that declare !important do not get over-written.
More about: css , styles , W3C , Eric Meyer , Builder , w3schools , Tutorial , 10 tricks , University of Html , css Zen Garden ,
