John Barclay

Programming

CSS Terms for Brownbag

CSS Rule Components

selector { property: value; }
h1 { color: red; background: yellow; font-size: 1em; }
  • CSS rule. The entire line of CSS above is a rule.
  • selector: H1 in the rule above
  • declarations: "color:red" and "background: yellow"
  • declaration block: Everything in the "{}s"
  • element: An html element such as DIV, UL, LI, BODY, etc.
  • properties: font-size, background, and color
  • values: red, yellow, 1em
  • units: em in the example above.

Selector Types

  • Grouping Selectors: One or more selectors separated by commas. H1, H2, H3, H5 {color: purple;}
  • Universal Selector: * {}
  • Element Selector: h1 { ... }, p { ... }
  • Class Selector: .intro {}, .nav {} <div class="footer">my footer </div>
  • ID Selector: #nav {} , #footer {} <div id="footer">my footer </div>
  • Pseudo-Class Selector: :visited { ... }
  • Contextual Selector: any combination of more than one of the above in a selector

Other Terms

  • document tree. seeing an html document as a tree
    • root element: html
    • children. head and body elements are children of the html element
    • body and head elements are siblings of each other
    • html is parent of body and head elements
    • ancestors are any elements above an element in the tree. html is an ancestor of all elements
    • descendants are any element below an element in the tree. h1 is a descendant of both the html and body element.
  • cascade is the process by which a style system determines which value for each property to apply to each element. Cascading (sort) order:
    1. match rule's selector must match the element's location and attributes and media type. Only look at rules relevant to media type being used.
    2. by weight (!important or not) and origin (author, user, user-agent)
      • author stylesheets, user stylesheet, user agent stylesheet
      • for !important rules, user style sheets, author stylesheets, user agent stylesheets
    3. by specificity.

      A selector's specificity is calculated as follows:

      • count the number of ID attributes in the selector (= a)
      • count the number of other attributes and pseudo-classes in the selector (= b)
      • count the number of element names in the selector (= c)
      • ignore pseudo-elements.

      Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity. 

      UL OL+LI      {}  /* a=0 b=0 c=3 -> specificity =   3
#x34y         {}  /* a=1 b=0 c=0 -> specificity = 100
UL.LeftFlush OL+LI      {}  /* a=0 b=1 c=3 -> specificity =   4
    4. Finally, sort by order specified: if two rules have the same weight, origin and specificity, the latter in sequence specified wins.
  • inheritance. Some properties of an element will be inherited from its ancestors, especially those dealing with fonts and typography. If something isn’t looking the way you expected it to, it may be inheriting properties from an element further up the tree.

Sources

 

drupal member
| home | programming | family |