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):
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:
<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
For more information on the link tag, see this site.
