HTML and CSS Reference
In-Depth Information
In the Lab
continued
Perform the following tasks:
1. Open the lab7-3.html file in Notepad++.
2. Add an embedded style sheet to set the following:
a. links class (no pseudoclasses): position of the text should be absolute and 150 pixels from the
top; the text should display in a block, center-aligned in bold with 1em sans-serif; padding of
text should be 5 and 10 pixels with margins of 0, 0, and 1 pixel; border-width should be 0 with
text-decoration of none; right border should be 5 pixels in solid navy
b. links class hovered: background is navy with a 5 pixels double border in white
c. span tag (no pseudoclasses): there should be no display
d. span tag hovered: text should display in a block with an absolute poition from the top of
220 pixels, left of 550 and width of 180 pixels; the padding should be 5 pixels with a margin of
10 pixels; text color white and background navy; the font should be 12 pixels in Verdana
sans-serif and aligned in the center of the block
3. Add the Mount Rainier climb information to your HTML file.
4. Save the file as lab7-3solution.html, validate it, and then print the HTML code.
5. Open the Web page in your browser to test that the pop-up text displays when you hover over each
mountain image, as shown in Figure 7-22 on the previous page. Print the Web page.
6. Submit the solution in the format specified by your instructor.
Cases and Places
Apply your creative thinking and problem-solving skills to design and implement a solution.
1: Finding CSS Information Online
Academic
Browse the Internet to find two Web sites that discuss advanced Cascading Style Sheets (CSS). How
else can CSS be used in your Web development that differs from how it has been used in Chapters 2
through 7? What other properties and values can you use to format your Web pages? What are other
ways that you can create external style sheets to be used for printing only? Specifically evaluate how
CSS3 can be used with the browsers to which you have access. Write a brief report on each Web site,
including the URL, and be prepared to discuss what other advanced CSS you would like to utilize.
2: Applying Pop-up Text
Personal
Create a Web site that utilizes several of your own pictures. Use the basic pop-up techniques covered
in this chapter to display text rather than larger images when a Web site visitor hovers over one of the
images. Determine how you could use this pop-up effect for text and why it might be helpful in your
own Web development. Write a one-page paper explaining your thoughts on pop-up effects created
using CSS.
