Class selectors in CSS - Mini Project: Build & Apply

Styling a Simple Webpage Using Class Selectors

📖 Scenario: You are creating a simple webpage with different sections. You want to style these sections using CSS class selectors to give each a unique look.

🎯 Goal: Build a webpage with three sections and style each section differently using CSS class selectors.

📋 What You'll Learn

Create an HTML structure with three

elements, each having a unique class name.

Add a CSS block that uses class selectors to style each section with different background colors and padding.

Use semantic HTML5 elements.

Ensure the CSS uses class selectors with a dot prefix.

Make the page responsive with readable text and distinct section backgrounds.

💡 Why This Matters

🌍 Real World

Class selectors are used daily to style websites, allowing developers to target specific groups of elements easily and consistently.

💼 Career

Understanding class selectors is essential for front-end web development jobs, as they form the foundation of CSS styling and layout control.

1

Create the HTML structure with three sections

Write the HTML code to create three <section> elements with the classes intro, content, and footer. Each section should contain a <p> with some placeholder text.

CSS

  Welcome to the introduction.


  Main content goes here.


  Footer information here.

Need a hint?

Use the class attribute inside each <section> tag to assign the classes intro, content, and footer.

2

Add a CSS block with class selectors

Create a <style> block and define CSS rules for the classes .intro, .content, and .footer. For now, set the padding property to 1rem for all three classes.

CSS

  Welcome to the introduction.


  Main content goes here.


  Footer information here.


  /* Add padding of 1rem to .intro, .content, and .footer classes */
  

Need a hint?

Use the dot . before each class name in CSS to select that class. For example, .intro { padding: 1rem; }.

3

Add background colors to each class

Inside the existing <style> block, add a background-color property to each class: .intro should be #e0f7fa, .content should be #fff9c4, and .footer should be #ffe0b2.

CSS

  Welcome to the introduction.


  Main content goes here.


  Footer information here.


  .intro {
    padding: 1rem;
    /* Add background-color here */
  }
  .content {
    padding: 1rem;
    /* Add background-color here */
  }
  .footer {
    padding: 1rem;
    /* Add background-color here */
  }

Need a hint?

Write background-color: #e0f7fa; inside the .intro block, and similarly for the other classes.

4

Add a responsive font size to paragraphs

Inside the <style> block, add a CSS rule for section p that sets the font-size to 1.125rem and the line-height to 1.5 for better readability on all devices.

CSS

  Welcome to the introduction.


  Main content goes here.


  Footer information here.


  .intro {
    padding: 1rem;
    background-color: #e0f7fa;
  }
  .content {
    padding: 1rem;
    background-color: #fff9c4;
  }
  .footer {
    padding: 1rem;
    background-color: #ffe0b2;
  }
  /* Add font size and line height for paragraphs inside sections */

Need a hint?

Use the selector section p to style all paragraphs inside sections.