Visibility property in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the paragraph invisible but still take up space.

CSS

p {
  visibility: [1];
}

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

Anone

Bcollapse

Cvisible

Dhidden

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'none' instead of 'hidden' removes the element from the layout.

Using 'visible' keeps the element visible.

The hidden value makes the element invisible but keeps its space on the page.

2fill in blank

medium

Complete the code to hide a table row completely, removing it from layout.

CSS

tr {
  visibility: [1];
}

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

Acollapse

Bhidden

Cvisible

Dnone

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hidden' hides the row but keeps its space.

Using 'none' is not a valid value for visibility.

The collapse value hides the table row and removes its space, unlike hidden.

3fill in blank

hard

Fix the error in the code to make the element visible again.

CSS

.box {
  visibility: [1];
}

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

Anone

Bvisible

Chidden

Dhide

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hide' which is not a valid value.

Using 'none' which is invalid for visibility.

The correct value to make an element visible is visible. Other values either hide or are invalid.

4fill in blank

hard

Fill both blanks to hide the element but keep its space, and set its color to gray.

CSS

.hidden-text {
  visibility: [1];
  color: [2];
}

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

Ahidden

Bvisible

Cgray

Dblack

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'visible' instead of 'hidden' keeps the element visible.

Using 'black' instead of 'gray' changes the color differently.

Using hidden hides the element but keeps its space. Setting color to gray changes the text color.

5fill in blank

hard

Fill all three blanks to hide a table column completely and set its background color to lightblue and text color to white.

CSS

td.col-hidden {
  visibility: [1];
  background-color: [2];
  color: [3];
}

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

Ahidden

Blightblue

Cwhite

Dcollapse

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hidden' keeps the space but hides content.

Mixing up background and text colors.

collapse hides the table column and removes its space. Background color lightblue and text color white style the visible parts.