Cascading Style Sheet

Assignment

In Text/Edit, create a travel web page with the following requirements. Remember to use the class notes to help if you get stuck. This page will be saved to your web page folder, in your CSS assignment folder. Name it css_assign.html.

1.  Use CSS code to insert a non-repeating, fixed, centered image as a background (Use Google’s Image search to find one that “fits” on the screen)

a.    Our screen resolutions are set to 800 x 600 or 1024 x 768, so find an image that is smaller.

b.    Make sure you can read the text that will be typed on top of the image.  You can make the image lighter in Adobe PhotoShop pretty easy.

i. Open the image in PhotoShop

ii. In the Image menu, choose Adjustments

iii. Choose Hue/Saturation

iv. Move the Lightness indicator to the right until you feel the image looks appropriate. As you move the indicators, you’ll see the image adjust. Make it as light as possible, but make sure you don’t lose too much detail.

Example

2.    Create the following table on your page. Make both the images and the text beneath links.

Travel Links 

Using cascading style sheet rules, change:

• Link color to red.
• Visited links yellow.
• Hovering over links to black.
• Apply a H1 heading to the title of the table. Make it 20 point font, bold, and Monotype Corsiva.
• Change table border size, border color, and background color.