CSS Validation Lab: Issue Bot 9000

Learning Goals

• Change invalid CSS to valid CSS

Introduction

Although today's browsers are becoming more capable of handing errors in CSS, some errors are not always caught gracefully. This variable can make it extremely difficult to apply style or layout consistently. What can be done to quickly scan our CSS documents for issues? Let's practice using the W3C's CSS Validator!

Getting Started

Fork and clone this lesson into your local environment. Navigate into its directory in the terminal, then run code . to open the files in Visual Studio Code. Run npm test as you go to see your test progress.

Change Invalid CSS to Valid CSS

In this lesson, we will be taking the invalid CSS in css/style.css and changing it to valid.

1. Open index.html in your browser. Notice how our styles don't look quite right?
2. Open css/style.css in your text editor.
3. Visit the W3C CSS validator http://jigsaw.w3.org/css-validator/#validate_by_input. If not already selected, click on the tab labeled "By direct input".
4. Copy the code from css/style.css and paste it into the text area. Click the "Check" button.
5. Use the error messages to correct the CSS.
6. Repeat steps 3-5 until your readout states "Congratulations! No Error Found.".

Remember to check your progress in index.html in your browser!

Conclusion

With a CSS validator, you can work your way through cleaning up errors in a CSS document and reduce the likelihood of display errors across platforms. Using the W3C CSS validator will help you quickly and efficiently troubleshoot your CSS.

Resources

• W3C CSS Validator - Validate Direct Input