HTML and CSS Reference
In-Depth Information
(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
compatible.
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
,
respectively.
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
501 pixels.
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.)
