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
.
