HTML and CSS Reference
In-Depth Information
You have the following tasks:
1.
Create an external style sheet named fishcreek.css that configures the color and
text for the Fish Creek Web site.
2.
Modify the Home page to use an external style sheet to configure colors and
fonts. The new Home page and color swatches are shown in Figure 3.24 (shown
also in the color insert section).
Figure 3.24
New Fish Creek
index.html
Go to the end of the
book for a full color
version of this figure
3.
Modify the Services page to be consistent with the new Home page. Configure
centered page layout.
Hands-On Practice Case
Create a folder called fishcreekcss. Copy all the files from your fishcreek folder into the
fishcreekcss folder.
1. The External Style Sheet.
Launch Notepad. You will create an external style sheet
named fishcreek.css. Code the CSS to configure the following:
●
Global styles for the document background color
(#6699ff
), text color
(
#d5e3ff
), and Verdana, Arial, or any sans-serif font
●
Style rules for the
h1
selector that configure background color (
#6699ff
), text
color (
#003366
), serif font, and 200% line height
●
Style rules for a navigation area (use an id named
nav
) that displays text in
bold
●
Style rules for a class named category with bold font, background-color
(
#6699ff
), text color (
#003366
), and larger font size (1.1em)
●
Style rules for the page footer area (use an id named
footer
) with a small font
size (.70em) and italic text
Save the file as fishcreek.css in the fishcreekcss folder. Check your syntax with the
CSS validator (
http://jigsaw.w3.org/css-validator).
Correct and retest if necessary.
Search WWH ::
Custom Search