Bird
Raised Fist0
CSSmarkup~30 mins

Element selectors in CSS - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Styling a Simple Webpage Using Element Selectors
📖 Scenario: You are creating a simple webpage for a small bakery. The page has a header, a main section with some paragraphs, and a footer. You want to style these elements using CSS element selectors to make the page look neat and welcoming.
🎯 Goal: Build a CSS stylesheet that uses element selectors to style the header, p paragraphs, and footer elements with different background colors, text colors, and padding.
📋 What You'll Learn
Use element selectors to style the header, p, and footer elements.
Set the header background color to lightpink and text color to darkred.
Set the p paragraphs text color to darkgreen and add padding of 1rem.
Set the footer background color to lightgray and center the text.
💡 Why This Matters
🌍 Real World
Web designers often use element selectors to quickly style common HTML tags across a website for consistent look and feel.
💼 Career
Knowing how to use element selectors is a fundamental skill for front-end developers and web designers to create visually appealing and accessible websites.
Progress0 / 4 steps
1
Create the HTML structure
Write the HTML code to create a header element with the text "Welcome to Sweet Treats", two p paragraphs with any text you like, and a footer element with the text "© 2024 Sweet Treats Bakery".
CSS
Hint

Use semantic HTML tags: header, p, and footer. Put your text inside these tags.

2
Add a CSS file link
Add a <link> tag inside the <head> section to link an external CSS file named styles.css.
CSS
Hint

Use the <link> tag with rel="stylesheet" and href="styles.css" inside the <head>.

3
Style the header and paragraphs using element selectors
In the styles.css file, write CSS rules using element selectors to set the header background color to lightpink and text color to darkred. Also, set all p paragraphs text color to darkgreen and add padding of 1rem.
CSS
Hint

Use the element names header and p as selectors. Set the properties inside curly braces.

4
Style the footer element
In the styles.css file, add a CSS rule using the element selector to set the footer background color to lightgray and center the text horizontally.
CSS
Hint

Use the footer element selector and set background-color and text-align properties.

Practice

(1/5)
1. What does an element selector in CSS do?
p { color: red; }
easy
A. Styles all <p> elements on the page
B. Styles only the first <p> element
C. Styles elements with class 'p'
D. Styles elements with id 'p'

Solution

  1. Step 1: Understand element selector syntax

    The selector p targets all <p> tags in the HTML.

  2. Step 2: Apply style to all matching elements

    All <p> elements will have their text color changed to red.

  3. Final Answer:

    Styles all <p> elements on the page -> Option A

  4. Quick Check:

    Element selector targets all tags named in selector [OK]
Hint: Element selectors target all tags by name, no class or id needed [OK]
Common Mistakes:
  • Confusing element selector with class or id selectors
  • Thinking it styles only one element
  • Assuming it targets elements with a class or id
2. Which of the following is the correct syntax to select all <h1> elements in CSS?
easy
A. #h1 { font-size: 2rem; }
B. .h1 { font-size: 2rem; }
C. h1 { font-size: 2rem; }
D. *h1 { font-size: 2rem; }

Solution

  1. Step 1: Identify element selector syntax

    Element selectors use the tag name directly, like h1.

  2. Step 2: Check other options

    .h1 { font-size: 2rem; } uses a class selector, #h1 { font-size: 2rem; } uses an id selector, *h1 { font-size: 2rem; } is invalid syntax.

  3. Final Answer:

    h1 { font-size: 2rem; } -> Option C

  4. Quick Check:

    Element selector = tag name only [OK]
Hint: Element selectors are just tag names without dots or hashes [OK]
Common Mistakes:
  • Using dot (.) or hash (#) before tag name
  • Adding invalid characters before tag name
  • Confusing element selector with universal selector
3. Given this HTML:
<div>
  <p>Hello</p>
  <p>World</p>
  <span>!</span>
</div>

And this CSS:
p { color: blue; }

What color will the text inside the <span> be?
medium
A. Blue
B. Default (usually black)
C. Red
D. Green

Solution

  1. Step 1: Identify which elements the selector targets

    The CSS selector p styles only <p> elements, not <span>.

  2. Step 2: Determine the <span> text color

    Since <span> is not targeted, it keeps the default color (usually black).

  3. Final Answer:

    Default (usually black) -> Option B

  4. Quick Check:

    Element selector affects only matching tags [OK]
Hint: Element selectors style only their tag, others stay default [OK]
Common Mistakes:
  • Assuming all text changes color
  • Confusing element selector with universal selector
  • Thinking styles cascade to all child elements automatically
4. What is wrong with this CSS code if the goal is to style all <li> elements?
.li { color: green; }
medium
A. It selects elements with class 'li', not <li> tags
B. It will style all <li> elements correctly
C. It selects elements with id 'li', not <li> tags
D. It is missing a semicolon

Solution

  1. Step 1: Analyze the selector syntax

    The selector .li targets elements with class 'li', not the <li> tag.

  2. Step 2: Identify correct selector for <li>

    To select all <li> elements, use li without a dot.

  3. Final Answer:

    It selects elements with class 'li', not <li> tags -> Option A

  4. Quick Check:

    Dot means class selector, not element selector [OK]
Hint: Dot means class, no dot means element tag [OK]
Common Mistakes:
  • Using dot before tag name
  • Confusing class and element selectors
  • Ignoring selector syntax rules
5. You want to make all <button> elements have a blue background and white text. Which CSS code correctly uses an element selector and ensures accessibility with good contrast?
hard
A. button { background-color: lightblue; color: lightgray; }
B. #button { background-color: blue; color: white; }
C. .button { background-color: blue; color: white; }
D. button { background-color: #0055cc; color: #ffffff; padding: 1rem; border-radius: 0.25rem; }

Solution

  1. Step 1: Confirm element selector usage

    button { background-color: #0055cc; color: #ffffff; padding: 1rem; border-radius: 0.25rem; } uses button without dot or hash, correctly selecting all <button> elements.

  2. Step 2: Check color contrast and styling

    button { background-color: #0055cc; color: #ffffff; padding: 1rem; border-radius: 0.25rem; } uses a dark blue background (#0055cc) and white text (#ffffff), ensuring good contrast and accessibility. It also adds padding and border-radius for better usability.

  3. Final Answer:

    button { background-color: #0055cc; color: #ffffff; padding: 1rem; border-radius: 0.25rem; } -> Option D

  4. Quick Check:

    Element selector + accessible colors = button { background-color: #0055cc; color: #ffffff; padding: 1rem; border-radius: 0.25rem; } [OK]
Hint: Use tag name only and pick colors with strong contrast [OK]
Common Mistakes:
  • Using id or class selectors instead of element selector
  • Choosing low contrast colors hurting accessibility
  • Forgetting padding or border-radius for better button look