CSS Primer (Part 2)

	<STYLE TYPE="text/css">
	<!--
	H3         { font-family:Lucida; font-style:normal; color:blue }
	BLOCKQUOTE { font-family:Arial; font-style:italic; color:teal;
	             word-spacing:-0.2em }
	-->
	</STYLE>

The styles you defined will apply automatically to all instances of <H3> and <BLOCKQUOTE> throughout your document. You didn't have to use these tags-- you could have chosen LI, IMG, B, or any other valid HTML tag.

Notice the STYLE TYPE= declaration (MIME type) and the comment tags surrounding your style. It's important to use those comment tags to keep older browsers from displaying this data on-screen. This technique, by the way, is known as embedding a style sheet.

Using external style sheets
Styles can live in external documents, in the head of the current document, or you can insert them on the spot. Each technique uses slightly different syntax, though. For example, you can create an external style sheet by adding a few global styles to a blank text document, as in the screen above. Then save the file as sitestyle.css. In one of your site's documents, insert the following HTML code inside the header:

	<LINK REL=StyleSheet HREF="sitestyle.css"
	TYPE="text/css" TITLE="Test Style"> 

The document will automatically use the BODY and H3 styles declared in the external CSS file. You can have multiple global style sheets on your site and call different ones from different documents.

Roll your own
It won't be long before you'll want to apply styles to page elements that aren't necessarily associated with preexisting HTML tags. No problem, as only two things change. First, you must preface your selector (Danger, in this example) with a period.

	.Danger { position:relative; 
	          color:beige;
	          border:4pt lightgreen dotted;
	          background: black;
	          text-align:center; 
	          height:50pt; 
	          width:220pt;
	          font-size:20pt; 
	          font-weight:bold }

Second, you must attach the style to elements manually. For instance, what if you want to highlight only two words in a paragraph with the Danger class? The <SPAN> element was invented for just this reason, to surround arbitrary chunks of text and apply styles to it. Your HTML would then look like this:

	<P>As she saw the bucket coming down on my head she yelled,<BR>
	<SPAN CLASS=Danger>"Look out!"</SPAN>

Because of the nature of inheritance, and because you can link to multiple external style sheets from one document, there are bound to be conflicts to resolve. The most important thing to remember when CSS isn't doing what you want it to do is this: Go from the general to the specific. Here's a trick question: In what color will the text in <H3> below appear in a 4.0 browser?

CSS Primer (Part 1) | CSS Primer (Part 2) | CSS Primer (Part 3) | CSS Primer (Part 4) |