Handling Invisibility

Although it may not be obvious at first, invisibility is used everywhere on the web. Every time you use flyout menus, popup windows, dropdown menus or similar types of navigation, the odds are that you've just seen alterations in visibilty at work. Knowing how to control the visibility of elements on your page is a critical skill to have. There are a few different ways to tackle this in CSS, we'll go over them.

Visibility

The easiest way to control the visible status of your elements is by using the visibility style. This style has two possible values: hidden and visible which is the default. See below.
<style type="text/css">
    span
    {
        visibility:hidden;
    }
</style>
Watch me pull a rabbit out of my hat! Again? Nothing up my sleeve...presto!
Notice, although the word, 'again', is invisible above, you can still see the area it takes up in your layout.

Display

A different way to make elements on your page invisible is to use the display style and set it to none. Let's try it.
<style type="text/css">
    span
    {
        display:none;
    }
</style>
Watch me pull a rabbit out of my hat! Again? Nothing up my sleeve...presto!
Notice the difference. The two visible sentences are right next to each other-the space previously taken by the word 'Again?' has been completely removed from your layout flow.
Unlike visibility where there were two opposite settings, there really isn't an opposite setting for none. To restore the visibility of an element that you've altered the display setting for, you need to restore it's original value-which is dependent on the the type of tag. This is typically inline or block but may be one of a few other values.