Element selectors in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an element selector in CSS?

An element selector targets all HTML elements of a specific type to apply styles. For example, p selects all paragraph elements.

beginner

How do you write a CSS rule to change the text color of all h1 elements to blue?

Use the element selector h1 like this:

h1 {
  color: blue;
}

beginner

True or False: Element selectors apply styles only to elements with a specific class.

False. Element selectors apply styles to all elements of that type, regardless of class or id.

beginner

What will this CSS do?

div { background-color: lightgray; }

It will set the background color of all div elements on the page to light gray.

intermediate

Why should you be careful when using element selectors on large pages?

Because element selectors style every element of that type, they can affect many parts of the page and may cause unexpected changes if not used carefully.

Which CSS selector targets all p elements?

A #p

B .p

C *p

D p

The element selector is just the element name, so p selects all paragraph elements.

What does this CSS rule do?

h2 { font-weight: bold; }

A Makes all elements with class 'h2' bold

B Makes all <code>h2</code> elements bold

C Makes all elements with id 'h2' bold

D Does nothing

The element selector h2 targets all h2 tags and makes their text bold.

If you want to style only one specific element, should you use an element selector?

A No, element selectors target all elements of that type

B Yes, element selectors target single elements

C Yes, but only if the element has a class

D No, element selectors only work with ids

Element selectors apply styles to all elements of that type, not just one.

Which selector would you use to style all button elements?

A button

B #button

C *button

D .button

The element selector is simply the element name, so button selects all button elements.

What is a potential downside of using element selectors on a large website?

A They only style one element

B They are slower than class selectors

C They can unintentionally style many elements and cause layout issues

D They don't work in modern browsers

Element selectors apply styles to every element of that type, which can cause unexpected changes if not used carefully.

Explain what an element selector is and give an example of how to use it in CSS.

Think about how you select all paragraphs or headings in CSS.

Describe a situation where using an element selector might cause problems on a webpage.

Consider what happens if you style all <code>div</code> or <code>p</code> elements without limits.

Practice

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