There are three different ways of including style sheets in HTML pages. All three can be combined, but in case of contradictory definitions method 3 will (usually) override method 2, and method 2 will override method 1. Which one you use depends on what you want to achieve:
Use: For formatting multiple pages in the same way, possibly with the same colours, without having to enter the appropriate HTML tags over and over again. Additional benefit: less code on each page, follows faster loading. Drawback: If the style sheet file can't be found, you get a 404 Not Found error and the whole webpage doesn't load.
How: Create a standard ASCII file containig nothing but the style sheet
definitions. Explanatory text has to be commented out the way it is done in C
code: /* some text */. Save the style sheet file preferably with the file
extension *.css. Import this file into your HTML page using the link:
<link rel=stylesheet type="text/css" href="filename.css"> which should
be placed in the header.
For this link, the same rules for URL reference as for any other links apply. For
example, the style sheet page of this file is one directory up, so the link is:
<link rel=stylesheet type="text/css" href="../cpmain.css">.
This is an example of what a style sheet file could look like:
/* this is a sample style sheet file */
/* named sample.css */
br { line-height:12pt }
ul { font-family:Arial; font-size:10pt } |
Use: For formatting a single page with styles valid for the whole page.
How: Put the style definitions into the header of your HTML file between the tags <style type="text/css"> and </style>. Between them, it looks the same as in an extra style sheet page. A sample:
<HTML>
<HEAD>
<TITLE>The Style Sheet Turorial</TITLE>
<STYLE type="text/css">
br { line-height:12pt }
ul { font-family:Arial; font-size:10pt }
</STYLE>
</HEAD>
<BODY>
|
Use: For formatting a single tag without disturbing other tags of the same kind in the same page.
How: Put the style sheet definition into the tag it is to apply to, like this: <br style="line-height:12pt">.
The examples in the following pages assume method one or two, but it should be easy to derive method 3 from them.
back to BEGINNING
next chapter:
generic code
