Templates Lesson

CSS External Styles - Templates Lesson

External style sheets allow you to create a separate text file which defines style properties, and then apply those styles to a collection of documents. If I have 100 Web pages which describe my products, I can create a CSS file which controls the look of all 100 pages. When I change the values in the CSS file the look of all 100 pages changes instantly.

1. Create 3 products pages for the funny fake fish site. Here is the code for the first page, you should be able to figure out how to make the other files.

<HTML>
<HEAD>
<TITLE>product page #1</TITLE>
</HEAD>
<BODY bgcolor="ffffff">
<br /> <br />
<font size=5>
<br /> product page #1 <br /> <br />
css code from a linked file controls my headings </font> <br /> <br />
<A HREF="csslink2.html">check out the second page</A>

<H3>I am a plain old boring heading 3 tag, CSS code from a linked style sheet controls my look</H3>
<H3 >I am a plain old boring heading 3 tag, CSS code from a linked style sheet controls my look</H3>
<H3 >I am a plain old boring heading 3 tag, CSS code from a linked style sheet controls my look</H3>
<H3 >I am a plain old boring heading 3 tag, CSS code from a linked style sheet controls my look</H3>
<H3 >I am a plain old boring heading 3 tag, CSS code from a linked style sheet controls my look</H3>
<H3>I am a plain old boring heading 3 tag, CSS code from a linked style sheet controls my look</H3>
</BODY>
</HTML>

2. Save the file as csslink1.html

3. Create 2 more files and save them as csslink2.html and csslink3.html

At this point I have used the H3 tag in 7 places on 3 pages. The H3 tag produces bold text in the default text of Times Roman and the color black - ho hum, pretty boring.

boring page 1 || boring page 2 || boring page 3

4. Open up your text editor and create a new file which will become your external style document. Place only this text on the page. This code is CSS code which creates a rule for the H3 tag NO HTML TAGS are needed, this is not a Web page it is a CSS page.

H3 {color:#006666; font-size:18pt; font-family:Impact; background-color:#99cccc}

5. Save the file as "mystyles.css" and place it in the same directory as my 3 products pages. Naming the file with a .css ending is essential

6. Now I open up the csslink1.html, csslink2.html, and csslink3.html pages and include this code in the head of the document

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

Your first page should now look like this.

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

<TITLE>product page #1</TITLE>
</HEAD>
<BODY bgcolor="ffffff">
<br /> <br />
<font size=5>
<br /> product page #1 <br /> <br />
css code from a linked file controls my headings </font> <br /> <br />
<A HREF="css-test3b.html">check out the second page</A>

7. Save all 3 linked files and view them in the browser.

page 1 w/CSS || page 2 w/CSS || page 3 w/CSS

Now when I view the 3 products pages I notice that on each page all 7 instances of the H3 code are now formating text as green the font is impact, the size is 18pt and there is a lighter shade of green background color behind the text.

If I go into the .css file and change the color of the font property to light green, and the background to dark green when I view these pages in the browser all the text has changed to the new settings. I can change 7 tags on 3 pages for a total of 21 changes, by changing one CSS file.

I don't know about you but I'm getting goose bumps!! Remember I said I had 100 products pages, by using a linked stylesheet I could change all 100 pages with one change of the .css file.