A3: Applying CSS

On This Page

Overview

The main points of this assignment are to:

  • Apply an external style sheet
  • Use font and text styles
  • Position image elements
  • Work with ids, classes, pseudo-elements (optional), and pseudo-classes
  • Create page styles for print media (optional)

^ top

Specifications

  1. Link a single CSS file, named style.css, to your web page from assignment 1.
  2. In the external CSS file, develop font or text styles for one or more heading tags.
  3. In the external CSS file, use either position or float to place your image.

    Hint: you may want to add an id or class attribute to your image element.

  4. In the external CSS file, use pseudo-classes to create a rollover effect for your hyperlink
  5. Validate your external CSS file using the W3C CSS Validator and make sure you have no errors or warnings.
  6. Make certain that your HTML page still validates using the W3C HTML Validator.
  7. Complete a README.txt file following the instructions for homework.
  8. Zip your files and submit the zipped archive file to WebCT as explained in the section of this document: What to Turn In.

^ top

Extra Credit

Adding the following to your external CSS file is worth extra credit points:

  1. Use the first-letter pseudo element to make the first letter of an element special. (1 point)
  2. Use the first-line pseudo element to make the first line of a textual element special. (1 point)
  3. Add a print (@media print or @page) style. (1 point)

Make certain that your README.txt file lists any extra credit attempted.

^ top

Grading Criteria

The instructor will evaluate your assignment using the following criteria. Each criteria represents a specific achievement of your assignment and has a scoring guide. The scoring guide explains the possible scores you can receive.

Some scoring guides have a list of indicators. These indicators are a sign of meeting, or a symptom of not meeting, the specific criterion. Note that a single indicator may not always be reliable or appropriate in a given context. However, as a group, they show the condition of meeting the criterion.

For information on grading policies, including interpretation of scores, see the course information page.

CSS Styles

  • 10: All the specified styles were included in the CSS file
  • 8: One or two specified styles were not included in the CSS file
  • 6: Some specified styles were not included in the CSS file
  • 4: Few specified styles were included in the CSS file
  • 2: Almost no specified styles were included in the CSS file
  • 0: CSS files was not turned in

CSS Validation

  • 4: CSS file validates with no errors or warnings
  • 2: CSS file has warnings but no errors
  • 1: CSS file has errors
  • 0: CSS file not turned in

HTML Page Validation

  • 4: HTML page validates with no errors
  • 3: HTML page has one error
  • 2: HTML page has two or three errors
  • 1: HTML page has four to eight errors
  • 0: HTML page has more than eight errors or was not turned in

README.txt File

  • 2: README.txt file submitted with specified information included
  • 1: README.txt submitted but some information was not included or the wrong name was used
  • 0: No README.txt submitted

Maximum Score: 20, plus extra credit

^ top

What to Turn In

Submit your assignment to WebCT in a ZIP file following the instructions for homework. Include the following items in your ZIP file for grading:

  1. A README.txt file
  2. A single HTML file modified from assignment 1
  3. An image file that displays in your HTML page
  4. A single CSS file named style.css

Note: do NOT turn in "include files" as neither WebCT nor my server can process them.

^ top

Home | WebCT | Announcements | Schedule | Room Policies | Course Info
Help | FAQ's | HowTo's | Links

Last Updated: October 06 2006 @11:07:26