HTML and CSS Reference
(127, 90, 0) and an opacity of 0.5, a horizontal and vertical offset of 5 pixels, and
a blur of 20 pixels. Use browser extensions so that your styles are cross-browser
c. Set the width of the element to 180 pixels with a margin of 10 pixels and a pad-
ding space of 5 pixels.
d. Float the element on the right margin.
e. Set the font size to 12 pixels.
14. Save your changes to the style sheet file, and then open corn.htm in your Web
browser. Verify that the layout resembles that shown earlier in Figure AC2-1. (Note:
If you are running Internet Explorer Version 9 or earlier, you will not see the gradi-
ent backgrounds in the section element and vertical navigation list.) Verify that the
aside element displays the current date and the number of days until Thanksgiving.
15. Next, Gary wants you to create print styles for his sample recipe page and apply other
style sheets for screen media. Use your text editor to open the recipetxt.htm and
cprinttxt.css files from the addcases\case2 folder. Enter your name and the date in
the comment section of each file, and then save them as recipe.htm and cprint.css ,
16. Go to the recipe.htm file in your text editor. Add a media query to the link elements
for the clayout.css and ceffects.css style sheet files so that the browser applies these
style sheets only for screen media, and only when the minimum width of the screen is
17. Create an IE conditional comment to apply the clayout.css and ceffects.css style sheets
for screen media when the version of Internet Explorer is earlier than version 9.
18. Below the IE conditional comment, insert a link to the cprint.css style sheet file to be
used for print media.
19. Save your changes to the file, and then open the recipe.htm file in your Web
browser. Figure AC2-2 shows the appearance of the Web page in the Google
Chrome browser. (Note: Other browsers should appear similar except for Internet
Explorer version 9 and earlier, which does not support linear gradient backgrounds.)