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
case2
addcases
corn.htm
recipe.htm
ceffects.css
cmobile.css
cprint.css
