HTML and CSS Reference
In-Depth Information
2. The Home Page.
Launch Notepad and open the index.html file. You will modify
this file to apply styles from the fishcreek.css external style sheet.
Add a
<link />
element to associate the Web page with the fishcreek.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
and
h1
selectors are already applied!
●
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 each
<dt>
element to apply the
category
class. Remove the
<strong>
elements from this area.
●
Configure the page footer area. Replace the
<p>
elements with
<div>
elements.
Assign this
<div>
to the id named
footer
. Remove the
<small>
and
<em>
ele-
ments because the
font-size
and
font-style
are configured as part of the
footer
id.
●
Save the index.html file and test in a browser. Your page should look similar to
the one shown in Figure 3.24 except that your page content will be left-aligned
instead of indented from the margins. Don't worry—you'll configure your page
layout in Step 4 of this case study.
●
3. The Services Page.
Launch Notepad and open the services.html file. You will
modify this file in a similar manner—add the
<link />
element, configure the
navigation area, configure the
category
classes (use
<span>
elements), and con-
figure the page footer area. Save and test your new services.html page. It should
look similar to the one shown in Figure 3.25 except for the alignment.
Figure 3.25
New services.html
page
Search WWH ::
Custom Search