HTML and CSS Reference
In-Depth Information
Figure 3.28
New Prime Properties
index.html
Go to the end of the
book for a full color
version of this figure
●
Style rules for the
dd
selector that configure italic, smaller than the default
(.90em) font size, with 200% line height
●
Style rules for the
logo
class that configure background color (
#ffffcc
) and
text color (
#48751A
)
●
Style rules for a navigation area (use an id named
nav
) that displays text in
bold, large (1.2em) font
●
Style rules for a class named contact with bold, smaller than the default
(.90em) using the Times New Roman or any serif font
●
Style rules for the page footer area (use an id named
footer
) with small font
size (.60em) and italic text
Save the file as prime.css in the primecss folder. Check your syntax with the CSS
validator (
http://jigsaw.w3.org/css-validator).
Correct and retest if necessary.
2. The Home Page.
Launch Notepad and open the index.html file. You will modify
this file to apply styles from the prime.css external style sheet.
Add a
<link />
element to associate the Web page with the prime.css external
style sheet file. Save and test your index.html page in a browser and you'll
notice that the styles configured with the
body
selector are already applied!
●
Configure the logo area. Assign the
<h1>
element to the class named
logo
.
●
Configure the navigation area. Since the navigation is not semantically a
“paragraph” (a collection of sentences about a central topic), replace the
<p>
element with a
<div>
element. Assign this
<div>
to the
id
named
nav
.
Remove the
<strong>
element from this area.
●
Configure the paragraph containing the address and phone information.
Assign this area to the class named
contact
. Remove the
<small>
element
from this area.
●
Search WWH ::
Custom Search