Home Webmaster SIG Tools & Tips

April 15, 2004 

Cascading Style Sheets  (CSS)

Early sites used:

  • HTML extensions (tags) created for different browers
  • Converting text to images
  • Using tables to control layout

Style tags and style sheets can be used to create a similar look to elements with a web site. Developed between 1996 and 1998, CSS was developed to add to HTML not replace it.

                         Styles that "cascade" through the web page:

            

                                        

The 3 Style Types

Inline Styles:  styles are added to each tag within each page

     <tag style="attribute1:value1; attribute2:value2">

                                    style notes:  Review

     <h1 style="color:gold; font-family:sans-serif">

                                    sample: test_css.htm

Embedded or Global Styles: applied to the entire page

     <style>
          h1 {color:gold; font-family:sans-serif}
     </style>

                                   Examples   Tutorial

Linked or External Style Sheets: Created once and they linked to every page within a web site.

     Create an external page that holds your style attributes:

               style.css  (for example)

      Using simple text, place your tag and attribute information:

               h1, h2, h3, h4, h5, h6 {color:gold; font-family:sans-serif}

     Link your style.css page to each page:

               <link href="style.css rel="stylesheet">

                                sample: astro.htm

 

Additional Information

Web sites with CSS information: