Hide elements with CSS

TL, DR

Sometimes we want to hide some element on a webpage. CSS provide us with some handy way to do it. This is a short guide to hide webpage elements using CSS.

Our webpage got something to hide

Sometimes we want to modify quickly the visibility of some element in our webpages. This often happen when we are using some large framework for a little project, and we are left with more elements than we need. Or we may want to hide some part of the framework that we cannot easily customize. As many says, “less is more” when we evaluate modern webpage design.

Luckily in the web world there is an easy way to change the visibility of any element: CSS. By adding a few lines of code we can make any element disappear. Here a few examples in which we change the visibility of something by id, class, or type:

/* Hide all element in a class */
.hiddenclass{
	display:none;
	visibility:hidden;
}
/* Hide an element by id */
#hiddenid{
	display:none;
	visibility:hidden;
}
/* Hide all elements of h5 type */
h5{
	display:none;
	visibility:hidden;
}

At this point, we just need to add this code to our webpage, either in a CSS tag directly or in a separate file that will be sourced when the webpage is loaded. This way we showed how to hide webpage elements easily using CSS. I hope you can find this useful in your projects. Have fun!

Related links

• W3 School guide for display:none link

Do you like our content? Check more of our posts in our blog!