The Advantages of Style Sheets - The CLASS and ID tags
(Page 3 of 4 )
As shown briefly earlier, style sheet properties can be specified according to the tag -- P, H1, FONT, etc. This is the power of style sheets in styling the page as a seamless process. We can apply a variety of different classes to various tags. Using the internal style sheet example:
<HEAD>
<TITLE>Change the paragraph colour and size</TITLE>
<STYLE TYPE="text/css">
P.colorchoice1 { font-size: 3; color: blue; }
P.colorchoice2 { font-size: 3; color: red; }
</STYLE>
</HEAD>
This is the same as the example on the first page of this article except that it can set two different colors for the <P> tag lines in the HTML code. They keep the font type and size the same but apply two different colors -- blue and red. Any different style can be applied to the same tag as shown above. Remember that hex values can be applied here too; for example, red would be #990000.
On the first page, it was briefly explained how to apply class names. For the example above, the P tag can be given the two color properties like this:
<p class="colorchoice1">
The text is blue
</p><br>
<p class="colorchoice2">
The text is red
</p>
The resulting displayed text would be:
The text is blue
The text is red
You can also use the ID selector to define any styles for the HTML code. This is done via the # symbol. Looking at the example above:
<HEAD>
<TITLE>Change the paragraph colour and size</TITLE>
<STYLE TYPE="text/css">
p#colorchoice1 { font-size: 3; color: blue; }
p#colorchoice2 { font-size: 3; color: red; }
</STYLE>
</HEAD>
The HTML display will show the page text that uses the ID of colorchoice1 or colorchoice2. So in the main body of the HTML code:
<p id="colorchoice1">
The text is blue
</p><br>
<p id="colorchoice2">
The text is red
</p>
The ID selector can be left as a single property and used for any of the HTML tags again simply by omitting the tag specification:
#blue {color: blue}
Next: Final Working Examples >>
More Style Sheets Articles
More By Stephen Davies
/ 5 
