Exit tutorial


HTML Tutorial
Cascading Style Sheet Tutorials
Linked Style Sheet Example
Below you'll see the contents of a stylesheet that controls the layout for this web site. By changing or adding to or deleting styles in this one file, I can change the layout and look of my entire web site. Cool!

Stylesheet contentslinked stylesheet contents tutorial

body {
scrollbar-base-color: #dfe2ed;
scrollbar-face-color: #dfe2ed;
scrollbar-track-color: #eeeeee;
scrollbar-3dlight-color: #eeeeee;
scrollbar-highlight-color: #ffffff;
scrollbar-darkshadow-color: #666666;
scrollbar-shadow-color: #666666;
scrollbar-arrow-color: #666666;}

body {font-family: Verdana, Geneva, Arial, helvetica, sans-serif; font-size:12pt; }
td {font-family: Verdana, Geneva, Arial, helvetica, sans-serif; }
th {font-family: Verdana, Geneva, Arial, helvetica, sans-serif; }
a:link { color: darkblue; }
a:visited { color: darkblue; }
a:active { color: darkblue; }
a:hover { color: blue; text-decoration: none; }

That's the only thing in the stylesheet. It's simply saved as a plain text file with a .css extension. To use that style for a page I only have to link to it in the HEAD section of the HTML page where I want that style to be used.

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

Pretty easy, eh?

[Back to the Stage 6 Index]