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.

/* 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 */
}