Levels - CSS tutorial

CSS: WHERE TO PLACE IT :

SINGLE PAGES

CSS can be defined for entire pages by simply adding a style definition to the head section.

Look at this example:

<html>
<head>
<title>MY CSS PAGE</title>
<style type="text/css">
.headlines, .sublines, infotext {font-face:arial; color:black; background:yellow; font-weight:bold;}
.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size: 10pt;}
</style>
</head>

<body>
<span class="headlines">Welcome</span><br>

<div class="sublines">
This is an example page using CSS.<br>
The example is really simple,<br>
and doesn't even look good,<br>
but it shows the technique.
</div>

<table border="2"><tr><td class="sublines">
As you can see:<br>
The styles even work on tables.
</td></tr></table>

<hr>

<div class="infotext">
Example from EchoEcho.Com.
</div>

<hr>
</body>
</html>

In the above example, although we used the sublines style twice, we only had to define it once: in the <head>section.

By defining styles for entire pages, you will gain the freedom to easily change the styles even after the entire page has been made.

This is an obvious advantage for you as a designer. But the advantage is on the visitors side as well.

Since the styles are only defined in one place, the page size will be smaller, and thus faster to load.

There is a way to emphasize these advantages even more: using external CSS styles that work for entire sites.

<< PREVIOUS