{{draft}}
In the final article of this module, we take a look at the basics of debugging CSS, including exploring the CSS applied to a page, and other tools that can help you find errors in your CSS code.
| Prerequisites: | Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of How CSS works (study the previous articles in this module.) |
|---|---|
| Objective: | To learn the basics of how CSS can be debugged. |
Just like with debugging HTML, debugging CSS isn't really very scary compared to debugging a lot of other types of code. We'd recommend that you (re)read debugging isn't scary before continuing.
CSS and debugging
Just like HTML, CSS is permissive (read permissive code before continuing.) In CSS's case, if a declaration is invalid (contains a syntax error, or the browser doesn't support that feature), the browser just ignores it completely and moves on to the next one it finds.
If a selector is invalid, then it doesn't select anything, and the whole rule does nothing — again, the browser just moves on to the next rule.
This is great in a lot of ways — in most cases your content will be shown to your users, even if it isn't styled quite right. But this isn't very helpful when you are trying to debug the problem and you don't even get given any kind of error message to help you find it. This is even more of a pain when the content isn't viewable by your users — perhaps a critical style isn't being applied, resulting in the layout going badly wrong?
Fortunately there are some tools available to help you. Let's look at these now.
Inspecting the DOM and CSS
Nowadays, all web browsers provide developer tools made to help you inspect and understand web pages. Among the various tools they provide, there are two that are available in all browsers: The DOM Inspector and the CSS Editor. We already looked at the DOM Inspector in Debugging HTML and how it can be used to inspect HTML. Here we'll look at this and the CSS Editor, and how to use them together to debug CSS problems.
Note: In the following example, we are using Firefox, but all browsers provide the same kind of tools — they might just be available in slightly different places. Read Discover browser developer tools to find more about accessing them in different browsers.
- Open your web browser and load an HTML page (for example this one).
- To inspect an element, you have two choices:
- Right click on the element and chose "Inspect Element".
- Open the global menu on the right of the toolbar and pick "Developer > Inspector".
- Right click on the element and chose "Inspect Element".
- Now you have access to the DOM tree of your document on the left panel. The right panel displays all of the CSS rules that apply to the selected element in the left panel.
- Feel free to fiddle with those tools as they let you change the DOM and update the CSS rules attached to them. For example, change the color of the text from green to red.
The page inspector tool helps you understand what happens, whether it is to find mistakes you've made or understand techniques used by other web developers.