Idocs Guide to HTML

Break the <FONT ...> Habit: Getting Started

Let's begin by looking at the basic structure for using styles. Styles are set by adding a <STYLE ...> element to the <HEAD> section of your page. (Later we'll look at loading styles from an external file.) So, for example, the following code, which should be copied into the <HEAD> section, sets a style rule for <H2 ...> elements:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<STYLE TYPE="text/css">
<!--
H2
   {
   color:green;
   font-size:30pt;
   font-style:italic;
   }
-->
</STYLE>

Line 1 opens the <STYLE ...> element. Line 2 opens an HTML comment. The comment hides the styles code from search engines and older browsers that don't understand the <STYLE ...> tag.

style rule diagram Line 3 begins our style rule. A style rule has two parts: the selector, which indicates which element(s) the style applies to, and a list of declarations (surrounded by curly braces) which define how the element should be presented. In line 3 the selector indicates that the rule applies to all <H2 ...> elements.

Line 4 has the opening curly brace that begins the list of declarations. The declaration in line 5 says that the font is green. 6 says that the font should be 30 points tall, and 7 says that the font should be italic. Line 8 closes the curly braces, ending the list of declarations.

Finally, line 9 closes the comment and 10 closes the style element.
The rules automatically apply to all <H2 ...> elements. So if we create a header using an <H2 ...> tag:

<H2>Education</H2>

that header is automatically rendered in green, 30 points, italic:

Education

Copyright 1997-2002 Idocs Inc. Content in this guide is offered freely to the public under the terms of the Open Content License and the Open Publication License. Contents may be redistributed or republished freely under these terms so long as credit to the original creator and contributors is maintained.