HTML and CSS Reference
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
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,