Home » Misc Cool Stuff » documentation

Style Sheet Notes

Here are some notes that I have compiled over the years while at college and building my web site. This Note Set is on Style Sheets, a document or header specification that a developer can use to customize (define, but who wants to get technical) thier website. I am hoping to put most into terms that the everyday Joe can understand. This will be specifically usefull when I have been copy->paste programming over the years and forgotten some aspects. Style Sheets Notes
  1. I recommend to specify external style sheets 
     
    2.  
  2. Grammar / Syntax
    3.  
       
    1. Block: A block starts with a left curly brace ({) and ends with the matching right curly brace (}). 
       
      BODY { 
         font-family: "Gill Sans", sans-serif;
         font-size: 12pt;
         margin: 3em; 
      }
       
      2.  
         
      1.  Body is my example of a  HTML element that we want to customize with our style sheet. This is called a rule!
         
        2.  
      2. Enclose the properties (like font-family:sans-serif;) in curly brackets. 
         
        3.  
      3. Each property customizes the page using the style sheet by defining (or inherit) how the HTML tag specified is displayed. CSS2 has more than 100 different properties, including "font-family".
        4.  
      4. Notice 12pt on the font-size property: The "point" unit is commonly used in print-based typography to indicate font sizes and other length values. It"s an example of an absolute unit which does not scale relative to the environment.
        5.  
      5. Notice 3em on the margin property:  The "em" unit refers to the font size of the element. In this case the result is that the margins around the BODY element are three times wider than the font size.
        6.  
       
    2. At Rules:  At-rules start with an at-keyword, an "@" character followed immediately by an identifier .
       
      @import "subs.css";
       
      3.  
    3. Selector: The selector consists of everything up to (but not including) the first left curly brace ({). 
       
      H1, H2 {color: green }
       
      4.  
    4. Declarations or Properties:  A declaration is either empty or consists of a property, followed by a colon (:), followed by a value. 
       
      H1 {
        font-weight: bold;
        font-size: 12pt;
        line-height: 14pt;
        font-family: Helvetica;
        font-variant: normal;
        font-style: normal
      }
       
      5.  
         
      1. Relative units
        2.  
           
        1. em: the "font-size" of the relevant font
          2.  
        2. ex: the "x-height" of the relevant font
          3.  
        3. px: pixels, relative to the viewing device 
          H1 { margin: 0.5em }      /* em */
          H1 { margin: 1ex }        /* ex */
          P  { font-size: 12px }    /* px */
           
          4.  
         
      2. Absolute length units (only useful when the physical properties of the output medium are known)
        3.  
           
        1. in: inches -- 1 inch is equal to 2.54 centimeters.
          2.  
        2. cm: centimeters
          3.  
        3. mm: millimeters
          4.  
        4. pt: points -- the points used by CSS2 are equal to 1/72th of an inch.
          5.  
        5. pc: picas -- 1 pica is equal to 12 points. 
           
          H1 { margin: 0.5in }      /* inches  */
          H2 { line-height: 3cm }   /* centimeters */
          H3 { word-spacing: 4mm }  /* millimeters */
          H4 { font-size: 12pt }    /* points */
          H4 { font-size: 1pc }     /* picas */
           
          6.  
         
      3. Percentages
        4.  
      4. URL
        5.  
      5. Counters
        6.  
      6. Colors
        7.  
      7. Angles
        8.  
      8. Times
        9.  
      9. Frequencies
        10.  
      10. Strings
         
        11.  
       
    5. Comments:  Are normally done by using /* and */.
       
       
      6.  
     
  3. XML
    4.  
 Continue at http://www.w3.org/TR/REC-CSS2/syndata.html#keywords and http://www.w3.org/TR/REC-CSS2/intro.html
 

    
»