Stylesheets and Classes

To re-use styles at multiple places in a document, you collect them in the head of your document and enclose them in a <style> element, like this:

<head>
<style type="text/css">
.warning {
	background-color: #ffffcc;
	color:red;
}

.bright {
	color: magenta;
	font-family: Helvetica, Arial;
	font-size: 18pt;
}
</style>
</head>

We took all the material in each style= attribute, put it inside curly braces instead of quote marks, and preceded it with a name that starts with a dot. This name is called a class name.

Now we can call up those styles by referring to their class names:

Try our 
<span class="bright">new improved</span>
cleaning fluid.
<span class="warning">Do not mix with ammonia.</span>
It's <span class="bright">easy to apply!</span>
<span class="warning">Keep out of reach
   of children.</span>

Which looks like this:

Try our new improved cleaning fluid. Do not mix with ammonia. It's easy to apply! Keep out of reach of children.

Specifying Multiple Aspects Index Summary