Bootstrap / Bootstrap Utilities and Helpers
Controlling Display and Visibility
In this tutorial, we will explore how to control the display and visibility of HTML elements using CSS. You'll learn how to show, hide, and manipulate the behavior of elements on …
Section overview
5 resourcesExplores utility classes and helpers to modify layout, spacing, and visibility.
1. Introduction
Welcome to this tutorial! Our goal in this lesson is to understand how to control the display and visibility of HTML elements using CSS.
By the end of this tutorial, you will be able to:
- Understand the difference between the display and visibility property in CSS
- Manipulate the visibility of HTML elements using CSS
- Use the display property to control the layout and behavior of HTML elements
Prerequisites
Basic understanding of HTML and CSS is recommended. Familiarity with using CSS selectors to target HTML elements will be beneficial.
2. Step-by-Step Guide
Display Property
The display property in CSS determines the type of box used for an HTML element. It has several values like none, block, inline, inline-block, etc.
display: none;- This value will completely hide the element, and it will take no space on the page.display: block;- This value will display the element as a block element. It will start on a new line, and take up the full width available.display: inline;- This value will display the element as an inline element. It does not start on a new line and it only takes up as much width as necessary.
Visibility Property
The visibility property in CSS is used to show or hide an HTML element.
visibility: hidden;- This value hides an element, but it will still take up the same space as before.visibility: visible;- This value shows the element.
3. Code Examples
Example 1: Using display Property
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
display: none;
}
</style>
</head>
<body>
<h2>Display Property Example</h2>
<div id="myDiv">
<p>This is a paragraph.</p>
</div>
</body>
</html>
In the above example, the div with id "myDiv" has display: none; so it is not visible on the page and also doesn't take any space.
Example 2: Using visibility Property
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
visibility: hidden;
}
</style>
</head>
<body>
<h2>Visibility Property Example</h2>
<div id="myDiv">
<p>This is a paragraph.</p>
</div>
</body>
</html>
In this example, the div with id "myDiv" has visibility: hidden; so it is not visible on the page, but it still takes up space.
4. Summary
We've covered how to control the display and visibility of HTML elements using CSS. We've learned the difference between the display and visibility properties and how to use them.
For further learning, you could explore other values of the display property like flex, grid, table, etc.
5. Practice Exercises
Exercise 1: Hide an element without affecting the layout.
Solution: To hide an element without affecting the layout, we can use the visibility property. Here's the code snippet:
#myDiv {
visibility: hidden;
}
Exercise 2: Hide an element and also the space it was taking up.
Solution: To completely hide an element including its space, we can use the display property. Here's the code snippet:
#myDiv {
display: none;
}
Remember to practice these concepts and experiment with different values to get a better understanding of how they work.
Need Help Implementing This?
We build custom systems, plugins, and scalable infrastructure.
Related topics
Keep learning with adjacent tracks.
Popular tools
Helpful utilities for quick tasks.
Latest articles
Fresh insights from the CodiWiki team.
AI in Drug Discovery: Accelerating Medical Breakthroughs
In the rapidly evolving landscape of healthcare and pharmaceuticals, Artificial Intelligence (AI) in drug dis…
Read articleAI in Retail: Personalized Shopping and Inventory Management
In the rapidly evolving retail landscape, the integration of Artificial Intelligence (AI) is revolutionizing …
Read articleAI in Public Safety: Predictive Policing and Crime Prevention
In the realm of public safety, the integration of Artificial Intelligence (AI) stands as a beacon of innovati…
Read articleAI in Mental Health: Assisting with Therapy and Diagnostics
In the realm of mental health, the integration of Artificial Intelligence (AI) stands as a beacon of hope and…
Read articleAI in Legal Compliance: Ensuring Regulatory Adherence
In an era where technology continually reshapes the boundaries of industries, Artificial Intelligence (AI) in…
Read article