HTML and CSS Reference
In-Depth Information
Figure 4-23
Styling the president's message
sets the background
color to gray or a
semi-tra
nsparent white
displays the object when
the left margin is clear
floats the object
on the left
sets the w
idth to 40
%
of
the width of the page
◗
2.
Save your changes to the file.
Now re-display the president's message.
A width percentage refers
to the percentage of the
width of the containing
element.
◗
3.
Return to the
cp_reset.css
style sheet in your text editor. Remove the selector
#president
and the comma that follows it from the start of the selector list in the
style rule at the bottom of the file. Save your changes.
◗
4.
Reload the
cycle.htm
file in your Web browser. As shown in Figure 4-24, the
article appears in the page below the horizontal navigation list.
Figure 4-24
Re-displaying the president's message
president'
s
message a
p
pears
after the left margin
is clear of floats
Vaclav Volrab/Shutterstock.com
Dan stops by to see your progress on the Web page. He likes the page background
and the navigation list. However, he wants you to move the president's message article
farther to the right. You'll learn how to relocate page objects and work with margins,
padding space, and borders in the next session.
