Cascading Style Sheets

• Home • News • Beverage Preparation • Photo's • Crazy Stuff • H E L P • Links To Other Sites •


What are Cascading Style Sheets (CSS)?
Cascading Style Sheets are an automated way to apply formatting to multiple or selected pages within a website.  They are written by using a variant of HTML (HyperText Markup Language).  All of the functions that can be used within the CSS document, can also be placed in the original HTML source of your webpageAdding the same HTML to vast amounts of pages would become a long and laborious task, and in theory would be impractical.  This is where Cascading Style Sheets come into play; you designate how the presentation of your web pages should look, then apply the CSS file to all the pages.  The next time you view your web pages, you will see the results, all of your pages will have applied the same formatting.

 

How do I create a CSS?

Using FrontPage 2000, File, New, Page.  In the new dialogue box that is opened, select the Style Sheets tab, and double click Normal Style Sheet

When the new page is opened, just above where the text curser is located you will see new_page_1.css

 

CSS Commands

All CSS command start with a tag for a specific function.  For example the letter a is in reference to hyperlinks, the letter p paragraphs.  Next :<value> may follow.  Not all are followed by an extra value.  For example:

If you were to type: 

                   a:link         { color: #FFFF00 }

                   a:visited     { color: #FFFF00 }

a:active     { color: #FFFF00 }

   

  • a:link refers to the standard colour of any hyperlinks on your webpage
  • a:visited refers to links that have previously been followed
  • a:active refers to the link that has last been selected and is thus active
  • Colour: any colour using the HEXADECIMAL code, most paint packages will tell you this code.

                   a        { text-decoration: none }

This removes the underline from hyperlink, something that you can see I have used on the design of this site.

 

Commands for more complex formatting

To apply formatting to the main body of your page you would have to do the following: 

                    body          { font-family: Verdana, Ariel, Helvetica; font-size: "2"; color: #FFFF00; background-color: #000000 }

  • font-family:  Specifies, in order of preference, which fonts the user is presented with when viewing your page.  If, the case above, Verdana isn’t available, then Ariel would instead be used,

  • font-size:  How large your font will appear,

  • color:  What colour the text will be,

  • background-color:  The background colour of the page.

Other commands that can be used when formatting text are:

                   font-style:
                   font-variant:

  • font-style: bold, underline, italics, normal

  • font-variant: small-caps

What now?
This has only been a basic starter into cascading style sheets, more information will be added shortly, but in the meantime please visit the link below.  This site has more detailed information and a comprehensive list CSS functions

http://www.w3.org/TR/REC-CSS1

© 2001. A Snooze UK Production. All rights reserved