Creating a Style File

(Dreamweaver version)


One of the key principles of modern web design is that content should be kept separate from presentation. HTML is used to organize page content and CSS determines the presentation -- the way the page actually looks. The next step in this lab is to create a new file that will contain the CSS that determines the appearance of your page. From Dreamweaver's file menu, choose "New..." In the dialog box that comes up, choose "Basic page" from the Category column and "CSS" from the Basic page column.) The /* CSS Document */ statement in the first line is a comment (in other words, it is meant for humans reading the file and is ignored by the computer). After that line, copy the following into your new file:

body {
   background-color: yellow;

This css directive tells browsers to make the background color of everything in your <body> tag to be yellow. (This page has a similar directive for the <blockquote> tag.)

Don't forget to save your new CSS file, just as you've been saving your HTML file. The file name should end in ".css", as in "style.css". Then tell your web page to use your new style sheet by adding the following tag to your web page. This should be located somewhere between the <head> and </head> tags.

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

If you preview your page after saving both files, the background color should be changed to yellow.