HTML and CSS Reference
Complete the following:
1. In your text editor, open the messtxt.htm and sweffectstxt.css files from the
tutorial.08\case3 folder included with your Data Files. Enter your name and the date
in the comment section of each file. Save the files as messier.htm and sweffects.css ,
2. Go to the sweffects.css file. Create a style rule for the body element to add a radial
gradient background using the CSS3 radial-gradient() function. For the function,
set the horizontal and vertical centers of the gradient to 40% and 70%, respectively.
Display a circular gradient with the size that extends to the nearest corner. Have the
gradient go from a solid white center to a color value of (171, 171, 171) with an
opacity of 0.5. Set the color stop of the outer color to 50%.
3. Add two more CSS3 radial gradients to the body background in a comma-separated
list. Use the same colors that you used in the first radial gradient. The next gradient
should be centered at (80%, 20%) with a circular shape that extends to the nearest
corner. Add a color stop of 20% to the second radial gradient. For the third radial
gradient, set the center at (10%, 10%) and set the shape to an ellipse extended to the
nearest side. Set the color stop of the outer color to 25%.
4. Duplicate the background style you created for different browsers by adding the
appropriate browser extensions.
5. For WebKit browsers, create the radial gradients using the gradient() function. Use
the same inner and outer colors as you did for the CSS3 radial-gradient() func-
tion. Set up the three radial gradients as follows:
a. Place the inner and outer centers of the first gradient at the point (40%, 70%). Set
the inner and outer radii to 0 and 180, respectively.
b. Place the inner and outer centers of the second gradient at the point (80%, 20%).
Set the inner and outer radii to 0 and 90, respectively.
c. Place the inner and outer centers of the third gradient at the point (10%, 10%).
Set the inner and outer radii to 0 and 20, respectively.
6. Save your changes to the style sheet, and then return to the messier.htm file in your
text editor. Create a link to the sweffects.css style sheet file.
7. Save your changes to the document, and then view it in your Web browser. Verify
that three radial gradients appear in the background of the Web page. (Note: If
you are using a version of Internet Explorer before version 10, you will not see any
8. Dr. Weiss also wants you to create a print style sheet to display the summary of
Messier objects on the first page with a description of each Messier object on its own
page. Figure 8-69 shows a preview of the design of the printed page.