Universal selector in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select all elements on the page.

CSS

[1] { margin: 0; padding: 0; }

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

A*

B#

C.

Dhtml

Attempts:

3 left

💡 Hint

Common Mistakes

Using '#' which selects an element by ID.

Using '.' which selects elements by class.

Using 'html' which selects only the html element.

The universal selector in CSS is the asterisk (*). It selects all elements on the page.

2fill in blank

medium

Complete the code to apply a border to all elements.

CSS

[1] { border: 1px solid black; }

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

A*

B#all

C.all

Dbody

Attempts:

3 left

💡 Hint

Common Mistakes

Using '.all' which selects elements with class 'all' only.

Using '#all' which selects an element with ID 'all' only.

Using 'body' which selects only the body element.

The universal selector '*' applies styles to every element on the page, so all elements get the border.

3fill in blank

hard

Fix the error in the code to select all elements and set font size.

CSS

[1] { font-size: 16px; }

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

Afont

B#

C.

D*

Attempts:

3 left

💡 Hint

Common Mistakes

Using '#' or '.' which select IDs or classes, not all elements.

Using a word like 'font' which is not a selector.

The universal selector '*' selects all elements. '#' and '.' are for IDs and classes, and 'font' is not a selector.

4fill in blank

hard

Fill both blanks to select all elements and set margin and padding to zero.

CSS

[1] { margin: 0; padding: [2]; }

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

A*

B5px

C0

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using a class or ID selector instead of the universal selector.

Setting padding to a non-zero value when the goal is to remove it.

The universal selector '*' selects all elements. Setting padding to '0' removes all padding.

5fill in blank

hard

Fill all three blanks to select all elements, set box-sizing, and remove margin.

CSS

[1] { box-sizing: [2]; margin: [3]; }

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

Ahtml

Bborder-box

C0

D*

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'html' instead of '*' to select all elements.

Using incorrect box-sizing values like 'content-box'.

Not setting margin to zero when the goal is to remove it.

The universal selector '*' selects all elements. 'border-box' makes sizing include borders and padding. Setting margin to '0' removes default margins.