Assignment "Style sheets"

Learning goals

After the assignment the student should:

• be able to understand a simple CSS style sheet;
• be able to write a simple style sheet in CSS format;
• understand the notion of different renderings of the same content;
• understand the notion of style sheets for different media types.

Background: The purpose of the assignment is to illustrate the issues concerned with the separation of content and style and to understand what you can do with a style-sheet language such as CSS. To this end the students explore CSS in some detail. The student is not required to learn syntactic details of CSS but should be able to look these up in the appropriate documentation.

The assignment

• Your job is to manually construct, with the help of a text editor such as jedit or emacs, three different CSS style sheets, namely:
  1. A style sheet entitled Professional that renders a HTML file in a business-like style. Choose appropriate fonts (e.g. Helvetica), colors, etc. The style sheet is meant to be used for screen display.
  2. A style sheet entitled Creative which constitutes a creative product of your imagination. Be bold and try out colors, font families, etc. that you haven't tried before. The style sheet is intended for screen display.
  3. A style sheet entitled Print intended for regular black-and-white printing, looking like a regular document, with appropriate margins, text justification, heading sizes, etc.
  The style sheets should be defined in three different .css files.
• The HTML file with the answers to the Lab questions of Week 1 and Week 2 should use the three style sheets. To this end, include the appropriate definitions in the head element of the HTML file. The Professional style is the main style sheet for screen display; the Creative style should be defined as an alternate. Think also of appropriate class-attribute values for the elements in the HTML file. Such classes represent semantic markup of your answers to the lab questions (e.g. a paragraph of class "Note", a list item of type "Answer") that provide the hooks for defining custom-tailored styles.
• Make sure that, overall, you use a large number of the properties listed in Appendix 1.
• Consider the style requests described in Appendix 2. Find out whether/how you can do this in CSS. Include the corresponding style definitions in the Creative style (use comments in the CSS file to help locating these). Also, include a sample use of these style definitions in the HTML file.

Hints and Tips

• This assignment covers material of Chapter 3 of Jackson.
• The W3C CSS 2.1 Recommendation (or some other online CSS manual) can be used as a reference.
• For selecting appropriate Professional and Print styles you might want to use the templates of respectively Powerpoint and Word as sources of inspiration.
• If you see initially no opportunity to use a particular CSS style property, be a bit creative.

Submission details

Check the Blackboard site of the course for submission details.

Appendix 1: List of typical CSS constructs to be used

This list is just indicative. You don't have to use all these style properties (although we would expect to see you use a significant number). You are of course free to use also other style attributes of the CSS 2.1 specification. For a list of style properties please consult http://www.w3.org/TR/CSS21/propidx.html.

Appendix 2: special styles

• The first line of paragraphs is indented, except for the first paragraph following a heading (for practical reasons: limit this to level-two headings).
• The first line of a certain class of a textual block element (make your own choice) is shown in small caps.
• A paragraph of class "note" (find a use for this, e.g. for making remarks about your answers) automatically includes the phrase NOTE: prior to the text entered by the author of the HTML document (so: "Note: " is not present in the text of the HTML document).