Link to USGS home page
Internal USGS Access Only

Assignment Set 2

Cascading Style Sheets

Note: CSS information will not display in mosaic, lynx, versions of netscape before 4.0, versions of IE before 3.0, and will not print from Unix netscape.

Use the class notes along with the Cascading Style sheets book (by Lie & Bos) to change the following features of the web document from Exercise 1. For this assignment, embed the style information within the webpage.

Be Careful! One mistake can prevent all the defined styles from displaying.

  1. Center Level 1 and 2 Headings (H1, H2). —This is not VIS-ID compliant, but we won't find that out until later.
  2. Add three lines worth of vertical space before all third level headers (H3). --Spacing can be set in "em" units, where "1.0em " represents 1 unit equal to the current font size (12pt for a 12pt font). (Hint: the space around html elements can be adjusted using margin.)
  3. Right-justify the ADDRESS section
  4. Change the document background color
  5. Indent the first line of all paragraphs (P) by 2em
  6. Give one paragraph a negative first line indent (refer to the First Line Indents section for examples).
  7. Change numbered lists (OL) to use letters instead of numbers
  8. Change the color of one paragraph using a special class that you create.
  9. Create and use a class that sets a left margin
  10. There is a special html 4.0 element called SPAN that can be used with CSS to alter a span of text:
    <span class="yourclass"> . . . </span>

    Use SPAN and a class to set a background color on a piece of text.

    The SPAN tag is used within existing html elements, while DIV is used to enclose existing elements.

Validate your style sheet

When using the WDG CSSCheck validator, copy only what is between the style tags - do not include the <style type="text/css"> or </style> tags in the text. To copy text from Xemacs, either use the Copy button, Edit --> Copy, or Ctrl Insert (do not use Ctrl C).

Validate your style sheet using the online service WDG CSSCheck using the "Direct input of style sheet" option.

WDG CSSCheck will give you the following warning: "To help avoid conflicts with user style sheets, background and color properties should be specified together."

Setting background and color properties together matters when you are using inverse video (white text on a black background), and ensures that you are not inadvertently creating an unreadable block of text. This is a warning, not an error, and does not mean that your style sheets are incorrect.

Answers to Assignments

  1. http://water.usgs.gov/usgs/training/webmaster/lab/answer-1.1.txt

assignment 2

[up]
"Mastering a Website" online course
Created and maintained by Lorna Schmid and David Boldt.
Last modified: Fri Aug 22 19:27:00 Mountain Daylight Time 2003