Cascading style sheets (CSS) provide a solution to this problem. Instead of defining the Web site design in
each and every page, you can use a style sheet to control the overall layout of your site.
Then if you want to change how your site looks, you simply modify the style sheet.
Each rule begins with a selector, which is H1 in the example above.
A selector is often one or more HTML tags, and the declarations inside the rule
describe how those elements should appear.
The above CSS codes will force all H1 tags on the page to use a 12 pt Arial or Helvetica font in green text.
You can also use classes as selectors, which aren't tied to specific HTML elements...
Note that .orange doesn't mean anything special - you can use anything as a class name
provided that it starts with a period and is composed of a single word (spaces and underscores
are not allowed).
To apply a class to an HTML tag, you use the the class attribute (which was introduced
in HTML 4.0). For example, to highlight important text on your page, apply the above style
to a <p> tag...
Note that the period before the class name is not included.
How to use style sheets?
There are three ways you can use cascading style sheets...
1) Embedding CSS codes into the style attribute of HTML tags.
Most HTML tags now support this attribute, but by applying styles within your tags, you're
missing out on the benefits of keeping your content separate from your design. For example...
2) Embedding CSS codes using a style block in the HEAD section of
your HTML document. A style block is composed of an opening <STYLE> tag followed by
a set of CSS rules followed by a closing </STYLE> tag.
For example, you can make your text links change color when the mouse passes over
them by inserting these CSS codes into the HEAD of your document...
While this method is better than applying styles on a tag-by-tag basis, it still ties
the style to a particular HTML document.
3) Linking external cascading style sheets to HTML documents using a <LINK> tag
in the HEAD section of every document you wish to apply the style sheet to. For example...