The STYLE Element & CSS Selectors - The Human Factor

One of the other things you might have noticed in the previous example is that the values of the style attribute can get very long. It would be pretty inconvenient if we had to insert all of those declarations (and there are more, many more) in every element we wrote.

The first thing that comes to mind is specifying the style for each type of element once and then having every instance of the element appear as we wished. So we could just say somewhere that we want all H1 elements to appear centered, bold italic and red and have the browser do the job of applying this style to each H1 element. We can do this by using a Style Sheet. A Style Sheet is a file that contains information about how a document should be rendered.

CSS Style Sheets consist of CSS statements. The most commonly used type of statement is a rule set. A rule set consists of a selector and any number of directives enclosed in a block. A block is enclosed in a pair of braces ({ and }). Sound complicated? It isn't, really. Here is an example of a rule set:

H1 { 
 text-align: center;
 color: red;
 font: bold italic 150% sans-serif;
}

The H1 part in the example is the selector. The selector indicates which elements the style directives apply to. In its simplest form, a selector is simply an element name, as above, where the elements referred to are all H1 elements. Following the selector, inside braces ({ and }), are the directives that we wish to apply to these elements.

Let's add a little spice to our style sheet. Let's make our paragraphs left and right justified and give them a left margin and a decorative border. Don't worry too much about the property syntax at this point; we'll cover each of these properties in detail soon. For now, most of this should be obvious.

H1 {
 text-align: center;
 color: red;
 font: bold italic 150% sans-serif;
}
P {
 text-align: justify;
 color: blue;
 margin-left: 2cm;
 border-left: 2px solid green;
}

Now we have a nice stylesheet for our document. What we need is a way of linking this stylesheet to the document itself. The easiest way to do this is by using the STYLE element. The STYLE element is another document head element. It contains a stylesheet that applies to the document. Here is its syntax:

The TYPE attribute is required and indicates the style language used. CSS is not the only stylesheet language for HTML in use today, although it is the most widely supported. CSS is, however, the default stylesheet language for HTML, so you can use it in the STYLE attribute without specifying that it is CSS. If you wish to explicitly state the default stylesheet language, you can use the HTTP header Content-Style-Type to specify the MIME type of the stylesheet language. This can be accomplished by using the META element like this:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

Produced by Stephanos Piperoglou

All Rights Reserved. Legal Notices.

URL: https://www.webreference.com/html/tutorial5/4.html
Created: August 20, 1998
Revised: August 20, 1998