Debugging specificity issues in CSS - Mini Project: Build & Apply

Debugging Specificity Issues in CSS

📖 Scenario: You are building a simple webpage with a heading and a paragraph. You want the heading to be blue and the paragraph to be green. However, the paragraph text is not showing green as expected because of CSS specificity issues.

🎯 Goal: Fix the CSS specificity problem so that the heading text is blue and the paragraph text is green as intended.

📋 What You'll Learn

Create HTML with a <h1> heading and a <p> paragraph inside a <div> with class container.

Write CSS rules to color the heading text blue and the paragraph text green.

Fix the CSS specificity so the paragraph text color is applied correctly.

💡 Why This Matters

🌍 Real World

Web developers often face CSS specificity conflicts when multiple styles apply to the same element. Understanding specificity helps fix styling bugs quickly.

💼 Career

Knowing how to debug CSS specificity is essential for front-end developers to create consistent and maintainable designs.

1

Create the HTML structure

Create a div with class container. Inside it, add an h1 with text Welcome and a p with text This is a paragraph.

CSS

Need a hint?

Use semantic HTML tags inside the container div.

2

Add basic CSS rules

Add CSS rules to color the h1 text blue using h1 { color: blue; } and the p text green using p { color: green; }

CSS

  Welcome
  This is a paragraph.


/* Add CSS rules below */

Need a hint?

Write separate CSS rules for h1 and p selectors.

3

Add conflicting CSS rule with higher specificity

Add a CSS rule that sets p color to red inside the .container class using .container p { color: red; }. This will override the previous p { color: green; } rule due to higher specificity.

CSS

  Welcome
  This is a paragraph.


h1 {
  color: blue;
}
p {
  color: green;
}

/* Add conflicting CSS rule here */

Need a hint?

Use a selector combining the class .container and the p tag.

4

Fix specificity to apply green color to paragraph

Fix the CSS specificity so the paragraph text is green, not red. Change the p { color: green; } rule to .container p { color: green !important; } to override the red color.

CSS

  Welcome
  This is a paragraph.


h1 {
  color: blue;
}

/* Fix the paragraph color specificity here */

.container p {
  color: red;
}

Need a hint?

Use !important to override the red color rule.