Start with the element you can see
When a style does not appear, open the page in a browser and inspect the actual element. Chrome and Edge provide an Elements panel; Firefox has an Inspector. Select the heading or card you expect to style, then check its tag name, classes and location in the document. A selector for .notice will not match an element whose class is notice-box.
If no rules from your stylesheet appear, confirm the stylesheet link and file path in the HTML, then check the browser’s network or console errors. CSS files are loaded relative to their linking document or CSS file as appropriate; a typo in the filename can make every rule seem broken.
Read matching rules and overridden declarations
The Styles pane lists matching CSS rules and their sources. A crossed-out declaration lost to another declaration in the cascade; it is not necessarily invalid. Toggle a declaration or edit a value temporarily to test a hypothesis. Those changes usually exist only inside DevTools until you copy the fix into your actual stylesheet.
If a declaration is marked invalid or inactive, check the property spelling, syntax and layout context. For example, justify-content is useful in a flex or grid container, but not for distributing items in an ordinary block by itself.
Compare declared and computed values
The Computed pane shows the resolved value the browser uses for a selected element, including values from inheritance and browser defaults. Search for the property you are debugging. Trace it back to a source declaration where the tool permits. A computed font-size may be in pixels even when the stylesheet used a relative unit; this conversion is a clue, not a change to your source.
Use the box-model display to inspect content size, padding, border and margin. If the correct colour applies but spacing looks wrong, investigate box sizing, layout and overflow instead of adding more colour rules.
Diagnose a non-matching class
The HTML below gives the paragraph class notice, while the first CSS selector uses .notcie. The browser ignores that rule for the paragraph because it does not match; the paragraph keeps its inherited colour. Inspect the paragraph to see the missing match. Correct the selector to .notice and the blue rule applies.
This is a useful debugging pattern: identify the exact element, inspect which rules match, change one suspected cause, and verify the computed result. It is faster and safer than adding !important to an unverified selector.
HTML
<p class="notice">Your draft was saved.</p>CSS — typo, then corrected selector
.notcie { color: #1d4ed8; } /* Does not match */
.notice { color: #1d4ed8; } /* Matches */Make and verify the real fix
After identifying the cause, edit the saved CSS file, refresh the page and inspect the same element again. Confirm both the visible result and the computed value. Test at narrow and wide widths if a media query or responsive layout is involved; test keyboard focus if the changed style affects controls.
DevTools edits are temporary. A page that looks fixed only while DevTools is open may still be broken after reload, so always verify from the saved source.
Syntax
.notice { color: blue; }Examples
Fix a selector typo
The .notice rule matches the HTML class; .notcie does not.
.notcie { color: #1d4ed8; } /* Typo: no matching element */
.notice { color: #1d4ed8; } /* Correct selector */- The first class selector is misspelled, so it cannot style class="notice".
- The corrected selector matches and sets the paragraph’s colour.
- Inspect the element, confirm the matching rule in Styles, and verify the computed colour after saving and refreshing.
HTML used by this example
<p class="notice">This notice should become blue.</p>Best practices
- Inspect the actual element and stylesheet path before changing rules.
- Use Styles and Computed panes to distinguish missing, overridden and inherited values.
- Save the fix in source and verify again after a reload.
Runtime & versions
Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.
CSS specifications (modules)