Bird
Raised Fist0
CSSmarkup~5 mins

Element selectors in CSS

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
Introduction

Element selectors help you style all elements of a certain type on your webpage. They make it easy to change the look of headings, paragraphs, or any HTML tag all at once.

You want all paragraphs to have the same font and color.
You want all headings (like <h1> or <h2>) to share the same style.
You want to set a background color for all buttons on your page.
You want to make all links look consistent without adding classes.
You want to quickly change the style of all list items.
Syntax
CSS
element {
  property: value;
}

The element is the HTML tag name you want to style, like p or h1.

All elements of that type on the page will get the styles inside the curly braces.

Examples
This makes all paragraphs have blue text.
CSS
p {
  color: blue;
}
This styles all <h1> headings to be bigger and bold.
CSS
h1 {
  font-size: 2rem;
  font-weight: bold;
}
All buttons get a light gray background and rounded corners.
CSS
button {
  background-color: lightgray;
  border-radius: 0.5rem;
}
Sample Program

This page styles all <p> elements with dark green text and a bigger font. The <h2> heading is styled with dark red color and a clean font. No classes or IDs are needed.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Element Selector Example</title>
  <style>
    p {
      color: darkgreen;
      font-size: 1.2rem;
      font-family: Arial, sans-serif;
    }
    h2 {
      color: darkred;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
  </style>
</head>
<body>
  <h2>Welcome to My Page</h2>
  <p>This paragraph is styled using an element selector.</p>
  <p>All paragraphs look the same without adding classes.</p>
</body>
</html>
OutputSuccess
Important Notes

Element selectors apply styles to every matching tag on the page, so use them when you want consistent styling.

They have lower priority than class or ID selectors, so more specific selectors can override them.

Use element selectors to keep your CSS simple and avoid repeating styles.

Summary

Element selectors target all HTML tags of a certain type.

They help style many elements quickly and consistently.

They are simple and useful for basic styling without extra classes.

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