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