Web Development

Hide and Seek with CSS

Hide and Seek with CSS
Written by Sandeep Likhar

Hide and Seek with CSS is the section 16 of Beginner’s Guide to CSS.

Actually what we are doing is hiding the HTML elements. If you really want to seek the hidden elements, then you need to learn about usage of JavaScript.

To hide a HTML element you need two CSS properties.  Those are visibility property and display property. The display property specifies how an element is displayed. It tells whether the element is displaying or not.  The visibility property specifies if an element should be visible or hidden. Hiding an element can be done by setting the display property to “none” or the visibility property to “hidden”. However these two methods produce different results. Look at the following.

Visibility Property

visibility: hidden

Hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.

This is a visible heading

This is a hidden heading

This is a visible heading

[code language=”html”]

This is a visible heading

This is a hidden heading

This is a visible heading

[/code]

You still see the space of the hidden heading taken to display it.

 

Display Property

display:none

Hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there:

This is a display heading

This is a hidden heading

This is a display heading

[code language=”html”]

This is a visible heading

This is a hidden heading

This is a visible heading

[/code]

It is just like removing the heading that is not displayed.

 

Inline – Block Element Display

In our HTML tutorial, we had a section to introduce block elements and inline elements. To go further on, you have to refresh that memory.

A block element is an element that takes up the full width available, and has a line break before and after it. 


An inline element only takes up as much width as necessary, and does not force line breaks.

Changing the display of a inline element to a block element, or block element to inline element, can be useful for making the page look a specific way. Take a list item

  • . If you remember Lists are displayed downwards because it is a block element. If you can display it horizontally, that can be sometimes useful.

    [code language=”css”] li{
    display: inline;
    }
    [/code]

    Now we covert a paragraph block element into a inline paragraph element. By default new paragraphs comes in a new line. But here we changed it using CSS.

    [code language=”css”] p{
    display: inline;
    }
    [/code]

    This is the first paragraph element

    This is the second paragraph

    Now we convert an inline element to a block element using a span tag. By default new span tags comes in the same line. But here we changed it using CSS.

    This is the first span elementThis is the second span element
    [code language=”css”] span{
    display: block;
    }
    [/code]

    In this section we hide few elements from display. We can do interactive things by combining JavaScript with this property and play hide and seek actually. But remember setting the display property of an element only changes how the element is displayed. So, an inline element with display:block is not allowed to have other block elements inside of it. In the next section we are going to position our HTML elements.

    WHAT’S NEXT?

    Let’s learn how Position Elements.

    Join Our Newsletter Today

    Stay updated with all latest updates.
    Give it a try, you can unsubscribe anytime.
    Subscribe
    SUBSCRIBE NOW
  • About the author

    Sandeep Likhar

    Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

    Leave a Reply

    Be the First to Comment!

    Notify of
    avatar
    wpDiscuz
    DON’T MISS OUT!
    Subscribe To Newsletter
    Be the first to get latest updates and exclusive content straight to your email inbox.
    Stay Updated
    Give it a try, you can unsubscribe anytime.

    Join Our Newsletter Today

    Stay updated with all latest updates.
    Give it a try, you can unsubscribe anytime.
    Subscribe
    SUBSCRIBE NOW