Style sheets : Overview
Contents ]
Dr Benton

Now, let's take a closer look!

If you are familiar with HTML, you will find the recipe easy. A bit of HTML markup, a pinch of font, a touch of colour, a drop of alignment, and you are all set to satisfy your visitors' visual appetite.

Styles are defined between the <STYLE> and </STYLE> tags. You are free to create new styles or to change the built-in HTML styles. You can, for instance, change the formatting of the <H1> tag:

<STYLE>
    H1    {
       font-size: 24pt;
       font-family: Verdana;
       color: #2288FF;
       font-weight: normal;
       text-align: right
    }
  </STYLE>

As you can see from the above snippet, the font and character sizes can be modified, and you can even set a new alignment.

The <H1> style is defined here with five properties (font-size, font-family, color, font- weight, text-align) which have been assigned values (highlighted in red). There are seventy properties available ... each one having on average four options! In other words, there are virtually unlimited possibilities.

External style sheets. If you have to create a lot of styles common to many pages, you can create a stand-alone style sheet and reference it from within each of your pages. In this way, you will not overload them unnecessarily. To do this, just add to your pages a link pointing to the style sheet file. Discover how to do this in our workshops.



  1   2   3   4   5