HTML and CSS Reference
In-Depth Information
Complete the following:
1. Use your text editor to open the dubcektxt.htm and dfeffectstxt.css iles from the
tutorial.08\review folder included with your Data Files. Enter your name and the
date within the comment section of each file, and then save them as dubcek.htm
and dfeffects.css , respectively.
2. Go to the dubcek.htm file in your text editor. Take some time to study the contents
and structure of the document, and then link the file to dfeffects.css using a media
query for only screen devices that are at least 501 pixels wide. Also add a media
query to the link element for the dflayout.css style sheet file, matching that style
sheet to only screen devices that are at least 501 pixels wide.
3. Create a conditional comment for Internet Explorer version 8 and earlier. Within
the conditional comment, create links to the dflayout.css and dfeffects.css style
sheets. For each style sheet, specify screen as the media device. Save your
changes to the file.
4. Go to the dfeffects.css file in your text editor. The navigation list of links to each fam-
ily member has the id familyLinks . Format the appearance of this navigation list by
adding an inset box shadow that is black in color with an opacity of 0.6. Place the
inset shadow within the right edge of the element with a horizontal offset of 10 pix-
els, a vertical offset of 0 pixels, and a blurring effect of 15 pixels.
5. Add box shadows to the images within the familyLinks list; make the shadows black
in color with 0.6 opacity. The shadows should be offset 10 pixels horizontally and
vertically with a blur of 15 pixels.
6. Every time the user hovers over an image in the familyLinks list, rotate the image 5°
counter-clockwise and set the opacity to 1.0.
7. Apply a horizontal gradient to the article element that moves from the left to the
right, starting with the color value (151, 151, 151) and ending with the color value
(231, 231, 231). Include browser extensions for all major browsers.
8. Add two text shadows to the h1 heading. The first shadow should be black with
a horizontal and vertical offset of 1 pixel and a 0-pixel blur. The second shadow
should have the color value (30, 57, 0) with an opacity of 0.8. The offset should be
5 pixels in the horizontal and vertical directions with a 10-pixel blur.
9. Add a border image to the family image within the article element. Use the file
paper.png with a slice value of 70 pixels, tiled along the sides. Set the width of the
border to 10 pixels.
10. Save your changes to the style sheet, and then go to the dubcek.htm file in your
Web browser and verify that the design effects resemble those shown in Figure 8-61.
Hover your mouse pointer over the list of linked images and verify that they rotate 5°
counter-clockwise in response.
11. Figure 8-62 shows a preview of the print style sheets that you'll create for Kevin's
document. To create this file, open the dfprinttxt.css file from the tutorial.08/review
folder in your text editor. Add your name and the date in the comment section of the
file, and then save it as dfprint.css .
Search WWH ::

Custom Search