HTML and CSS Reference
8. Open the wcmobiletxt.css file from the tutorial.08/case2 folder in your text editor.
Enter your name and the date in the comment section of the file, and then save it as
9. Within the style sheet file, add a style rule to hide the navigation list in the
header, the inline image in the header, the main section, the aside element, and
the page footer.
10. Set the background color to the value (107, 140, 80).
11. For the header element, create a style rule to: a) change the background color to
the value (151, 201, 151) with the image file willet.jpg placed in the left-center of
the background with no tiling; b) set the size of the background image to contain ;
c) set the width to 100%; and d) set the height to 50 pixels.
12. The navigation list containing links to each of the 18 holes in the Grand Course has
the id holes . Create a style rule to set the width of this navigation list to 100%.
13. For h1 elements within the holes navigation list, create a style rule to: a) set the font
size to 25 pixels; b) set the font color to white; c) set the margin to 15 pixels; and
d) center the text of the heading.
14. For list items in the holes navigation list, create a style rule to: a) display the items as
blocks; b) add the background image file arrow.png to the right-center of the back-
ground with no tiling; c) set the width to 60% and the height to 50 pixels; d) add
top and bottom margins of 5 pixels, and add left and right margins of auto ; e) add a
1-pixel-wide solid white border to each list item and create rounded borders with a
radius of 10 pixels; and f) add inset box shadows to the list items with a color value
of (51, 51, 51) and an opacity of 50% (the inset shadows should appear in the lower-
left corner of each list item with a horizontal offset of 10 pixels, a vertical offset of
5 pixels, and a blur of 20 pixels).
15. For hypertext links within each list item, add a style rule to: a) display the link as
blocks; b) set the width to 100% and the line height to 50 pixels; c) set the font color
to white; and d) horizontally center the text of the link.
16. For odd-numbered list items, set the background color to the value (187, 105, 123).
(Hint: Use the pseudo-class nth-of-type(odd) .) For even-numbered list items, set
the background color to the value (150, 80, 100).
17. The preceding styles will be applied by default to the page in portrait orientation.
Create an @media rule for the page in landscape orientation.
18. Add the following style rule for list items displayed in landscape orientation: a) set
the width to 30%; b) float the list items on the left; and c) set the margins to 5 pixels.
19. Save your changes to the style sheet, and then return to the willet.htm file in your
20. Within the willet.htm file, insert a viewport meta element.
21. Create a link to the wcmobile.css file to be accessed by only screen devices with
maximum widths of 500 pixels.
22. Save your changes to the file, and then open the willet.htm file in your mobile
device or with your browser window resized to a width of less than 500 pixels.
Verify that for smaller screen widths, the mobile version of the page is displayed.
Further verify that the layout of the links to individual holes changes depending on
whether the page is in portrait or landscape orientation.
23. Submit your completed files to your instructor.