How to hide elements using only CSS

In this article we will learn the different ways to hide elements using only CSS, so that you can manipulate your web page.

What’s up programmer, is everything all right? Let’s learn something new!

The correct way to hide elements with CSS is using the display property with the value of none

So the selected elements disappear from the HTML, see how to use the rule:

p {
 display: none;
}

This way the paragraphs on the page will disappear

Remember that you must apply it to the elements you need, and of course you can use classes and ids as selectors

Another way is by changing the visibility, the difference is that with this property the space for the element is still allocated

It is just not visible to the customer, but it will be there representing its space

And we should put the visibility value to hidden, let’s take a look:

.container {
 visibility: hidden;
}

This way we are applying visibility only to elements that have the container class

Another way to hide elements, which works like display with none, is an HTML attribute called hidden

You can add the attribute to the element and it will disappear from the screen, see it out:

<p hidden>This paragraph is hidden</p>

The hidden attribute has a semantic value too, it indicates that the element with this attribute has no value for the page, that is, it is not relevant

Conclusion

In this article we learned  the three most used ways to hide elements using only CSS, and the last one with pure HTML (which is also a good alternative)

Now that you are equipped with different ways to hide elements, just choose the one that best suits your needs

Note: If you don’t know what semantic HTML is, avoid the attribute one so you don’t use it wrongly

I advise you to take a look at this subject, which is of paramount importance for any web developer.