Style Sheets

Style Sheets are a good way of maintaining a consistent look throughout a Web site. They work by separating the look of a site from its contents. This means that you can define how a page looks externally to the page itself.

Not all Web browsers support Style Sheets, so don't lean on them too heavily if you want your pages to work in older browsers.

Style Sheet rules are used to create the look of your page: A Style Sheet Rule Here is an example of a Style Sheet rule, to demonstrate the different elements of rules
H1 {color: blue}

 In the example above the H1 part of the line is called the SELECTOR
the {color:blue} part is called the DECLARATION

 Each DECLARATION is made up of 2 parts - the PROPERTY (in this case color), and the VALUE (in this case blue.).

Creating Style Sheet Rules

Here are some points to remember when creating Style Sheet Rules

  • Each rule has a selector and a declaration (see above)
  • Each declaration has a property and a value (see above)
  • Each declaration is surrounded by brackets - { }
  • Each property and value is separated by a colon - :
  • Selectors separated by spaces are acted on in combination - e.g., b i {color: blue} would apply only to bold italic text
  • Selectors separated by commas share the same rule - e.g., b, i {color: blue} would apply to bold and italic text
  • Multiple declarations are separated by semicolons - ;

Adding Style Sheets to your Site

You can define the look of your site using Style Sheets in two ways:

  1. Adding Style Sheet rules into your Web page
  2. Creating a file which contains the Style Sheet rules, and then linking to this file in your Web pages.

If you use the second technique, you only have to change one file and the style of your pages changes across the site.

Creating an External File

  1. Using a text editor create a file which contains all the style rules you want to apply to your site;
  2. Save this file with the file extension .css (this denotes that it is a Cascading Style Sheet)
  3. To use the Style Sheet in a Web page you need to include the line

    4. <link REL=stylesheet href="[name_of_file].css" type="text/css">

    in the header part of your html document.

This should then apply the style rules you have created in the page.