CSSmarkup~30 mins

Descendant selector in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Styling Nested Elements with Descendant Selector

📖 Scenario: You are creating a simple webpage with a list of articles. Each article has a title and some paragraphs inside a section. You want to style only the paragraphs inside the sections differently from other paragraphs on the page.

🎯 Goal: Use the CSS descendant selector to change the text color of all paragraphs inside <section> elements to blue, while keeping other paragraphs black.

📋 What You'll Learn

Create an HTML structure with a <main> element containing two <article> elements.

Each <article> should have a <h2> title and a <section> with two paragraphs.

Add one paragraph outside the <section> but inside the <article> to show difference.

Write CSS using the descendant selector to style only paragraphs inside <section> with blue text color.

Paragraphs outside <section> should remain black.

💡 Why This Matters

🌍 Real World

Webpages often have nested content where you want to style only specific parts, like paragraphs inside a section, differently from others. Descendant selectors help you do this cleanly.

💼 Career

Understanding CSS selectors like descendant selectors is essential for front-end web developers to create well-structured, maintainable, and visually appealing websites.

Progress0 / 4 steps

Create the HTML structure with articles and sections

Write the HTML code to create a <main> element containing two <article> elements. Each <article> should have a <h2> with the text 'Article 1' and 'Article 2' respectively. Inside each <article>, add a <section> with two <p> paragraphs containing any text you like. Also add one <p> paragraph directly inside the <article> but outside the <section> with any text.

CSS

Need a hint?

Remember to nest the paragraphs inside the <section> and also add one paragraph outside the section but inside the article.

Add a CSS file link and base paragraph style

Add a <style> block inside the <head> of the HTML document. Inside it, write CSS to set all p elements to have color: black; as the base style.

CSS


  
    /* Set all paragraphs to black color */
    p {
      /* Your code here */
    }
  



  
    Article 1
    
      This is the first paragraph inside section of article 1.
      This is the second paragraph inside section of article 1.
    
    This paragraph is outside the section in article 1.
  
  
    Article 2
    
      This is the first paragraph inside section of article 2.
      This is the second paragraph inside section of article 2.
    
    This paragraph is outside the section in article 2.

Need a hint?

Use the selector p and set color: black; inside the <style> block.

Use descendant selector to style paragraphs inside sections

Inside the existing <style> block, add a CSS rule using the descendant selector section p to set the text color of all paragraphs inside <section> elements to blue.

CSS


  
    p {
      color: black;
    }
    /* Add descendant selector for paragraphs inside sections */
    /* Your code here */
  



  
    Article 1
    
      This is the first paragraph inside section of article 1.
      This is the second paragraph inside section of article 1.
    
    This paragraph is outside the section in article 1.
  
  
    Article 2
    
      This is the first paragraph inside section of article 2.
      This is the second paragraph inside section of article 2.
    
    This paragraph is outside the section in article 2.

Need a hint?

Use the selector section p and set color: blue; inside the <style> block.

Add semantic HTML structure with <html>, <head>, and <body>

Wrap the existing code inside a complete HTML5 document structure. Add the <!DOCTYPE html> declaration at the top. Include the <html lang="en"> root element, a <head> with <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1.0">. Place the existing <style> block inside the <head>. Put the <main> content inside the <body> element.

CSS




  
  
    p {
      color: black;
    }
    section p {
      color: blue;
    }
  


  
    
      Article 1
      
        This is the first paragraph inside section of article 1.
        This is the second paragraph inside section of article 1.
      
      This paragraph is outside the section in article 1.
    
    
      Article 2
      
        This is the first paragraph inside section of article 2.
        This is the second paragraph inside section of article 2.
      
      This paragraph is outside the section in article 2.

Need a hint?

Wrap your existing code inside the full HTML5 structure with <!DOCTYPE html>, <html>, <head>, and <body>. Add the required meta tags inside the head.