HTML and CSS Reference
In-Depth Information
Hands-On Practice Case
Create a folder called paintercss. Copy all the files from your painter folder into the
paintercss folder.
1. The External Style Sheet.
Launch Notepad. You will create an external style sheet
named painter.css. Code the CSS to configure the following:
●
Global styles for the document background color (
#ffffff
), text color
(
#000000
), and Verdana, Arial, or any sans-serif font
●
Style rules for the logo class that configure background color (
#ffffff
), text
color (
#336633
), and Georgia, Times New Roman, or any serif font
●
Style rules for a navigation area (use an id named
nav
) that displays text in
bold
●
Style rules for a class named category with a bold, serif font, background-color
(
#ffffff
), text color (
#336633
), and a larger font size (1.2em)
●
Style rules for the page footer area (use an id named
footer
) with a small font
size (.60em) and italic text
Save the file as painter.css in the paintercss 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 painter.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. Code a
<div>
element that contains the
<h1>
and
<h3>
elements in the logo area. Assign the
<div>
to the logo class.
●
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
<ul>
to apply the
category
class.
●
Configure the page footer area. Replace th
e <p>
elements wit
h <div>
ele-
ments. Assign this
<div>
to the id named
footer
. Remove the
<small>
an
d
<em>
elements because th
e font-size
an
d font-style
are configured as part
of th
e footer
id.
●
Save the index.html file and test in a browser. Your page should look similar to
Figure 3.26.
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
logo area, configure the navigation area, configure the
category
classes (use
<span>
elements and remove the
<strong>
element from this area), and config-
ure the page footer area. Save and test your new services.html page. It should
look similar to the one shown in Figure 3.27.
Experiment with modifying the painter.css file. Change the page background color, the
font family, and so on. Test your pages in a browser. Notice how a change in a single
file can affect multiple files when external style sheets are used.
Search WWH ::
Custom Search