To use a style sheet, you need to insert it in the <head> element in between the following tags:
<style type="text/css"> …Insert Stylesheet Here … </style>
You may also place it in a separate file called "stylesheetname.css". You then attach the stylesheet file to your web page by placing the following inside the <head> element.
<link rel type="stylesheet" type="text/css" href="stylesheetname.css" />
In CSS you can either re-define the appearance of HTML elements or define your own elements.
For instance, the <h2> element is not normally displayed in italics in HTML. If you wanted it to appear in italics, you would place the following in your stylesheet:
h2 { font-style: italic; }
Another option is to apply styles to a particular element through its class attribute. For instance, you might wish to designate a certain set of properties which can be applied to any element:
.title {
font-style: underline;
font-size: 300% ;
}
If you did this, then the elements <h2 class="title"> and <p class="title"> would both appear underlined and 300% bigger.
There are hundreds of CSS properties. The way to learn them is through tutorials and googling what you want to do.
One important feature of CSS is the ability to fool the browser into recognising elements not defined in the HTML DTD. You do this with the <div> and <span> elements. These are elements which only have three properties: style, id, and class. Here is an example of how they are used.
<html>
<head>
<style type="text/css">
#poem
p {
margin-left: 50px;
margin-top: 1px;
margin-bottom: 1px;
}
a {color: #00CC33;}.not_a_poem {text-size: 200%;}
.red_word {color: red;}
</style>
</head><body>
<div style="font-weight: bold; text-align: center;"> Title of a <span class="red_word">Poem</span>
</div>
<span class="red_word">poem</span>
<div id="poem">
<p>Whan that Aprill with his shoures sote</p>
<p>The droghte of Marche hath perced to the rote</p>
<p>And bathed every veyne in swich licour</p>
<p>Of which vertu engendred is the flour</p>
</div>
<div class="not_a_poem">
<p>Here is some text that is not a <span class="red_word">poem</span>.</p>
</div>
<div id="link">
<p><a href="#">This is an empty link</a>.</p>
</div>
</body>
</html>