CSSmarkup~20 mins

Group selectors in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Styling Multiple Elements with Group Selectors

📖 Scenario: You are creating a simple webpage for a local bakery. The bakery wants the headings and paragraphs to have the same text color and font style to keep the design consistent.

🎯 Goal: Build a CSS style using a group selector that applies the same color and font style to both <h1> and <p> elements on the page.

📋 What You'll Learn

Create an HTML skeleton with one <h1> heading and two <p> paragraphs.

Add a CSS group selector that targets both h1 and p elements.

Set the text color to #6B4226 (a warm brown) and the font family to Arial, sans-serif for these elements.

Ensure the CSS is linked properly in the HTML.

💡 Why This Matters

🌍 Real World

Group selectors help keep website styles consistent and reduce repeated code, making it easier to maintain and update designs.

💼 Career

Web developers use group selectors daily to efficiently style multiple elements, improving website appearance and user experience.

Progress0 / 4 steps

Create the HTML structure

Write the basic HTML skeleton with a <h1> element containing the text "Welcome to Sweet Treats Bakery" and two <p> elements with the texts "Freshly baked every day." and "Visit us for delicious pastries." inside the <body>.

CSS




    
    
    Sweet Treats Bakery

Need a hint?

Remember to include the <h1> and two <p> tags inside the <body> section.

Add a CSS file link

Inside the <head> section, add a <link> tag to connect an external CSS file named styles.css.

CSS




    
    
    Sweet Treats Bakery
    


    Welcome to Sweet Treats Bakery
    Freshly baked every day.
    Visit us for delicious pastries.

Need a hint?

Use a <link> tag with rel="stylesheet" and href="styles.css".

Create the CSS group selector

In the styles.css file, write a CSS rule using a group selector that targets both h1 and p elements. Set the color property to #6B4226 and the font-family property to Arial, sans-serif.

CSS

/* Your code here */

Need a hint?

Separate selectors with a comma and put the shared styles inside curly braces.

Complete and verify the styling

Ensure the styles.css file is saved and linked correctly. Add a comment at the top of styles.css that says /* Group selector for headings and paragraphs */.

CSS

/* Add a comment describing the group selector here */

h1, p {
    color: #6B4226;
    font-family: Arial, sans-serif;
}

Need a hint?

Comments in CSS start with /* and end with */.