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.

Practice

1. What does the CSS property visibility: hidden; do to an element on a webpage?

easy

A. It makes the element transparent but still clickable.

B. It hides the element but keeps its space reserved on the page.

C. It removes the element completely from the page layout.

D. It changes the element's color to match the background.

Solution

1. Step 1: Understand the visibility property

   The visibility property controls whether an element is visible or hidden but does not affect layout space.

2. Step 2: Analyze the effect of hidden

   When set to hidden, the element is not shown but still occupies space on the page.

3. Final Answer:

   It hides the element but keeps its space reserved on the page. -> Option B

4. Quick Check:

   visibility: hidden hides but keeps space [OK]

Hint: Hidden keeps space, display none removes it [OK]

Common Mistakes:

• Confusing visibility: hidden with display: none
• Thinking hidden elements are clickable
• Assuming hidden elements disappear completely

2. Which of the following is the correct CSS syntax to hide an element but keep its space using the visibility property?

easy

A. visibility: hidden;

B. visibility = hidden;

C. visible: hidden;

D. hide: visibility;

Solution

1. Step 1: Recall correct CSS property syntax

   CSS properties use a colon : between property and value, ending with a semicolon.

2. Step 2: Match syntax to visibility property

   The correct syntax is visibility: hidden; to hide but keep space.

3. Final Answer:

   visibility: hidden; -> Option A

4. Quick Check:

   Property: value; is correct CSS syntax [OK]

Hint: Use colon, not equals, for CSS properties [OK]

Common Mistakes:

• Using equals sign instead of colon
• Swapping property and value order
• Using non-existent CSS properties

3. Consider this HTML and CSS:

<div style="visibility: hidden; background: red; width: 100px; height: 100px;">Box</div>

What will you see on the webpage?

medium

A. A transparent box with the text 'Box' visible.

B. A red box with the text 'Box' visible.

C. No space or box visible at all.

D. No red box or text, but space is reserved where the box would be.

Solution

1. Step 1: Analyze the visibility property effect

   The style visibility: hidden; hides the element but keeps its space on the page.

2. Step 2: Understand the visual output

   The red box and text are hidden, so nothing is visible, but the space of 100x100 pixels remains empty.

3. Final Answer:

   No red box or text, but space is reserved where the box would be. -> Option D

4. Quick Check:

   visibility: hidden hides content but keeps space [OK]

Hint: Hidden means invisible but space stays [OK]

Common Mistakes:

• Expecting the box to be visible
• Confusing with display:none which removes space
• Thinking text remains visible

4. You wrote this CSS but the element still shows on the page:

.hidden-box { visibility = hidden; }

What is the error?

medium

A. The syntax uses '=' instead of ':'.

B. The property name should be 'visible' not 'visibility'.

C. The class selector should start with '#', not '.'.

D. The value 'hidden' is invalid for visibility.

Solution

1. Step 1: Check CSS property syntax

   CSS uses a colon : to assign values, not an equals sign =.

2. Step 2: Identify the syntax error

   The code uses visibility = hidden; which is invalid syntax and ignored by browsers.

3. Final Answer:

   The syntax uses '=' instead of ':'. -> Option A

4. Quick Check:

   Use colon for CSS property assignment [OK]

Hint: CSS uses colon, not equals, for properties [OK]

Common Mistakes:

• Using '=' instead of ':' in CSS
• Confusing class selector '.' with id selector '#'
• Assuming 'hidden' is invalid value

5. You want to hide a button but keep the page layout stable so other elements don't move. Which CSS property and value should you use?

hard

A. display: none;

B. position: absolute; left: -9999px;

C. visibility: hidden;

D. opacity: 0;

Solution

1. Step 1: Understand layout impact of hiding methods

   display: none; removes element and space, opacity: 0; hides visually but keeps clickable, position: absolute; left: -9999px; moves element off screen.

2. Step 2: Choose method that hides but keeps space

   visibility: hidden; hides element but keeps its space, keeping layout stable.

3. Final Answer:

   visibility: hidden; -> Option C

4. Quick Check:

   visibility: hidden hides but keeps space [OK]

Hint: Use visibility hidden to keep space but hide element [OK]

Common Mistakes:

• Using display:none which removes space
• Using opacity:0 but element remains interactive
• Moving element off screen breaks accessibility