Lesson 2: Validating Your CSS

Overview

In the previous lesson, you used the W3C HTML Validator to validate your HTML. Now, you will use the W3C CSS Validator to validate your CSS and correct invalid style definitions based on the feedback provided by the validator. 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.

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. Save the sample invalid web page on to your local drive.
  4. Now try testing this file using the W3C CSS Validator. Use the "Validate by File Upload" method and upload the file that now resides on your local drive. What CSS errors does the validator find? Did it find any errors that you had overlooked?
  5. Correct any problems found by the Validator, then save the web page, and retest until the web page passes the validity test.

Validate Your Own Pages

  1. Validate all web pages you have created in this course using the W3C CSS Validator.
  2. Note: By default the CSS validator checks for valid CSS using the CSS 2.1 specification. If you've used any CSS3 properties such as text-shadow, box-shadow, border-radius, etc. these will trigger errors in the report. To correct for this, select More Options on the CSS validator home page, then select "CSS Level 3" as your Profile.
  3. Correct any problems found by the Validator, then retest until each page passes the validity test.

Resources/Online Documents

All done?

Share your web site with your instructor, so they can confirm that it has valid CSS. Then proceed to the the next lesson.