News About
CSS Learning:
CSS Introduction
CSS Syntax
Specify CSS
The CSS Type Selector
The CSS Descendant Selector
The CSS Child Selector
The CSS Class Selector
The CSS Id Selector
The CSS Element selector
CSS Pseudo Class Selectors
CSS Pseudo Elements Selectors
Other special CSS selectors
How to Group CSS Selectors
Summery of CSS Selectors
Sort out CSS Style for elements
CSS Reference
Text types
Table types
Print types
Positioning types
Padding types
Outline types
Margin types
List types
Generated Content
Font types
Dimension types
CSS Pseudo types
Border types
Background types
Aural types
Review w3processing.com on alexa.com

How sort out CSS Style for elements

How to sort out CSS style for each html element?

  • At this point we know:
    1. An html element can be defined with one or more CSS style declarations through the use of several different CSS style rules.
    2. Perhaps many equal declarations are defined with different attribute values for a element.
    3. Which style should descendant elements of an element have, if these descendant elements do not have a style declaration
    4. The user may set up their own style in their browser. How should that be handled by a browser.
  • CSS 2.1 specifications have some rules, logic and weighting to find the right CSS style declaration for each HTML element.
  • The Cascade rules in CSS (Cascading Style Sheets) involves styles falling down from one level of the hierarchy of your document to the next, and its function is to let the browser decide which of the many possible sources of a particular property for a particular element is the one to use.

The Cascade Rules

  1. Find all declarations that apply to each element and property:


    As it loads each page, the browser looks at every element in the page to see if a rule matches it.

  2. Sorting declarations:


    Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence: 
          1. user agent declarations
      2. user normal declarations
      3. author normal declarations
      4. author important declarations
      5. user important declarations
    Sometimes, a declaration is so important that it outweighs all other considerations. CSS2.1 calls these important declarations and lets you mark them by inserting !important just before the terminating semicolon in a declaration: 
    p.dark {color: #333 !important; background: white;}

    Even an inline declarations with a color property on p element with class='dark' attribute would NOT override the !important color. 
    <html>
 <head>
  <style type="text/css">
   * {color: grey;}
   h2.imp { color: blue !important;}
  </style>
 </head>
 <body>
  <h2 class='imp' style='color: green';>this is an important
                           headline and is blue </h2>
  <h2 style='color: green';>this is NOT an
                          important headline and is green</h2>
 </body>
</html>

  3. Sort rules with the same importance and origin by specificity of selector:


    More specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.

    Specificity of selector:
    • There may exist two or more type declaration for the same html element, which can have the same property but with different values. This creates conflict in which type declaration to use.
    • The solution is to specificity values of each selector.
    • For every rule, the browser evaluates the specificity of the selector and attaches it to each declaration in the rule.
    • The type declaration with the highest specificity will be used on the element.
    • A specificity value is expressed in four parts, like this: 0,0,0,0.
    • The actual specificity value of a selector is determined as follows:
      1. For every id attribute value given in the selector, add 0,1,0,0.
      2. For every class attribute value, attribute selection, or pseudo-class given in the selection, add 0,0,1,0.
      3. For every element and pseudo-element given in the selector, add 0,0,0,1.
      4. Combinators and the universal selector do not contribute anything to the specificity .
      5. If it is an inline declaration you must add 1,0,0,0.
      Example: 
      h1 {color: red;}                      /* specificity = 0,0,0,1 */
p em {color: purple;}                 /* specificity = 0,0,0,2 */
.grape {color: purple;}               /* specificity = 0,0,1,0 */
*.bright {color: yellow;}             /* specificity = 0,0,1,0 */
p.bright em.dark {color: maroon;}     /* specificity = 0,0,2,2 */
#id216 {color: blue;}                 /* specificity = 0,1,0,0 */
div#sidebar *[href] {color: silver;}  /* specificity = 0,1,1,1 */

  4. Finally, sort by order specified:


    If two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself. CSS file: 
    h1 { font-size:16pt; color:blue;}
p {font-variant: small-caps;}
    Html file: 
    <html>
 <head>
  <title>Link Element</title>
   <link rel="stylesheet" type="text/css" href="sheet1.css" />
  <style type="text/css">
    p {font-variant: normal;}
  </style>
 </head>
 <body>
  <h1>The link element:</h1>
  <p>Links to an external style sheet (or other document type).
  Used in the head element section of the document.
  </p>
 <h1>The type attribute:</h1>
  <p>The Internet content type. (Always "text/css" for a CSS style sheet.)
  </p>
  <p style='font-variant: small-caps;'>If it is an inline declaration
         you must add : 1,0,0,0 (the highest level of specificity)
  </p>
  </body>
</html>

Inheritance

  • Inheritance is the mechanism by which styles are applied not only to a specified element, but also to its descendants.
  • Inheritance is one of those things about CSS that is so basic that you almost never think about it unless you have to. However, you should still keep a few things in mind.
  • Note that some properties are not inherited generally as a result of simple common sense. For example, the property border (which is used to set borders on elements) does not inherit.
  • Inherited values have no specificity at all, not even zero specificity. 
    <html>
  <head>
    <style type="text/css">
      * {color: gray;}
      h2#page-title {color: black;}
    </style>
  </head>
  <body>
    <h2 id="page-title">Meerkat <em>Central</em></h2>
    <p>
      Welcome to the best place on the
      web for meerkat information!
    </p>
  </body>
</html>
    Since the universal selector applies to all elements and has zero specificity, its color declaration's value of gray wins out over the inherited value of black, which has no specificity at all. Therefore, the em element is rendered gray instead of black.

Prev. in menu Next in menu
Prev. in menu Next in menu
© 2010 by Finnesand Data. All rights reserved.
This site aims to provide FREE programming training and technics.
Finnesand Data as site owner gives no warranty for the correctness in the pages or source codes.
The risk of using this web-site pages or any program codes from this website is entirely at the individual user.