Lesson 14B - Cascading Style Sheets/Master Files

If you have a web site with dozens of web pages, it would be nice to have a similar style applied to all of them for visual continuity. It is possible to copy all of the Style commands from one file to the next so they would all be the same. But, the more pages you have, the more cumbersome it becomes to modify each page, and the greater the chance for error or omission. By using a master style sheet, with all pages linked to this master sheet, (try it) you can change one command for one tag in one place, and it will instantly apply to all of your pages.

We learned how to produce Style commands within Style tags. To make a master style sheet, open a blank file (not a blank HTML file, but a blank text file), type the same commands you previously typed between the Style tags, and save the file with a "*.css" extension. Voila! You have a master style sheet. Let's try it. Type the following on a blank file (hint: within HTML-Kit, click on "File" and select "New", then select "Blank Style Sheet", then cut and paste):

BODY { font-family:sans-serif; font-size: 11pt; color:white;
       background-color:navy }

ol,ul { list-style-position: inside }

BLOCKQUOTE { margin-top:1em; margin-right:2em; margin-bottom:1em;
             margin-left:2em; font-style:italic; }

p { text-indent:2em; margin-top:0; margin-bottom:0; margin-right:2em;
    margin-left:2em; text-align:justify }

Save it in the same directory as your other web pages, naming it 'sample.css'. Be sure to use the ".css" extension. Now, on sample.htm, delete any attributes you have remaining in your <body> tag and add the following:

<html>
<head>
<link rel="stylesheet" type="text/css" href="sample.css">
<title>My Page</title>
</head>
<body>
. . .

Open your pages in your browser and see what you've got. Change some of the rules in the master style sheet and see how it effects each page.


In this lesson, we learned about this tag:
link
By now, your sample.htm file should look like this and your sample.css file should have this code.
For more information on the link tag, see this site.

Lesson 14A CSS/Classes   < <  PREVIOUS   Table of Contents NEXT  > >   Lesson 15 Anchors/Links/Base Tag

Developed with HTML-Kit
Sandersongs Web Tutorials
Contact the Webmasterwith comments.
©2017, by Bill Sanders, all rights reserved.
This domain had 3,983 different visits in the last 30 days.
435,458 hits on this domain since 24 Nov 2006.
http://sandersongs.com/HTMLcourse/Lesson14B.php
This page was last modified on our server on 6 Oct 2013
and last refreshed on our server at 12:30 pm, MST
This file took 0.00882 seconds to process.