Article
CSS Is Easy!
Adding CSS Styles to HTML Documents
The simplest way of putting CSS styles in your Web pages is to use the <STYLE> tag, as I did in the example above. This lets you declare any number of CSS styles by placing them between the opening <STYLE> tag and the closing </STYLE> tag, as follows:
<STYLE TYPE=”text/css”>
CSS Styles here
</STYLE>
The TYPE attribute specifies the language that you’re using to define your styles. CSS is the only language in wide use as of this writing, and is indicated with the value text/css. Another language that is only supported by Netscape 4.x is called JavaScript Style Sheets (JSS), and is specified by text/javascript. Due to the very limited compatibility of JSS, however, it is rarely of any use.
Since Web browsers are designed to ignore any tags they do not recognize, older browsers that don’t support CSS would normally output the CSS style definitions as plain text in the document. To guard against this, it is common practice to enclose the style definitions within an HTML comment tag:
<STYLE TYPE=”text/css”>
<!--
CSS Styles here
-->
</STYLE>
While nice and simple, the <STYLE> tag has one major disadvantage. Specifically, if you want to use a particular set of styles throughout your site, you’ll have to repeat those style definitions in a <STYLE> tag at the top of every one of your site’s pages.
A more sensible alternative is to put those definitions in a plain text file (usually given a .css filename), and then link your documents to that one file. Any changes to the style definitions in that one file will affect all pages that link to it. This provides for our ideal objective of site-wide style definitions, as we mentioned earlier.
To link a document to a CSS text file (say, styles.css), place a <LINK> tag in the document’s header:
<LINK REL=”STYLESHEET” TYPE=”text/css” HREF=”styles.css”>
Returning to my original example of three headings sharing a single style, the document would now look like this:
<HTML>
<HEAD>
<TITLE> A simple page </TITLE>
<LINK REL=”STYLESHEET” TYPE=”text/css” HREF=”styles.css”>
</HEAD>
<BODY>
<H1>First Title</H1>
<P>...</P>
<H1>Second Title</H1>
<P>...</P>
<H1>Third Title</H1>
<P>...</P>
</BODY>
</HTML>
And the styles.css file would contain the style definition:
H1 {
font-family: sans-serif;
color: #3366CC;
}
Like an image file, you can reuse this styles.css file in as many pages as you need. Not only will it save you typing, but it also ensures a consistent look to the headings across your entire site.