CSS Tutorial

The visibility Property

The visibility property can control whether an element should be visible or not.
But even if the element is hidden, it still occupies the space on the page.
Its possible values are :
visible: It’s the default value. The box and its contents are visible.
hidden : The box and its content are invisible, but still affect the layout of the page.
Example:


p.second
 {
 visibility : hidden;
 }

The above rule set will make the para invisible but still the para will occupy space on the page

The display Property

The CSS specification defines the default display value for all the elements, e.g. the

element is rendered as block, while the element is displayed inline.
Other block level elements are <p> , <h1> , <h2> , <h3>, <h4>,<h5>, <h6>, <ol>, <ul>, <pre>, <form>, <hr>, and <table>.

Block Level Elements:
⚪ In general block elements are bigger.
⚪ Start on a new line.
⚪ Can contain inline elements and other block-level elements.
⚪ Act as structural building blocks.
⚪ As wide as containing element.
⚪ Height adjusts to fit provided content.
Inline elements :
⚪ Can appear several times on the same line.
⚪ Do not start on a new line
⚪ Only take up as much width as needed

However CSS allows us to change block level elements to inline and vice-versa
To do this we can use display property which can perform 2 tasks:
⚪ Change an element’s rendering from inline to block and vice versa
⚪ Remove an element.
It’s possible values are:
⚪ block
⚪ inline
⚪ Inline-block
⚪ none

Display V/s Visibility

The display and visibility CSS properties appear to be the same thing, but they are in fact quite different and often confuse those new to web development.
⚪ visibility: hidden; hides the element, but it still takes up space in the layout. Child element of a hidden box will be visible if their visibility is set to visible.
⚪ display : none; turns off the display and removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code. All child elements also have their display turned off, even if their display property is set to something other than none.

Previous tutorial

Next tutorial