How to Hide an Object with CSS

Cascading Style Sheets (CSS) have given Web designers new abilities and greater control over the appearance of their Web pages. One of these new abilities is being able to hide elements so that, when combined with a scripting language such as JavaScript, you can give the illusion of animation. There are three ways to hide an object with CSS: in-line styles, internal style sheets and external style sheets. Our example will walk you through the first two and will revolve around a div (a tag that defines a division within an HTML or XHTML document) with the content "Hello world."

Difficulty: Moderately Challenging

Instructions

Things You'll Need:

• Cascading Style Sheets
• Computer

Using an In-Line Style

1. Find the code for the element you wish to hide. In this case the code will be

   Hello world
   .

2. Insert the following code between the end of the opening tag of the element, but before the closing square bracket.
   
   style = “visibility: hidden;”
   
   So, in our example, our div would become:
   
   

   Hello world
   
   

Using an Internal Style Sheet

3. Find the tag in the code of your Web page. The head tag should be toward the top of your code.

4. Move the tag down one line. If the tag is situated on a line with other code, move it down so that it is on its own line and then move it down one more.

5. Insert the following code on the line above the tag:
   
   

6. Find the code for the element which you wish to hide.

7. Insert the following code between the end of the opening tag of the element, but before the closing square bracket.
   
   class = “invisible”
   
   So, in our example, our div would become:
   
   

   Hello world
   
   

Tips & Warnings

• Use in-line styles if you only wish to hide one element.
• Use internal style sheets if you want to hide more than one element. In this case, you would give the class = “invisible” attribute to every element you wanted hidden. By doing this, you can add other CSS tags to the "invisible" class elements without changing it at each element, just at the top of your document.
• You can also use external style sheets by putting the code from inside your internal sheet (that is, the tags ) in a separate document. Then, instead of putting those tags before your tag, put: FILENAME.css is the filename of your new sheet file. This allows you to use the same sheet for a number of pages, which is great if you wish to use the same styles in all your pages!
• If you actually want hide an element in response to a user, you need to use JavaScript, which is beyond the scope of this guide.
• A viewer cannot interact with a hidden element while it’s hidden. The contents of a hidden element are not only hidden from view, they are actually gone while they are hidden.