CSS Issue Bot 9000

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!

Learning Goals

• Change invalid CSS to valid CSS

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. Click the "OPEN" button.
2. Open index.html in your browser. Notice how our styles don't look quite right?
3. Open css/style.css in your text editor.
4. 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".
5. Copy the code from css/style.css and paste it into the text area. Click the "Check" button.
6. Use the error messages to correct the CSS.
7. 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