Levels - CSS tutorial

CSS: WHERE TO PLACE IT :

ENTIRE SITES

CSS can be defined for entire sites by simply writing the CSS definitions in a plain text file that is referred to from each of the pages in the site.

Rather than writing the entire CSS definition on each page, as in the previous examples, you can write it to a text file that is only loaded on the first page that a visitor sees at your site.
When the visitor jumps to other pages, the CSS text file will be cached and thus doesn't have to be transferred via the internet for subsequent pages.

This means that your pages will load faster while at the same time you will have extreme flexibility to change the style for your entire site even after it has been made.

Look at this example:

File: example.html

<html>
<head>
<title>MY CSS PAGE</title>
<link rel=stylesheet href="whatever.css" type="text/css">
</head>
<body>
<span class="headlines">Welcome</span><br>

<div class="sublines">
This is an example of a 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>

The above example is the exact same as we used for CSS defined for entire pages, with one important exception:
There is no style definition on the page. Instead we added a reference to an external style sheet:

This means that the browser will look for a file called whatever.css and insert it at the place where the reference was found in the
html document.

So in order to complete our example we need to have a file called whatever.css that looks like this:

File: whatever.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;}

Now if you just add the line <link rel=stylesheet href="whatever.css" type="text/css"> to the <head> of all your pages, then the one style definition will be in effect for your entire site.

Imagine the power and flexibility this gives you to make changes to the layout even after the site is done.
But also realize how using an external style sheet will guarantee that all pages are following the same thread.
There won't be single pages that you forgot to update when you decided to change the style for your headers.

At this point of the tutorial you should know:

1: how to define styles for tags, classes and objects with ID's.
2: how to group styles and make them context dependent
3: how to add styles to single tags, single pages and entire sites

All we need now is a walkthrough of the various style attributes that can be assigned.

We will divide them into three categories:

1: Inline attributes. (Works on tags like: <SPAN>, <B> and <I>).
2: Block attributes. (Works on block tags: <DIV>, <TD> and <P>).
3: Link attributes. (Works on links and use a special syntax).

<< PREVIOUS