Jump to navigation

CSS Exercise

Using the HTML document you created in the HTML exercise, style it as follows.  Use the CSS reference found at http://www.w3schools.com/cssref/default.asp as a guide.

 

1. Add a div tag around all of the content contained within the HTML body.

2. Add an even class to each even row in the table body.

3. Add an odd class to each odd row in the table body.

4. Add a grade class to each table cell that contains a grade.

5. Set the background colors accordingly:

  • body: #AAAAAA
  • divs: white
  • textboxes: #DDDDDD
  • passwords: black
  • tables: #DDDDDD
  • table headings: #999999
  • even table cells (not rows): #CCCCCC
  • odd table cells (not rows): #BBBBBB

6. Set the font colors accordingly:

  • body: #550000
  • unvisited links: #333333
  • visited links: #555555
  • moused-over links: black
  • clicked links: white
  • passwords: white

7. Set the font sizes accordingly:

  • body: 12pt
  • h1: 32pt
  • h2: 24pt

8. Bold the following:

  • labels

9. Italicize the following:

  • spans

10. Set the following to sans-serif:

  • h1
  • h2

11. Set the following to small caps:

  • h1
  • h2
  • table headings

12. Set the text shadows accordingly:

  • h1: 1 pixel right, 2 pixels down, #DDDDDD
  • h2: 1 pixel right, 2 pixels down, #DDDDDD

13. Set the vertical alignment accordingly:

  • labels: top

14. Set the padding accordingly:

  • divs (left and right only): 5 pixels
  • forms: 10 pixels
  • table headings (left and right only): 3 pixels

15. Set the margins accordingly:

  • body (left and right only): 20%

16. Set the borders accordingly:

  • forms: 1 pixel, dashed line, #333333
  • tables: 1 pixel, solid line, #550000
  • table headings (bottom only): 3 pixels, double line, #333333
  • table cells: 1 pixel, solid line, #550000

17. Center align the following:

  • grade table cells
Jump to content