ID selectors in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select an element with the ID "header".

CSS

#[1] { color: blue; }

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

A.header

Bheader

Cheader1

Dmain

Attempts:

3 left

💡 Hint

Common Mistakes

Using a dot (.) instead of a hash (#) for ID selectors.

Misspelling the ID name.

The # symbol is used to select an element by its ID. So #header selects the element with ID "header".

2fill in blank

medium

Complete the code to change the background color of the element with ID "main-content".

CSS

#[1] { background-color: lightgray; }

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

Amain-content

Bcontent-main

Cmaincontent

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using a similar but incorrect ID name.

Forgetting the hyphen (-) in the ID.

The ID selector must match the exact ID of the element. Here, the ID is "main-content", so #main-content selects it.

3fill in blank

hard

Fix the error in the CSS selector to style the element with ID "footer".

CSS

[1]footer { font-size: 1.2rem; }

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

A*

B.

C#

D@

Attempts:

3 left

💡 Hint

Common Mistakes

Using a dot (.) instead of a hash (#) for ID selectors.

Using invalid symbols like * or @.

The # symbol is required to select an element by its ID. Using #footer correctly targets the element with ID "footer".

4fill in blank

hard

Fill both blanks to select the element with ID "nav" and set its text color to red.

CSS

[1][2] { color: red; }

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

A#

B.

Cnav

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Using a dot (.) instead of a hash (#).

Using the wrong ID name.

The # symbol selects by ID, and the ID name is "nav". So #nav selects the element with that ID.

5fill in blank

hard

Fill all three blanks to select the element with ID "sidebar", set its width to 250px, and add a border.

CSS

[1][2] { width: [3]; border: 1px solid black; }

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

A#

Bsidebar

C250px

D.

Attempts:

3 left

💡 Hint

Common Mistakes

Using a dot (.) instead of a hash (#) for ID selector.

Forgetting units for width value.

Use #sidebar to select the element by ID. Then set the width to 250px to control its size.