HTML and CSS Reference
In-Depth Information
28. Gary also wants a mobile version of the sample recipe page so customers can view
the ingredients and instructions on a mobile device while cooking in the kitchen.
Use your text editor to open the cmobiletxt.css file, and then enter your name and
the date in the comment section. Save the file as cmobile.css .
29. Return to the recipe.htm file in your text editor. Below the link to the cprint.css
style sheet, insert a link to the cmobile.css style sheet file, to be used only for screen
media and only for screens that have a maximum width of 500 pixels.
30. Below the meta element, insert another meta element that sets the width of the
viewport to match the device width with an initial scale value of 1.0 and a maxi-
mum scale value of 1.0 as well.
31. Save your changes to the file, and then return to the cmobile.css file in your text editor.
32. Create a style rule to hide the img element within the header element, and to hide
the nav element, the footer element, and any paragraphs in the document.
33. Create a style rule for the header element to: a) set the width to 100%; b) set the
height to 80 pixels; c) use the cornlogo.jpg file as the background image with no til-
ing; and d) set the size of the background image to contain .
34. Set the font of h1 headings within the article element to a 16-pixel bold font with
a bottom margin of 10 pixels.
35. Set the font of h2 headings within the article element to a 14-pixel bold font with
top and bottom margins of 10 pixels, and left and right margins of 0 pixels.
36. For all unordered and ordered lists within the article element, set the font size to
10 pixels and the left margin to 20 pixels. Set the list style type of the unordered lists
to disc and the list style type of the ordered lists to decimal .
37. Save your changes to the file, and then reopen the recipe.htm file in your Web browser.
Reduce the width of the browser window at or below 500 pixels, and verify that the
layout and content of the page change.
38. Submit your completed files to your instructor, in either printed or electronic form,
as requested.
ending dAtA Files
Search WWH ::

Custom Search