|
|
Style
Sheets 
Framesets
Pr
1 Pr
2 Koala
Project
It's surprisingly easy to link your Web page to a single or multiple External Style Sheets. I'd attach the file right at the start of building the page so you can visualize the finished product all along. But, you can add the style sheet at any time if you so desire. Adding the style sheet up front will show the background and any images used for the background, all the text formatting, paragraph spacing, etc. will be on the page as you type.
To learn how to add Style Sheets to your pages do the following exercise. Use the Hands-On Steps below to open practice files created for you to link your main style sheet.
View or Print Hands-On Exercise below in 
.PDF format.
Build
an External Style Sheets Step by Step
You will need to create the CSS file for the Koala Web site, then attach it
to the file.
Notice the image to the right, at the bottom of the panel there are four icons, the first on the left will attach the External Style Sheet for you. It will give you a Browse box to locate the file, click the file name and Dreamweaver will attach it for you. (The other three icons are not used for attaching, the plus + icon lets you create more styles, the pencil icon lets you edit styles, and the trash can lets you toss out styles not needed any longer) .
Here are the items that need to be created for the Koala Project, you may copy them and save as koalabody.css, but if you want to practice, print this page out and try to add each to your style sheet in the normal way:
.bodytext
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
margin-left: 50px;
}
.topic {
font-family: "Copperplate Gothic Bold";
font-size: 18px;
font-weight: bold;
}
.footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px; color: #663333;
text-decoration: none;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px; color: #993333;
text-decoration: none;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: underline;
background-color: #FFFFCC;
}
body {
background-color: #cccc99;
background-attachment: fixed;
background-image: url(images/koalabg.jpg);
background-repeat: no-repeat;
background-position: center center;
}
a.nav:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
color: #FFFFCC;
text-decoration: none;
}
a.nav:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold; color: #FFCC99;
text-decoration: none;
}
a.nav:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight:bold;
color: #666600;
background-color: #CCCC99;
text-decoration: none;
}
a.button:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px; font-style: normal;
font-weight: normal;
text-decoration: none;
background-color: #CCCC99;
padding: 2px;
border-top: 1px solid #eeeecc;
border-right: 1px solid #aaaa77;
border-bottom: 1px solid #aaaa77;
border-left: 1px solid #eeeecc;
}
a.button:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
color: #663333;
text-decoration: none;
background-color: #CCCC99;
padding: 2px;
border-top: 1px solid #eeeecc;
border-right: 1px solid #aaaa77;
border-bottom: 1px solid #aaaa77;
border-left: 1px solid #eeeecc;
}
a.button:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
color: #663333;
background-color: #CCFF99;
padding: 2px;
border-top: 1px solid #aaaa77;
border-right: 1px solid #eeeecc;
border-bottom: 1px solid #eeeecc;
border-left: 1px solid #aaaa77;
}
Now that you've created your External Style Sheet, (and I hope you just didn't copy the whole thing and not get any hands-on practice), it's time to link the sheet. While the Koala Project is open, go to the Design panel and click on the first icon at the bottom of the CSS Style tab, and browse to your find your koalabody.css file, click it and you are done!
Now it's time to install the special Navbar that uses the pseudo buttons, follow the steps below and you'll be finished.
View or Print Hands-On Exercise below in .PDF format.
Insert
Navbar Style Buttons in the Koala Project
Re-open the koala.htm site, if not already opened, from the last linking assignment. If starting from here the Koala project started in the in the hyperlinking chapter.
Locate the navigation area with the point-to-file links you made with internal links to SIZE | STOUT BODY | BABIES | etc.; since these are already hyperlinks, all you need to do is open the Design panel and have the CSS Styles tab available. Click on each of the links and then click on the word button in the CSS Styles window, the change will be made when you view the file in your browser.
Hide the Step-by-Step LessonSo did it work the first time for you? If it doesn't quite meet your expectations, feel free to spend some quality time reviewing and tweaking the Styles code to your liking. The best thing about learning new things is the fun of discovery, especially if it's on your own. And, as always, practice, practice, practice, it's all going to pay off later.
Page Updated on June 2, 2004