HTML and CSS Reference
In-Depth Information
Complete the following:
1. Open the
longstxt.htm
and
maptxt.css
fi les in your text editor. Add
your name
and
the date
to the comment section of each fi le, and save the fi les as
longs.htm
and
map.css
, respectively.
2. Return to the
longs.htm
fi le in your text editor. Take some time to study the content
and structure of the document. Link the fi le to the
map.css
style sheet and then close
the fi le, saving your changes.
3. Go to the
map.css
style sheet.
4. Create a style rule to display the
nav
,
section
,
figure
, and
figcaption
elements
as blocks.
5. The estimated time that a hiker should arrive at each waypoint has been marked with
the
time
element. Create another style rule to display the
time
element inline.
6. Set the margin and padding space of every element to 0 pixels.
7. Set the font family for the page body to Verdana, Geneva, or sans-serif.
8. The entire content of the page is nested within a
div
element with the id
page
.
Create a style rule for this element to: a) set the background color to the value (255,
255, 128) and display the background image fi le,
bluebar.png
, tiled vertically along
the left edge; b) add a ridged 15-pixel-wide border with a color value of (70, 76,
222); c) add rounded corners with a radius of 50 pixels; d) set the width and height
to 900 pixels and 750 pixels, respectively; and e) horizontally center the
div
ele-
ment within the browser window, setting its top margin to 10 pixels, setting its bot-
tom margin to 200 pixels, and using
auto
for the left and right margins.
9. Float the vertical navigation list on the left margin with a width of 230 pixels. For
each list item within the navigation list, remove the list markers, set the top and bot-
tom margins to 25 pixels, and set the left and right margins to 20 pixels. Set the font
color of hypertext links within the navigation list to white, and to yellow in response
to the hover event. Remove the underlining from the hypertext links.
10. The description of the map is contained within the
section
element with the id
summary
. Float the summary section on the left with a left margin of 30 pixels and a
width of 600 pixels.
11. Create a style rule for the
h1
heading within the summary section to: a) set the text
color to the value (70, 76, 222); b) set the font size to 24 pixels, with normal weight
and kerning set to 5 pixels; and c) set the margin to 20 pixels.
12. For paragraphs within the summary section, set the margin to 10 pixels.
13. The interactive map has been enclosed in a
section
element with the id
map
. For
the map section, create a style rule to: a) place it using relative positioning (do not
specify the top or left coordinate); b) set the background color to white, with the
lpmap.jpg
image fi le as the background image placed in the top-left corner with no
tiling; c) add a 1-pixel-wide solid black border; d) fl oat the section on the left with a
left margin of 30 pixels; and e) set the width and height to 600 pixels and 294 pixels,
respectively.
