Every modern browser lets you look at the CSS of any page, including your own, and change it live. You will use this all the time, so it is worth learning early.
Opening the tools
Right-click an element on a page and choose Inspect, or press F12. A panel opens with two main areas: the HTML on one side and the Styles list on the other.
What you can see
- Every rule that applies to the selected element, with the file and line it came from.
- Rules that were crossed out. A line through a declaration means another rule overrode it. This is the quickest way to find out why a style is not working.
- The box model diagram, showing the content, padding, border and margin sizes. You will learn what those are in The CSS Box Model.
Changing CSS live
Click a value in the Styles panel and type something else, or tick and untick the checkbox next to a declaration. The page updates instantly. Nothing is saved: reload the page and your edits are gone, so copy the ones you like back into your file.
A debugging routine
- Inspect the element that does not look right.
- Find the property you expected. Is it there at all? If not, your selector is not matching.
- If it is there but crossed out, another rule is stronger. Read the rule that replaced it.
- If it is there and not crossed out, check for a typo in the value. Invalid values are shown with a warning icon.
lightbulb
Try the inspector now
Open any page, right-click a heading, choose Inspect and change its
color. Seeing the effect straight away makes the properties in later lessons much easier to remember.