Bird
Raised Fist0
CSSmarkup~15 mins

Visibility property in CSS - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Using the CSS Visibility Property
📖 Scenario: You are creating a simple webpage with a message that can be hidden or shown using CSS. This is useful when you want to keep the space reserved but hide the content visually.
🎯 Goal: Build a webpage with a visible message inside a <div>. Then use the CSS visibility property to hide the message without removing its space.
📋 What You'll Learn
Create an HTML structure with a <div> containing the text 'Hello, world!'
Add a CSS rule to set the visibility property of the <div> to visible
Add a CSS rule to change the visibility property of the <div> to hidden
Ensure the hidden message still occupies space on the page
💡 Why This Matters
🌍 Real World
Web developers often need to hide elements without changing the page layout. The visibility property is useful for this.
💼 Career
Understanding CSS visibility helps in creating accessible and well-structured web pages that behave predictably.
Progress0 / 4 steps
1
Create the HTML structure with a message
Create an HTML file with a <div> element that contains the text Hello, world!. Use semantic HTML5 structure with <main> and include lang="en" in the <html> tag.
CSS
Hint

Remember to use semantic tags like <main> and set the language attribute on <html>.

2
Add CSS to make the message visible
Inside a <style> tag in the <head>, write a CSS rule that sets the visibility property of the <div> to visible.
CSS
Hint

Put your CSS inside a <style> tag in the <head>.

3
Change the visibility to hidden
Modify the CSS rule for the div to set the visibility property to hidden instead of visible.
CSS
Hint

Change the value of visibility from visible to hidden.

4
Confirm the hidden message still occupies space
Add a CSS rule to the main element that sets a visible border so you can see the space the hidden div occupies. Use border: 2px solid black;.
CSS
Hint

Adding a border to main helps you see the space the hidden div still takes.

Practice

(1/5)
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