Practice Exercise: CSS


Objectives: To become familiar with cascading style sheets.


Use a style sheet for the following exercises.

Exercise 1

Define your own styles for the h1, h2, h3, h4, h5, and h6 tags, and create a document with six heading levels that use the newly defined header styles.

Exercise 2

Define three different paragraph class styles, p1, p2, and p3 that meet the following requirements:

  • p1:
    • left and right margins of 20 pixels
    • background color of pink (#FF00FF)
    • foreground color of blue.
    • font-family of Arial,Helvetica,sans-serif
    • font-size 10pt
    • font-weight normal
    • left aligned text
  • p2:
    • left and right margins of 30 pixels
    • background color of black
    • foreground color of #FFFF00
    • font-family of Arial,Helvetica,sans-serif
    • font-size 10pt
    • font-weight normal
  • p3:
    • text indent of 1 centimeter
    • background color of rgb(204, 51, 51)
    • foreground color of white
    • font-family of Arial,Helvetica,sans-serif
    • font-size 10pt
    • font-weight normal

Exercise 3

Create six paragraphs, each with a heading. Use h1 through h6 for the headings. Then create a paragraph under each heading. The first and fourth paragraph must use p1, the second and fifth must use p2, and the third and sixth must use p3.

See the example solution for an example.

Exercise 4

Create divs or paragraphs that include at least two images and enough text to precede the images, flow around them (one on the left and one on the right), and continue after the last image. Refer to the example with Dewey if necessary.

See the example solution for an example.