Element selectors in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select all <p> elements and make their text red.

CSS

p [1] 
  color: red;
}

Drag options to blanks, or click blank then click option'

A{

B[

C(

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using square brackets or parentheses instead of curly braces.

Forgetting the opening brace after the selector.

The correct syntax to start a CSS rule block is with a curly brace '{'.

2fill in blank

medium

Complete the code to select all <h1> elements and set their font size to 2rem.

CSS

h1 [1] 
  font-size: 2rem;
}

Drag options to blanks, or click blank then click option'

A(

B{

C[

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses or brackets instead of curly braces.

Omitting the opening brace.

CSS rules use curly braces '{' to start the declaration block after the selector.

3fill in blank

hard

Fix the error in the code to select all <li> elements and make their text bold.

CSS

li [1] 
  font-weight: bold;
}

Drag options to blanks, or click blank then click option'

A{

B(

C[

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong brackets or missing the opening brace.

Placing the brace on the wrong line.

The CSS rule block must start with a '{' after the selector to group declarations.

4fill in blank

hard

Complete the code to select all <a> elements and remove their underline.

CSS

a { 
  text-decoration: [1];
}

Drag options to blanks, or click blank then click option'

A{

Bnone

Cunderline

D(

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses instead of curly braces.

Setting text-decoration to 'underline' instead of 'none'.

Use '{' to start the CSS block and 'none' to remove underline from links.

5fill in blank

hard

Fill both blanks to select all <h2> elements, set color to blue, and add margin of 1rem.

CSS

h2 { 
  color: [1];
  margin: [2];
}

Drag options to blanks, or click blank then click option'

A{

Bblue

C1rem

D(

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong brackets to open the block.

Using incorrect color names or units for margin.

Start the CSS block with '{', set color to 'blue', and margin to '1rem' for spacing.

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