HTML and CSS Reference
In-Depth Information
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
wcmobile.css
.
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
text editor.
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.
