7. How do you hide an element on a webpage using CSS?

You can use various CSS properties to hide an element:

• display: none;: completely removes the element from the document, and it does not take up any space.
• visibility: hidden;: hides the element, but it still occupies space in the layout.
• opacity: 0;: hides the element by setting its opacity to zero, and it still occupies space in the layout.
• height: 0; width: 0; overflow: hidden: hides element by changing it's dimensions to 0x0 and hiding content not fitting inside it

/* Examples */
.hidden-element {
    display: none; /*Element is not visible and does not take up space */
}

.invisible-element {
    visibility: hidden; /* Element is invisible but takes up space */
}

.transparent-element {
    opacity: 0; /* Element is invisible but takes up space */
}

.covered-element {
    height: 0;
    width: 0;
    overflow: hidden;
}