If you didn't do so during the lesson, create a style sheet
named stylesheet.css now. Be sure to save it in your
XHTMLclass folder.
If you haven't already done so, put /* stylesheet.css */
at the top of your stylesheet.css file. Put the following two
style rules in the style sheet. They should be the only two
style rules in your style sheet.
/* stylesheet.css */
body {
background-color: #C3E1EA;
}
h1 {
color: #1F2159;
font-style: italic;
font-family: Arial, Helvetica, sans-serif;
}
Close and save stylesheet.css.
Now, create a new Web page. Save it as page1.htm or
page1.html in your XHTMLclass folder. It really doesn't
matter which filename extension you use because both are
acceptable for Web pages. But you must always be aware of how
you name your files because any links you create to those files
must use the exact filename.
Also keep in mind that many Web servers are case-sensitive to
filenames, and some don't like filenames with spaces in them.
You might want to get in the habit of using all lowercase
letters and no spaces in the names of files you intend to
publish to the Web.
Add a link to the external style sheet, stylesheet.css,
to your new Web page. Keep in mind that as long as the page and
style sheet are in the same folder, the href=in the link tab
will be simply "stylesheet.css" (don't forget the quotation
marks).
| Tip: If you're
using Dreamweaver, you can just drag the stylesheet.css
filename from the files pane to between the <head> and
</head> tags. Dreamweaver will fill in the correct <link
/> tag for you. |
Finally, in the body of the page, add at least one h1 element.
It can be as simple as this:
<h1>Hello World</h1>
Save the page. Then open that page in any Web browser. The text
and body background colors should obey the style rules as below.
Finished assignment in browser
If yours doesn't work, consider all the possibilities of what
could've gone wrong:
As in traditional HTML, every tag you type must be typed
perfectly. The same holds true for CSS style rules, so watch for
typographical errors in your code.
The names and locations of files are important. Open the folder
in which you placed those files and verify that the filenames
are correct. The style sheet must be named stylesheet.css
(no spaces). The page and style sheet should be in the same
folder, XHTMLclass.
You cannot be certain you're seeing the actual filename and
extension if you still have filename extensions hidden. And
knowing the exact names of files is critical to successful Web
development. For example, if filename extensions are hidden,
what you think is stylesheet.css might actually be
stylehseet.css.txt. That won't work. See Lesson 1, Chapter
4, for tips on ensuring that all filename extensions are
visible. Then rename any files whose names aren't what they
should be.
If all else fails, try copying and pasting the code below into
your stylesheet.css file:
/* stylesheet.css */
body {
background-color: #C3E1EA;
}
h1 {
color: #1F2159;
font-style: italic;
font-family: Arial, Helvetica, sans-serif;
}
Here's the complete page1.htm file. Compare it to your own copy
to see where you may have gone wrong. Or just copy and paste it
into your page1.htm or page1.html page.
<!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>
<!-- Link to external style sheet -->
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
If you still can't get it to work, feel free to copy and paste
your code into the Discussion Area and tell us what the problem
is.
Once you get it all working, you have created your first
external style sheet and successfully linked a Web page to it.
Congratulations! You're on your way to building Web sites like
the pros.
|