–– workshop home ––

Workshops

Web Core 3 Exercises

Exercise 1: Styling Lists

Use liststyles.html for the html. Create main.css for the stylesheet and put it in a styles folder.

  1. Set first list to capital letters
  2. Set second list to use squares for bullets
  3. Set third list to use Roman numerals at the first level, capital letters at the second level, lower-case letters for the third level, and open circles for all bullets.

Exercise 2: Float and Clear

Use this file: margins.html

  1. Float left all images
  2. Float right all images

Since the default is to align left anyway, what is the difference between not floating and floating left?

Use clear to make it so the images don't stack up next to each other.

Exercise 3: Margins, Borders and Padding

Continue using margins.html

Margins

  1. Add a 10px margin around all images. Use your browser to change the base font size.
  2. Change the margin to 1em. Use your browser to change the base font size. What differences do you see in the two units of measurement?

Move the first image tag to the end of the paragraph, just before the end paragraph tag. How does that affect how the page lays out? Try placing the image after the end paragraph tag. Is there any difference visually? How about structurally?

Exercise: Borders

Continue with the same file.

  1. Add a border to the images that is 1px wide and in solid black.
  2. Change the border to be 3px wide and a double line.
  3. Make the top and bottom borders a double line but the left and right borders a single line.
  4. Create a border in light gray on the h1 that consists of a double line both above and below the heading. You will have to set a width of at least three pixels.

Exercise: Padding

  1. What happens when you add padding to the img tag? How is that different from adding to the margin?
  2. How would you adjust the space above and below the borders?
  3. How would you adjust the space inside the borders, between the lines and the actual heading text?

Exercise 4: Styling Tables

Use tablestyle.html

  1. Add table head, body and foot sections and check Print Preview to see that they behave as expected. You will probably have to increase the font size to force a second page.
  2. Add a ridge border around the table.
  3. Make the headings a dark green background with white text.
  4. Style the caption so that it stands out more.
  5. Add horizontal dotted lines under each of the data cells (don't forget to collapse the borders).
  6. Add solid double lines under the headings.
  7. Left-align the headings.
  8. Add a one-em padding to the left of all data cells.
  9. Center the entire table horizontally.
  10. Vertically align all cells.

Exercise 7: Classes

Use selectors.html for this exercise.

  1. Add a class called "action" and add it to all the headings that fall under "Migrating from HTML to XHTML." The class should produce green text in italics.
  2. Make the h1 centered. Use an ID.

Exercise 8: Selectors

Use selectors.html for this exercise.

  2. Make text that appears inside a table cell (but not a heading) be somewhat smaller

Final Exercise

Use this file: final.html and do as many of the following steps as you wish or have time to do. I have put some classes into the html code, but you may wish to add others.

  1. create a separate stylesheet
  2. center headings 1 and 2
  3. create a 10% margin on left and right for the entire document
  4. float the images
  5. give the entire document a colored background (make it a pale, soft color)
  6. give the table headings a dark colored background with white text
  7. put a border around all images
  8. give the h3 headings a double-line border on the top only
  9. add lines and padding to the tables so they look good
  10. center the spanned rows "Hotels" and "Restaurants"
  11. make the disclaimer text a different color and indent it