CSSmarkup~15 mins

Visibility property in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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

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




    
    
    Visibility Property Example


    
        Hello, world!

Need a hint?

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

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




    
    
    Visibility Property Example
    
        div {
            visibility: visible;
        }
    


    
        Hello, world!

Need a hint?

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

Change the visibility to hidden

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

CSS




    
    
    Visibility Property Example
    
        div {
            visibility: hidden;
        }
    


    
        Hello, world!

Need a hint?

Change the value of visibility from visible to hidden.

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




    
    
    Visibility Property Example
    
        div {
            visibility: hidden;
        }
        main {
            border: 2px solid black;
        }
    


    
        Hello, world!

Need a hint?

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