HTML and CSS Reference
In-Depth Information
To center an object within another object:
◗
1.
With the red box still relatively positioned, enter
0
for the left and top position to
place the object at its default positioning in the normal document flow.
◗
2.
Select
absolute
for the yellow box.
Because the yellow box is 60 pixels wide by 60 pixels high and the red box is
200 pixels wide by 200 pixels high, you can center it within the red box by placing
it at the coordinates (70, 70).
◗
3.
Enter
70
for both the left and top coordinates (see Figure 4-60).
Figure 4-60
Centering one object within another
relative positioning is
app
lied to the red box
but it is not moved from
its default position
absolute positioning
is used to center the
yellow box within
the red box
Creating Drop Caps with CSS
A
popular design element is the
drop cap
, which consists of an enlarged initial let-
ter in a body of text that drops down into the text body, like the first letter of this
sentence. To create a drop cap, you increase the font size of an element's first letter
and float it on the left margin. Drop caps also generally look better if you decrease the line
height of the first letter, enabling the surrounding content to better wrap around the let-
ter. Finding the best combination of font size and line height is a matter of trial and error;
and unfortunately, what looks best in one browser might not look as good in another. The
following style rule works well in applying a drop cap to the paragraph element:
p:first-letter {
font-size: 400%;
float: left;
line-height: 0.8;
}
With older browsers that do not support the first-letter pseudo-element, you have to
mark the first letter using a
span
element. For additional design effects, you can change
the font face of the drop cap to a cursive or decorative font.
