HTML and CSS Reference
In-Depth Information
Finally, you'll format the contents of the fi gure box. One of these items is the inline
image displaying the cyclist on Rim Rock Drive. You'll change the inline image into a
block element and then center it horizontally within the fi gure box by setting its left and
right margins to
auto
(see the Insight Box
Keeping It Centered
from earlier in this session
for details on this setting). Dan also wants the size of the image to be based on the size
of the fi gure box. Therefore, you'll set the image width to 80% of the fi gure box width so
that browsers will determine the height automatically. You'll also add a 5-pixel-wide light
brown inset border, and you'll center the fi gure caption, reduce its font size, and display
the caption text in italic.
To format the figure box:
◗
1.
Return to the
cp_styles.css
file in your text editor. At the bottom of the style
sheet, insert the following rules (see Figure 4-54):
#story figure img {
border: 5px inset rgb(227, 168, 145);
display: block;
margin: 30px auto 10px;
width: 80%;
}
#story figure figcaption {
font-size: 75%;
font-style: italic;
text-align: center;
}
Figure 4-54
Style rules for the image and fi gure caption
displays the image as a
block, centered in the
figur
e box, 80
%
of the
width of the box, and with
a light brown inset border
displays the caption in
small italic and centered
in the figure box
◗
2.
Save your changes and then reload
cycle.htm
in your Web browser. Figure 4-55
shows the current state of the story section.
