Exercise : Arcadia (by Morgan Doocy)

Given arcadia.html and arcadia.css, add styles to match the appearance on the next page:

  1. Make the two headers both be the same size as the body font, not bold, and centered.
  2. Make all the paragraphs on the second page have no vertical space between them.
  3. Make all character names be in uppercase using text-transform: uppercase.
  4. Make the play’s title, all stage direction, the cast, and the terms caro, carnis be italic. Make sure no character names are italic.
  5. Make the cast & crew lists have the two-column appearance shown. Make the left edges of each column be 14 ems apart.
  6. Make the entire content of the page be 25 ems wide, and center it on the page.

Exercise expected output

photo of two pages of Arcadia by Tom Stoppard
(click to enlarge)

Exercise finishing touches (advanced)

The current appearance doesn’t quite match the output. To make it match more closely:

  1. Turn all character names, as well as the “Scene One” header, into small caps. To do this, set their font size to 80%, and increase their line height to 1.167em ÷ .8em = 145.875%.

    (This compensates for the smaller font size to give the same line height as everything else, ensuring all baselines are aligned. We calculate with respect to the line height of 1.167em established in the provided CSS code, a default for many browsers.)

  2. Indent, by 1em, the first lines of each stage-direction paragraph, using the text-indent property. Then exclude the first paragraph (:first-child).
  3. Indent, by 2em, all but the first lines of each dialogue line. (Hint: think of it as shifting the left edge, then outdenting the first line.)
  4. Add a small amount of extra space between small caps using the letter-spacing property. Set it to .05em.

Exercise solutions

Following are example solutions for parts 1 and 2:

  1. arcadia.css (view)
  2. arcadia-advanced.css (view)