Cascading Style Sheets (CSS)

• CSS give a convenient way to customize web-pages: one can easily change the appearance of each occurence of an element (e.g., change the vertical spacing between items in a list), can define rules that can be invoked for in a particular case.
• Furthermore, these can also be changed easily.
• Below are examples for the above-mentioned features.
  • This will change the top and bottom spacing of each list item, LI:

    li {
    /*	font-family: "Times New Roman", Times, serif; */
    /*	font-size: x-small; */
    /*	font-style: italic; */
    /*	font-weight: bold; */
    	padding-top: 4px;
    	padding-bottom: 4px;
    }
    	  

    The lines enclosed between /* and */ are comments, so have no effect now but indicate some of the other customization option.
  • This affects the content to which it is applied:

        .veryemphatic
        {
        color: red;
        font-weight: bold;
        font-size: larger;
        }
    	    

    One can use it where needed as
    
    <span class="veryemphatic">SOMETHING</span>
    
    which looks as SOMETHING.
  • This modifies P:

    P.emphatic
       {
       color: red;
       font-weight: bold;
       font-style: italic;
       font-size: x-large;
       }
    	  

    It can be used as
    
    <p class="emphatic">SOMETHING</p>
    
    The result is

    SOMETHING

• To use CSS one can do either of the following, each best in certain situations (see also ID, CLASS and STYLE at
  http://www.htmlhelp.com/reference/html40/attrs.html):
  • write the commands in a file, and load the file in the HEAD section of the document:
    
    <LINK REL=StyleSheet HREF="../CSS/style.css" TYPE="text/css"></LINK>
    
    
  • enter the CSS commands directly in the HEAD portion of the document:

      <style  TYPE="text/css">
    <!--
       .red
       {
       color: red;
       }
    -->
    </style>
      

  • enter the CSS commands at the place where they are used (if this is not part of an HTML tag, use SPAN):
    
    <u style="font-size: x-large; color: blue; font-family: fantasy">The Quick Brown Fox Jumps Over The Lazy Dog.</u>
    
    This looks as
    
    The Quick Brown Fox Jumps Over The Lazy Dog.
• The "generic" font-styles (as fantasy above) are serif, sans-serif, monospace, cursive and fantasy. They depend (as always) on how the brower renders them.
  See more at http://www.w3.org/Style/Examples/007/fonts.
• Here are a few links that describe CSS (Cascading Style Sheets):
  • Some basic properties (see ID, CLASS and STYLE) are discussed at
    http://www.htmlhelp.com/reference/html40/attrs.html
  • http://www.htmlhelp.com/reference/css/
  • http://www.w3.org/Style/Examples/007/
  • For much more info, see http://www.w3.org/Style