UNIT 5 > MODULE 4

Lesson 2: Validating Your CSS

Overview

In this lesson, you will have an opportunity to use the W3C CSS validator, and to correct invalid style definitions based on validation tool feedback. Just like with HTML, a web page that has invalid CSS might look fine in your browser, but someone accessing the page in another browser might have an entirely different experience with the same content. Since CSS is newer than HTML, browsers are even pickier about requiring that developers get it right.

Learner Outcomes

At the completion of this exercise:

Activities

Validate a Sample Page

  1. Open the sample page with invalid CSS . Does this page display ok in your browser?
  2. View the web page's source code. Can you find the CSS errors?
  3. Now try testing this using the W3C CSS Validator. What CSS errors does the validator find? Did it find any errors that you overlooked? Use the second option to "Validate by File Upload" and browse to locate the sample invalid web page on your local drive.
  4. Correct any problems found by the Validator, then save the web page, and retest until the document passes the validity test.
  5. After the page passes the validity test, the W3C validator will provide you with some source code for adding a W3C icon at the bottom of your page. Paste this into the body of the document wherever you think it looks best - This is your trophey for creating a valid web page!

Validate Your Own Pages

  1. Validate all web pages you have created in this course using the W3C CSS Validator.
  2. Correct any problems found by the Validator, then retest until the document passes the validity test.
  3. After the page passes the validity test, add a W3C logo to your page wherever you think it looks best.

Resources/Online Documents

All done?

Turn your web page into your instructor, so they can confirm that it has valid CSS.