Although today's browsers are becoming more capable of accommodating for 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!
- Change invalid CSS to valid CSS
In this lesson, we will be taking the invalid CSS in css/style.css and changing it to be valid.
- Click the "OPEN" button.
- Open index.html in your browser. Notice how our styles don't look quite right?
- Open css/style.css in your text editor.
- 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".
- Copy the code from css/style.css and paste it into the text area. Click the "Check" button.
- Use the error messages to correct the CSS.
- Repeat steps 3-5 until your readout states "Congratulations! No Error Found.".
Remember to check your progress in index.html in your browser!
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.
W3C CSS Validator - Validate Direct Input
View CSS Issue Bot 9000 on Learn.co and start learning to code for free.