Display None In CSS

One of the coolest tricks in CSS is to suppress the display of certain elements in your web page using the “display:none” property. This trick is extremely helpful for two reasons. One, there are times you don’t want to remove code essential for Search Engine Optimization such as the H1 header for example, but you don’t want it showing up on your browser.

Deleting the HTML code will completely eliminate it from a seach engine perhaps losing valuable points. Suppressing the display may be your best option since search engines are still able to read your H1 header. It’s just not displayed on the screen. To suppress the display of H1 in this example, we need to add this CSS code to our stylesheet.

h1 {display:none;}

The second use for “display:none” in CSS is for printing purposes. Often times, many web designers will make a separate stylesheet just for printing. Items such as graphics, menus, certain divs that are not necessary can be suppressed making for a very simplified print output. You can do something similar to your web page using the code below.

img, #menu, #widget {display:none;}

Display:none. Give it a try.

3 thoughts on “Display None In CSS

  1. Is there a way to supersede the effect of display:none.

    For Example,
    I applied “display:none” to a tag and later in a nested tag if i need to show whatever was hidden by the parent tag.
    How would i revert the “display:none” effect.

    /*How would i display text under this tag since the top
    is removing everything nested */

    Thanks
    -Usman

    1. I thought it’s the other way around. Classes and Id’s that are nested usually take precedence over the parent ones. A good illustration is explained below. Suppose you have a page with a layout such as this.

      <div id="body">
        <div class="content">
        </div>
      </div>

      Applying CSS to content for example will supersede any CSS rules applied to the body!

Comments are closed.