DevTools, Debugging, and Going Live

What this is. Every browser ships a full inspector, and learning it turns CSS from guesswork into diagnosis. Right click any element and choose Inspect.

The Elements panel shows the live DOM, which is what actually rendered rather than what you wrote.

The Styles pane lists every rule matching the selected element, in cascade order, with overridden declarations struck through. That strikethrough answers the single most common question in CSS, which is why is my rule not applying.

The box model diagram shows real computed content, padding, border and margin values.

Toggling a declaration on and off lets you test a fix before writing it.

✦ The four questions DevTools answers instantly

Is my rule even reaching this element, which the Styles pane shows directly. Is something more specific overriding it, which the strikethrough shows. Is the element the size I think it is, which the box model shows. And is the element even where I think it is, which highlighting on hover shows. Guessing at any of these wastes far more time than opening the inspector.

A short debugging routine. When something looks wrong, inspect the element first rather than editing the file. Confirm your rule appears in the Styles pane at all. If it is struck through, find what beat it. If it is absent entirely, your selector does not match, which usually means a typo or a misunderstanding of the structure. Only then go back to the stylesheet.

Shipping. A site is not finished when it works on your machine. Finished means it is on the internet at an address you can send to someone. The path is the same one this platform uses: put the files in a repository, connect that repository to a host, and let every push publish automatically. Free hosting for a static site is genuinely free and does not expire.