An Inroduction to Cascading Style Sheets

Cascading Style Sheets (css) provide a way to specify the style of your page elements (e.g spacing, margins, fonts, etc) separately from the content of your document. This separation of style from content provides a way to create consistency of style across your entire web site and makes it easy to manage changes.

Useful Links:

3 Ways of Including Styles

  1. inline: not particularly useful because it does not provide separation of content from style.
  2. internal (in the header): useful if you want to apply the style only to one document.
  3. external file: fully separates style from content. Used when a consistent style is desired across many web documents.

Example

<HTML>
  <HEAD>
    <TITLE>title</TITLE>
     <LINK REL=STYLESHEET TYPE="text/css" 
        HREF="myStyles.css">
     <STYLE TYPE="text/css">
           H1 { color: blue }
    </STYLE>
  </HEAD>
  <BODY>
    <H1>Headline is blue</H1>
    <P STYLE="color: green">While the paragraph is green.
  </BODY>
</HTML>

Precedence

When more than one way of including styles is used then:

Creating Internal Styles

Internal styles are specified in the head section using the style tag as shown in the example above.

If more than one tag shares the same property value, then the tags can be grouped. Note, this does not mean the tags are identical. They still have the default values for all of the properties not specified in the style. 

<STYLE TYPE="text/css">    
   H1, H2, H3 { font-family: helvetica }
</STYLE>

Similarly, property declarations can be grouped:

<STYLE TYPE="text/css">    
H1 { 
  font-weight: bold; 
  font-size: 12pt;
  line-height: 14pt; 
  font-family: helvetica; 
  font-variant: normal;
  font-style: normal;
}
</STYLE>

Note the general syntax above:
  tag-name, tag-name, ... { property : value; property : value;...}

For more see W3C Cascading Style Sheets, level 1