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">  </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:

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

Education

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