Set CSS Properties and Values (syntax)

Use Selectors to Style HTML Elements

Utilize Selector Specificity to Control Applied Styles  

Style Elements Using the Cascade 

Apply CSS Styles with Inheritance

Debug CSS with the Chrome Devtools

Understand CSS Layout with the Box Model

Control HTML Elements with Different CSS Units

Manipulate Colors with CSS

Add Backgrounds to HTML Elements

Hide and Show HTML Elements with CSS

Customize CSS Selectors with Pseudo Classes

Modify Font Style in CSS

Positioning HTML Elements using CSS

Use CSS Media Queries to Dynamically Apply Styles

Style a Logo and Navigation on a Website with CSS

Create Dynamic Styles with CSS Variables 

CSS Fundamentals 

CSS gives us control over the visibility of elements on a website. For example when dealing with transitions, understanding how to show and hide elements is essential. Let's work with display, visibility, and opacity to control how our elements appear and take up space. 

Instructor: [00:00] Let's go ahead and give our h1 an opacity of zero. When we refresh the page, we'll see that our h1 seems to disappear from the page. When we inspect the element, we see it's still in the HTML tree, but we can't actually see it anymore.

[00:14] CSS gives us the ability to show and hide elements on a page. In this case, we're using opacity to hide the element. Opacity specifies the level of transparency of an element. In other words, the degree to which the content behind the element is visible.

[00:29] Since our opacity is set to zero, our element is hidden, but it's still taking up space on the page. Knowing how to hide and show elements on a website is helpful when adding transitions and animations.

[00:41] Let's give our h1 a class of transition, with a transition of one second, and opacity of one. You see that when we toggle our opacity enough, our h1 is appearing and disappearing within a one-second time frame.

[00:54] Again, this is nice when adding transitions to appearing and disappearing elements. Let's go ahead and refresh this page. We'll change our opacity of zero to visibility hidden. We'll see, just like opacity, visibility hidden is going to hide the element, while it's still taking up space on the page.

[01:13] However, unlike opacity, there is only a hidden and visible option. There's no in-between option. A transition value would not work with visibility. Finally, let's remove this, and add display none. When we refresh the page, we'll see that not only is our h1 gone, but it's actually be removed from the layout of the page.

[01:32] When we hover over our h1, we're not going to see it highlight anything on the page. Like visibility, there's no in-between option. Transitions will also not work. Display none is a great option when hiding HTML from a page, and you don't want it to take up any space.

Course

CSS Fundamentals

Hide and Show HTML Elements with CSS

Share this video with your friends