CSS Lesson 2

Style files continued

Now add an extra line in the 'head' section of your template file:
<link rel="stylesheet" type="text/css" href="page.css" /> Note that the 'link' tag is a self-closing tag. There is an additional attribute for the 'link' tag. The 'media' attribute allows you differentiate between different media displays. For example, You could change the font on the screen for something completely different on the printed version. Again, you could omit the navigation and any advertisements on the printed version.

Media values
screen
print
projection
braille
speech
all

Internal Styles

Style restricted to a given page, can be included in the head section of that page. The 'style' tag has a required attribute 'type="text/css"' and an optional 'media attribute. E.G.:
<style type="text/css">
body {
   background-color: #ffffaa;
   color: #000099;
   margin-left: 5%;
   font-family: Arial, verdana, Helvetica, sans-serif;
   font-size: small;
}
.cen {
   height: auto;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
}
</style>
Some older browsers may display these rules. A possible solution is to include the rules in an html comment.

Inline Style

Finally, 'style' can be introduced into a tag as an attribute. The attribute value is the rule with no curly brackets. E.G.
<h3 style="background-color: #666666; color: #ffcc00;">Like this</h3>
Which gives an orange heading on a dark grey background.