DES 3006 - Web Design II
Week Nine | Part Two: Linked Cascading Style Sheets.
Linked vs. Embedded CSS
Until this point, we have embedded the style code for all our Web pages within the Web page we wished to style.
The code looked something like this:
<style TYPE="text/css">
body {
font-family: Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #000000;
background-color: #ffffff;
}
p {
font-family: Verdana, sans-serif;
font-size: .9em;
line-height: 1.3em;
margin: 10px 10px 0px 10px;
padding:0;
color: #000000;
}
I'm sure you can image the problem we might create by embedding a style sheet within every page we create. If we want to make a stylistic change to our Web pages, we must edit every single page in order to activate the changes we desire.
Fortunately we have a means to attach a style sheet to all of our Web page, so that one change to the style sheet affects all pages in our Web site.
This wonderous thing is called the linked style sheet, and it is very easy to add them to a Web page.
You begin by creating a new file that will be the style sheet for your page. The coding for it is very similar to what you have done to create an embedded style sheet. For exmple:
/* DES 3006 - Web Design II Screen Layout Stylesheet */
body {
font-family: Arial, Verdana, sans-serif;
font-size: 1em;
margin: 0;
padding:0;
color: #000000;
background-color: #ffffff;
}
There isn't any need to add a DTD at the top because this isn't Web page, but just a text file.
Once you've added some styling, save the file with a .css extension:
screen_layout.css
The next step is to create a link on your Web page so that it references the styling information in your .css file. So:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>DES 3006 - Week Seven - Part IV</title>
<link rel="stylesheet" type="text/css" href="../screen_layout.css" media="screen">
</head>
<body>
Make sure you remember where the style sheet is located. If it's not in the proper directory, your Web page won't be able to find it.
The last step is to upload you files onto your server, again using the same directory information as on the local version of your Web site. That's all there is to it!
If you view to source code for this page, you'll see that I have several style sheets linked to it:
<head> <title>DES 3006 - Week Seven - Part IV</title> <link rel="stylesheet" type="text/css" href="../screen_layout.css" media="screen"> <link rel="stylesheet" type="text/css" href="../print_layout.css" media="print"> <link rel="stylesheet" href="style.css" type="text/css" /> <link rel="alternate stylesheet" type="text/css" href="../large.css" title="A++" /> <link rel="alternate stylesheet" type="text/css" href="../medium.css" title="A+" /> <link rel="alternate stylesheet" type="text/css" href="../small.css" title="A" /> <link rel="alternate stylesheet" type="text/css" href="../x-small.css" title="A-" /> <link rel="alternate stylesheet" type="text/css" href="../xx-small.css" title="A--" /> </head>
The reason why is because I wanted a screen-friendly and printer-friendly version of the page. Later, as I was talking to other students, I realized I needed to provide a user-friendly way to enlarge or reduce the size of the screen text. This explains why I have those "alternate stylesheets" linked to this page and all the pages for this course.
From now on, for all your future assignments, please use a linked style sheet. You'll be creating pages with even less code, and you'll be getting into a good coding habit.
Go to Week Nine - Part Three