\


Multimedia & Web Design
XHTML Project 15A
Graphics (Photoshop)

1 Using Notepad, create an external css style sheet namedxhtmlproject15.cssand save it in your xhtml15 folder.  
2 Enter the code on the right at the top of the Stylesheet: /*
CSS Style Sheet for XHTML Review E
*/
3

Using CSS, set the body properties to:

  • Background Color: Same hexadecimal color as the title graphic canvas color.
  • Text color: Hexadecimal color that can be easily read on the background color.
  • Font Family: Verdana, Helveticia, Arial, san-serif;
  • Font Size: 12 Pixels
  
4

Create a class that will create a colored border. This will be used around the photographs on the main page. Use the following properties:

  • Border width: 10 pixels
  • Border style: solid
  • Border color: Any color you want (use hexadecimal code)
  
5

Create a class that will create a different colored border. This will be used around the images on the "class" pages and will blend in with the h3 background color. Use the following properties:

  • Border width: 10 pixels
  • Border style: solid
  • Border color: Your choice (different than the color in step 4), use a color that will show against the background color. This color will also be used for the h3 background color, so make sure the text can be easily read on it.
  
6 Open xhtml15.xhtml in Notepad and add the class code you created in step 4 to the five sphs images so they all have a 10 pixel colored border.  
7 Save both files (*.html and *.css). Open the web page and make sure the images have the correct borders.  
8

Add the following properties to the table:

Table

  • Margin: Auto
  • Border Collapse: Collapse
  • Border Width: 2 pixels
  • Border Style: Solid

th

  • Width: 150 pixels
  • Border Width: 1 pixel
  • Border Style: Solid
  • Background Color: Your choice (hexadecimal). The text should be easily readable against the color.

td

  • Width: 150 pixels
  • Border Width: 1 pixel
  • Border Style: Solid
  • Background Color: Your choice (hexadecimal), different than th color. The text should be easily readable against the color.
  
9

h3

Add the following properties to the h3 tag:

Background Color: The same hexadecimal color used for the border in step 5.

When applied, the h3 background should blend into the image border color on all six "class" pages.

  
10

Add the following properites to the Link tags

  • Font Size: 12 pixels
  • Font Weight: bold
  • Use any colors you like for the link, visited link and active link colors.
  • Set a background color for the hover state - make sure the text color used for hover can be read on the background.

This is very similar to the link code used in XHTML Project 10D

  
11 Add a link to your index.html page similar to the existing links.  

Save your CSS file and refresh the main webpage. It should look simlar to the example below.

Click the links to check the six "class" pages. They should look simlar to the example below.