CSSmarkup~30 mins

Specificity rules in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Understanding CSS Specificity Rules

📖 Scenario: You are creating a simple webpage with a heading and a paragraph. You want to learn how CSS specificity affects which styles are applied when multiple rules target the same element.

🎯 Goal: Build a small HTML page with a heading and paragraph, then write CSS rules with different selectors to see which style wins based on specificity.

📋 What You'll Learn

Create an HTML skeleton with a <h1> and a <p> element

Write CSS rules using element selectors, class selectors, and ID selectors

Apply conflicting color styles to the same elements using different selectors

Observe which CSS rule applies based on specificity

💡 Why This Matters

🌍 Real World

Web developers often need to control which CSS styles apply to elements, especially when multiple styles conflict. Understanding specificity helps them write CSS that works as intended.

💼 Career

Knowing CSS specificity is essential for front-end developers to maintain and debug styles in websites and web applications.

Progress0 / 4 steps

Create the HTML structure

Write the HTML code to create a <!DOCTYPE html> document with <html lang="en">, <head> including <meta charset="UTF-8"> and <title> 'Specificity Demo', and a <body> containing a <h1> with text 'Welcome' and a <p> with text 'This is a paragraph.'

CSS




  
  Specificity Demo


  Welcome
  This is a paragraph.

Need a hint?

Start by writing the basic HTML5 document structure with a heading and paragraph inside the body.

Add CSS with element selectors

Inside a <style> tag in the <head>, write CSS rules that set the color of h1 elements to blue and p elements to green using element selectors.

CSS




  
  Specificity Demo
  
    /* Your code here */
  


  Welcome
  This is a paragraph.

Need a hint?

Use simple element selectors like h1 and p to set their text colors.

Add CSS with class selectors

Add a class called highlight to the <p> element in the HTML. Then, inside the <style> tag, add a CSS rule using the class selector .highlight that sets the color to red.

CSS




  
  Specificity Demo
  
    h1 {
      color: blue;
    }
    p {
      color: green;
    }
    /* Add class selector rule here */
  


  Welcome
  This is a paragraph.

Need a hint?

Add the class attribute to the paragraph and write a CSS rule for .highlight to change its color.

Add CSS with ID selector and observe specificity

Add an ID called main-title to the <h1> element in the HTML. Then, inside the <style> tag, add a CSS rule using the ID selector #main-title that sets the color to orange. This will override the previous h1 color because ID selectors have higher specificity.

CSS




  
  Specificity Demo
  
    h1 {
      color: blue;
    }
    p {
      color: green;
    }
    .highlight {
      color: red;
    }
    /* Add ID selector rule here */
  


  Welcome
  This is a paragraph.

Need a hint?

Add the ID attribute to the heading and write a CSS rule for #main-title to change its color.

Notice how this color overrides the previous h1 color.