Debugging CSS and Common Mistakes

What Is It?

Debug CSS by checking whether a selector matches, whether a declaration is valid, which rule wins, and how the resulting box is sized.

Properties, Tags and Attributes Explained

• Styles panel: DevTools shows matched rules and crossed-out declarations.
• Computed panel: Shows resolved property values and box dimensions.
• outline: Draws an edge without changing box dimensions; useful temporarily for debugging.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Inspect the winning rule

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Debugging CSS and Common Mistakes</title>
  <style>
    p { color: #b91c1c; }
    .note { color: #1d4ed8; outline: 2px dashed #f97316; }
  </style>
</head>
<body>
  <p class="note">Inspect me in browser DevTools.</p>
</body>
</html>

What you see: The class wins the color conflict, and the outline reveals the paragraph box.

Example 2: Fix an oversized box

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Debugging CSS and Common Mistakes</title>
  <style>
    .card { width: 100%; box-sizing: border-box; padding: 24px; border: 4px solid #7c3aed; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <div class="card">This full-width card includes padding and border within its width.</div>
</body>
</html>

What you see: border-box prevents padding and border adding extra width beyond 100%.

When and Where to Use It

When a rule fails, inspect the element in the playground result, check spelling and file loading, then inspect specificity, layout, and inherited values.

Common Mistake or Useful Tip

In DevTools, toggle one declaration at a time. Avoid adding !important before understanding the conflict.

Try It Yourself

Remove box-sizing in example 2 and inspect the resulting horizontal overflow.