CIT041X Index > Cascading Style Sheets

Assignment: Cascading Style Sheets

Read everything before doing anything.

The object of this assignment is to apply a Cascading Style Sheet to an XML document. You will need to check the results in a standards-compliant browser, such as Mozilla or the latest version of Internet Explorer. See a screen shot of a possible solution. The screenshot was made on a Linux system, so the font sizes will not look the same on a Windows machine! In fact, in the original specification, everything looked unnaturally large on Windows, so I have lowered the font sizes for this version.

The XML File

The movies.xml file contains data excerpted from Halliwell's Film Guide, © Leslie Halliwell 1981. You'll note that it refers to a file named movies.css; replace that with the name of your stylesheet, which should follow the normal naming conventions. You need to send me only the .css file.

The Style Sheet - Requirements

Because this is not an HTML file, there are no presentation properties associated with any of the elements in the movie file. Your stylesheet must provide specifications for every element whose content you want displayed as anything other than inline text.

The following elements must be block-level elements:

  • <movie-list>
  • <movie>
  • <heading>
  • <technical-details>
  • <synopsis>
  • <production>
  • <para>
  • <credits>
  • <actors>
  • <writer>
  • <director>
  • <photography>
  • <music>
  • <reviews>
  • <review>
  • <reviewer>

Unless specified otherwise, the entire document should be displayed in 12 point Arial, Helvetica, or generic sans-serif font. The entire document should have a 12 point margin.

Movies should be separated from each other by a two-pixel solid black line. (Hint: border-bottom) Add appropriate space around the line so it doesn't appear too close to the text.

In the heading, the movie title and rating should be in 16 point font; the stars should be red. All the other information in the heading should be set in 10 point type.

The synopsis should be indented from both sides of the page, and surrounded with a one-pixel solid black border. Each paragraph in the synopsis should have a one-em indent on its first line.

If a synopsis has a <ref> to another movie, that reference must appear in blue text, in italics, with a light yellow background, which has a hex code of #ffffcc.

Each of the writer, director, photography, and music credits should be preceded by the appropriate name. (Hint: use the :before pseudo-class.) Some of these have been marked with an attribute special="yes", indicating a contribution of a particularly high standard, and should appear in boldface.

The words The Cast: must appear, underlined and in italics, before the list of the actors. Use the specifier text-decoration: underline; to achieve this effect. If you wish, you may also make these words appear in italics.

The actors who have type="lead" specified should be set in 125% of normal size, and those actors who are special="yes" should appear in green, but not bold.

The <reviews> element must be preceded by the word Reviews:, underlined. Each review must have left and right margins of two ems.

The content of the <reviewer> element must be right justified; reviewers of type="periodical" must appear in italics.

Style Sheet Options

Set margins and padding, and line height to create a layout that is pleasing to the eye (not too crowded, not too much empty space).

You may use the gender attribute in any way that makes sense to you, or you may choose to ignore it altogether.

See a screen shot of a possible solution