Directory

Top 50

Style sheets : Your first style sheet
[ Contents ]
Dr Benton

Implementing the Styles

Styles are created and modified between the <STYLE> and </STYLE> tags, and generally - although this is not mandatory - in the page head, between the <HEAD> and </HEAD> tags.

Just insert our three style definitions in the page head we created earlier:

<STYLE>
    H1      {
      font-size: 20pt;
      font-family: Verdana;
      color: #2233EE;
      font-weight: bold;
      text-align: right;
      }

    H2      {
      font-size: 16pt;
      font-family: Verdana;
      color: #2288FF;
      font-weight: normal;
      text-align: right;
      }

    H3      {
      font-size: 10pt;
      font-family: Verdana;
      color: #000000;
      font-weight: normal;
      text-align: justify;
      }

</STYLE>
A CSS statement begins with the targeted tag name, followed by a list of style rules enclosed between two braces. As you may have noticed, to set a property to a specific value, you just need to specify its name followed by a colon, then its new value (here, red) followed by a semi-colon.

Reload the page. Now it looks completely different from our initial page, doesn't it? This is the magic of style sheets!



Graphical Definition of the Styles
  1   2   3   4 
Close-up of some Properties