How do you hide some element using CSS?
There are more ways how to hide element. Each of them is useful under certain conditions.
For completely hiding an element, use display: none; style. The display property defines what is the display style of the element. If the property value is set to none, the element and all its descendants will be hidden.
No user interaction can be done with element hidden this way. The element is also invisible for screen readers.
Element hidden this way is made transparen by setting its opacity property to 0. The fully transparent/invisible element still occupies space in the layout and the user can interact with the element. The opacity can be animated so it can be used for nice transitions between visible and hidden element.
If you want to make the element invisible but still have the option to interact with it, move the element out of the viewport. Such element can be read by screen readers. It can also receive focus.
This method of hiding elements is not fully supported in Internet Explorer and Edge. User interactions with element hidden this way are not possible. The property can however be animated. The element is still available to screen readers.
Related CSS job interview questions
What is Foundation?HTML Junior
What is CSS framework?HTML Junior
How do you set fixed width of specific div element?CSS Junior
How do you change font for all buttons using CSS?CSS Junior
How do you set margin on each side of a div element to different value?CSS Junior