Home Up Overview Introduction Selectors Placing CSS Text Colors Measure Links Lists Cursors

 

Where to Place Your CSS
CSS can be added to your web pages at three different levels.

You can create CSS styles to affect a single tag.

Single tag CSS is recommended when that style appears in a single place on the entire site.

Usually a certain style appears more than once on your web pages, so you should add styles that are defined once for the entire page.

If that certain style is used on more than a single web page, you should use the third - and most powerful - technique: add styles defined once for the entire site.
CSS to a Single Tag

CSS can be defined for single tags by simply adding

style="style_definition:style_attribute;"   to the tags.

Look at this example:

It is <b style="font-size:16px;">NOT</b> me.

You should limit your use of single tag CSS.

If you define your styles for each tag used, you will lose much of the power associated with CSS.

For example, you will have to define the style whenever it is used on that web page, rather than just defining it once and then referring to that one definition whenever it is used.

Furthermore, if you wanted to change a certain style, you would have to change it all over in your document, rather than in one place.
CSS to a Single Page

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

Look at this example:

<html>
<head>
<title>a 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>
<p class="headlines">Welcome</span><br>
<p class="sublines">
This is an example page using CSS.<br>
The example is really simple, and doesn't even look good, but it shows the technique.

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

<hr>

<p class="infotext"> example on css applied to a single page.

<hr>

</body>
</html>

In the above example, although we used the sublines style twice, we needed to define it once: in the web page's <head> section.

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

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

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

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

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

Rather than writing the entire CSS definition on each page, as in the previous example, 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 does not 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 the flexibility to change the style for your entire site even after it has been made.

example: 

<html>
<head>
<title>my CSS page</title>
<link rel=stylesheet href="whatever.css" type="text/css">
</head>

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

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

<hr>

<p class="infotext"> example on css applied to a single page.

<hr>
</body>
</html>

The above example is the same as the one used previously 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:

<link rel=stylesheet href="whatever.css" type="text/css">

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.

To complete our example a file called whatever.css must exist and it can look 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;}

To the <head> of all the site's web pages we add the line 

<link rel=stylesheet href="whatever.css" type="text/css"> 

 then the one style definition will be in effect for your entire site.

Precedence of CSS

What happens if there are multiple definitions of CSS for the site, the web page and inline?

Suppose there is a CSS style defined for the <b> tag in an external CSS stylesheet and a CSS style for the <b> tag for a page?  Which one is used?

The rule is this: inline CSS outranks both external and page CSS.  Also, page CSS outranks external CSS.