Chapter 8: Demystifying Basic CSS and XHTML 251
If you’d like to visit an online version of the roadside site, display
www.creationguide.com/roadside. You can use the Source command
on the View menu in your browser to display the online Web site’s
source code. The source code might come in handy if you want to
check your own code or if you need some assistance.
Using the Roadside Attractions Site as a
Template
After all your hard work creating the roadside site, you now have a
very useful template that you can use to build a custom site. You can
of course modify the site’s contents by adding, removing, and replac-
ing elements (such as the banner.gif graphic or the heading text). But
even better than that, you can take advantage of CSS’s powerful for-
matting capabilities to create Web sites with an entirely different look
with very little effort. This is where planning pays off. Because you’ve
carefully set up your Web site to use external style sheets, you can
now make visual changes very easily by modifying style sheet property
values. Furthermore, because you created a presentation style sheet
(styles_presentation.css), you can quickly change formatting elements
and apply the style sheet to your site by changing @import url in the
styles_mains.css document.
To apply a couple of modifi ed presentation style sheets to your Web
site, we provided two sample style sheets that you downloaded at
the beginning of this chapter—styles_presentation_blue.css and
styles_ presentation_green.css. Both style sheets were created by copy-
ing the styles_presentation.css style sheet and changing some of the
formatting property values. To test the modifi ed style sheets on your
Web site, follow these steps:
1
Open styles_main.css in your text editor.
2
At the top of the style sheet, locate the @import url (styles_
presentation.css); text, and change styles_presentation.css to
styles_presentation_blue.css so that the line appears as follows:
@import url(styles_presentation_blue.css);
3
Save your work, and then open index.html in your browser
window.
252 Part 2: The Walk—Creating Web Sites
Figure 8-31 Same site
with different presentation
style sheets applied
tip Many of the
graphics on the
sample Web site
were purchased
from www.istock-
photo.com for a
few bucks each.
We highly recom-
mend that you visit
the iStockphoto site
whenever you’re
searching for im-
ages to use on your
Web pages.

Get Easy Web Design now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.