Manuscript for HTML Tutorial #12

Listed below is the manuscript of all textual instructions used in HTML Tutorial #12 - Controlling Presentation with External Style Sheets. Most of this text is displayed inside the yellow balloons used to guide viewers as they watch the lessons.

Students and instructors may find it helpful to have a hard copy of these balloon instructions. You may print this web page to use as an aide in following, referencing, or demonstrating the web design series.

Manuscript Table of Contents

Entire HTML Tutorial Series

Tutorial #12 - Controlling Presentation with External Style Sheets

Lesson #12: External Style Sheets. If you're going to be using the same kind of style on more than one web page, the best way to do so is with an external style sheet. This will allow you to put all of your style rules into one file that can be linked to by all the web pages that need it. This method will not only reduce overall file size, but will also allow you to make changes to several pages, by changing only one instance of a rule. Let's see how to create one of these external style sheets. Click the play button to begin the tutorial.
To make an external style sheet, we will start by opening our plain text editor.
Now, we're not supposed to use any tags in an external style sheet.
All we need to enter are the style rules that we want to use for our web pages.
For now let's just enter the color rule that we're already familiar with. We will learn about other types of style rules in the lessons that follow.
This time let's use green for our color.
OK, now we need to save this file with a special extension.
From inside of the File menu...
...we'll select the Save As option.
We'll put our new file in the same directory as our web page, so it will be easy to link to.
We need to give it a name, and place a .css extension on the end of it.
CSS, if you remember, stands for Cascading Style Sheets.
Now we can Save.
OK, our external style sheet has been created, but we still need to link to it from our source document.
To link to our style sheet, we need to insert the <link> tag in our head section.
Now, we're going to add three different attributes to our link tag.
First we'll include rel="stylesheet", which is used to describe the relationship between this document and our style sheet.
Next we'll include type="text/css" to specify the type of style sheet language being used.
Our final attribute will be href="style.css".
The attribute href is short for hypertext reference, and denotes the location and filename of the style sheet to be used.
Since we put our style sheet in the same directory as our web page, we didn't need to specify a location, just the filename.
We don't need a closing tag, because <link> is an empty tag.
OK, let's see if it works.
Hmm... looks the same, what did we do wrong?
We left the internal style sheet from our last lesson.
An internal style sheet will override an external style sheet.
If we remove our internal sheet, the external sheet will take over.
There we go! Now that we know the different ways to apply style, we can learn how to change other aspects of our page presentation. Go ahead and create an external style sheet for your own web document, and then meet us in Lesson #13.

<<<Tutorial #11

Tutorial #13>>>