HTML and CSS Reference
In-Depth Information
3. Go to the
history.css
fi le in your text editor. Create a style rule to display the
header
,
section
, and
nav
elements as blocks.
4. Set the default padding and margin space for every element to 0 pixels.
5. Defi ne a style rule for the
header
element to: a) set the background color to the
value (51, 51, 51); b) center the contents of the
header
element; and c) set the width
to 55 em. Set the height of the inline image within the header to 4 em.
6. Float the navigation list on the left page margin, setting the width to 15 em and the
background color to the value (51, 51, 51).
7. For list items within the navigation list, create a style rule to: a) set the typeface to
Century Gothic or sans-serif; b) set the font size to 0.7 em; c) remove the list mark-
ers; d) set the line height to 1.4 em; and e) set the left and bottom margins to 1 em
and 1.2 em, respectively.
8. For hypertext links within the navigation list, set the text color to the value (212, 212,
212) and remove the underlining. When the user hovers the mouse pointer over
these links, change the text color to white.
9. For the speech section of the page, create a style rule to: a) set the background
color to the value (212, 212, 212); b) set the width to 40 em and fl oat the section
on the left; and c) display the text in a Palatino Linotype, Book Antiqua, Palatino, or
serif font.
10. For the
h1
heading within the speech section, create a style rule to: a) set the back-
ground color to the value (51, 51, 51); b) set the text color to the value (212, 212,
212) and the font size to 2 em; and c) center the text.
11. For the paragraphs within the speech section, set the font size to 0.9 em and the
margin size to 1 em.
12. Annie wants to create a drop-cap effect for the fi rst letter in the fi rst line of the fi rst
paragraph in the speech section. Using the
first-of-type
pseudo-class and the
first-letter
pseudo-element in your style rule selector, create this drop cap by:
a) fl oating the fi rst letter on the left; b) setting the font size and line height to 4 em
and 0.8 em, respectively; c) setting the right margin to 0.3 em; d) setting the right
and bottom padding to 0.2 em; and e) adding a solid black border 0.02 em in width
to the right and bottom edge of the letter.
13. Display the text of the fi rst line of the fi rst paragraph in the speech section in upper-
case letters.
14. Next, you'll create the irregular line wrap shown in Figure 4-78. Stack the 10 slices
of the Lincoln image by creating a style rule for the inline image elements within the
speech section to: a) fl oat each image on the right once the right margin is clear; and
b) set the height of each image to 4 em.
15. Add appropriate style comments to your fi le to document your work and then save
your changes.
16. Open the
lincoln.htm
fi le in your Web browser. Verify that the layout resembles that
shown in Figure 4-78. (Note: Safari for the Macintosh does not at the time of this
writing support the
first-line
pseudo-class with uppercase letters. Also, you might
notice a slight difference in the layout with browsers running on the Macintosh,
iPhone, or iPad.)
17. Using the Options or Preferences dialog box of your browser, increase and decrease
the browser's default font size. Verify that as the font size changes, the layout and
size of the inline images in the page change in proportion.
18. Submit your completed fi les to your instructor, in either printed or electronic form,
as requested.
