External style sheets refers to style rules that are placed inside a separate text document.
External style sheets are a great way to apply consistent style rules to hundreds or thousands of pages. Each page links to the external style sheet. To change the appearance of a given element site-wide, just change it once in the external style sheet.
Type or copy and paste the following style rules into a text document and save it with the name "basicstyle.css".
body { font-family:georgia, "times new roman", serif;
font-size:100%; background:silver; color:#000; margin-top: 0em;
margin-right: 1em; margin-left: 1em; width:600px; }
p,table,ol,ul,li { font-family:georgia, "times new roman", serif;
font-size:100%; }
.box { border: solid; border-width: thin; padding: 1em; }
p.dropcap:first-letter { font-size: 2em; font-weight: bolder;
float: left; color: teal; }
.white { color:white; }
.hidden { visibility: hidden; }
.indented { text-indent:20pt; }
h1,h2,h3,h4,h5,h6 { font-family:verdana,sans-serif; color:teal;
margin-top: 1em; margin-bottom: 0.5em;}
h1 { font-size: 130%; }
h2 { font-size: 120%; }
h3 { font-size: 110%; }
h4 { font-size: 100%; }
h5 { font-size: 90%; }
h6 { font-size: 80%; }
a:link { color: #900; text-decoration:underline; }
a:visited { color: #666; text-decoration:underline; }
a:active { color: #000; background: #900; text-decoration:none; }
a:hover { color: #fff; background: #900; text-decoration:none; }
b { color:teal; font-weight: bold; }
hr { color:teal; width:600px; }
.legal { font-family:georgia,serif; font-size:70%; font-style:italic; }
.codesample { font-family:"Courier New", courier, monospace;
font-size:90%;margin-left: 1em; }
.codeinline { font-family:monospace; }
.monosans { font-family:monaco, fixedsys, monospace; }
.monoserif { font-family:"Courier New", courier, monospace; }
tt { font-family:"Courier New", courier, monospace; }
Type or copy and paste the code below into any text editor and save it with the name "csslesson04.html" in your "mySite" folder. This page will link to the basic style sheet you just created. You may view the completed lesson in a new window by clicking here . After you create this page, open it in your Web browser.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Enjoying Style Sheets</title>
<link rel="stylesheet" type="text/css" href="basicstyle.css" />
</head>
<body>
<h1>Level 1 headings in color and sans serif</h1>
<h2>Level 2 headings in color and sans serif</h2>
<h3>Level 3 headings in color and sans serif</h3>
<h4>Level 4 headings in color and sans serif</h4>
<h5>Level 5 headings in color and sans serif</h5>
<h6>Level 6 headings in color and sans serif</h6>
<p>This is a plain paragraph with wrapping text. It should be in a serif
typeface. <b>This is a bold sentence.</b></p>
<p class="white">White text paragraph. This is a paragraph with wrapping
text shown in white. It should be in a serif typeface.</p>
<p class="indented">Indented paragraph. This is a paragraph with wrapping text
and the first line indented. It should be in a serif typeface. This is a paragraph
with wrapping text and the first line indented. It should be in a serif
typeface.</p>
<p class="dropcap">Dropcap paragraph. This is a paragraph with wrapping text and dropcap on the first letter. It should be in a serif typeface. This is a
paragraph with wrapping text and dropcap on the first letter. It should be in a serif
typeface. This is a paragraph with wrapping text and dropcap on the first letter. It should be in a serif typeface. This is a
paragraph with wrapping text and dropcap on the first letter. It should be in a serif
typeface.</p>
<p class="box">Boxed paragraph. This is a boxed paragraph with wrapping text.
It should be in a serif typeface. This is a boxed paragraph with wrapping
text.</p>
<p>The paragraph below is hidden.</p>
<p class="hidden">Invisible paragraph. This is an invisible paragraph with
wrapping text. It should be in a serif typeface. This is a plain paragraph with
wrapping text. This is an invisible paragraph with wrapping text. It should be in a
serif typeface.</p>
<p class="monosans">monospaced sans serif text here</p>
<h2>LINKS</h2>
<p>Roll your mouse over these links to see the style sheet effects.</p>
<p><a href="http://www.google.com">Google</a></p>
<p><a
href="http://www.stevenestrella.com">StevenEstrella.com</a></p>
<p>A Horizontal Rule will appear below. The color property for this element is
not supported in all browsers but the width property is widely supported.</p>
<hr />
<p class="legal">Please note: The construction of this page caused many font
tags to be left homeless and unemployed.</p>
</body>
</html>
The external style sheet contains only style rules. The "csslesson04.html" page links to the external style sheet using the <link> tag. Just include the same <link> tag in all your pages and you can create a site with consistent style rules that are easy to maintain.