Internal Style Sheets, the Style tag and Classes

The drawback of an inline style is that it only allows us to change a single tag the one it sits inside.
If we want to change the look of several parts of a webpage a better way is to use Internal Styles by creating style rules called Classes.

By creating and naming a class we can apply that style to several elements by just adding the class to an html tag.

In the example below we place Style tags in between the opening and closing head tags of a page and create a rule called .billy
We apply .billy to any element we choose by adding the attribute class='billy' to the element.

<head>
<style type='text/css'>
.billy {background-color:tan;color:sienna;font-size:16pt;border-style:ridge;}
</style>
</head>
<body>
This <span class='billy'> text </span> was formatted with a Class definition.
This text also uses the same class to <span class ='billy'> display text</span>
</body>

Here is what .billy will look like when applied to some text.

This text was formatted with a Class definition. This text also uses the same class to display text


Exercise
1. Build the web page above