CSS Tutorial -

EXTERNAL FILE - CSS FOR LOTS OF PAGES

We have really gone wild with CSS and made a page with lots of classes in the <HEAD>.

Then we make one or more new pages and discover that we are copying and pasting all the classes from the first page into the other pages! This doesn't seem right.

Well, the people who developed CSS didn't think that was a nice way to go so they said, "Let's allow the developer to make one CSS file and then just link to it in any other file!", i.e. an external file.

So they did by defining this code to be put in the <HEAD> of any page:

<HEAD>
<LINK REL=STYLESHEET TYPE="text/css" HREF="filename">
</HEAD>
Example: <LINK REL=STYLESHEET TYPE="text/css" HREF="mycssstyles.css">

WOW! Is that simple. So, you can make a separate file, which can have a file extension of .htm, .html, or .css, with just the style classes in it and then link to it from any other page. This file is an external style file. But wait! what does this "external file" look like?

Using our lotsofstuff class we defined in the previous lesson, the file, which is named mycssstyles.css, would look like this:

<--
.lotsofstuff {
font-weight:bold;
font-style:italic;
font-size:16px;
letter-spacing:5;
color:blue;
}
-->
Hold on! That's it? Nothing else?
Correct, nothing else. And be sure that you use the <-- and --> as the first line and last lines in this CSS Style file.
And you can define as many CSS Styles as you wish in this file.
Now that you can make a CSS Style file you might as well know that you can define a style for any HTML tag you wish that will override the normal or default style.
Suppose you want every single use of the paragraph tag, <P>, to have the first line indented 20 pixels, i.e. 20px. Then you would put this line of code in your file, mycssstyles.css:
P {text-indent:20px}
Note that there is no semi-colon in the above as only one property is defined.

Can you have more than one linked CSS Style file? Certainly. For example, can you have:

But, any class or ID name in style3.htm that has a same class or ID name as a style in style1 or style2 will take precedence! In other words, the style name used is the last style that is read in.

IMPORTANT PRECEDANCE NOTE!

CSS Styles that are defined in the page's <HEAD>, take precedance over those use in the linked style, the external style.

The is one last CSS concept that is useful at times. It is called positioning! Click on Next CSS Lesson to learn a bit about positioning.