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 

These special keywords can be used to affect specific selectors in customized ways. For example, when links enter a "hover" state, meaning a user has positioned their mouse over the element, we can apply a new set of styles using the :hover pseudo class. Another great example is styling inputs when a user clicks into it with the :focus pseudo class. 


Instructor: [00:00] Inside of our style.css, let's make all of our a tags, when we hover over them, change to the color of red. We'll see that now with this, when we hover, they do change to red. Let's inspect this, and force a hover state, using the dev tools. With this forced hover state, we see our defined styles that we did in our style.css.

[00:19] A CSS pseudo-class is a keyword added to a selector that specifies a specific state of the selected element. As the name suggests, and as we saw, when this selector enters a hover state, all of the styles within this block will apply to the selector. If we wanted to target the first li inside of our ul, we could do li first child a, color blue.

[00:43] This is going to style the first li inside of our ul that we've got here, and change the a tag to the color blue. Our dev tools show this as well. Now, inside of our HTML, let's go ahead and add an input tag type of text here.

[00:58] Now we see, when we refresh, when we click into our input box, it's got this blue outline border. Let's go ahead and style that to be green. On focus, we're going to do outline color of green. When we refresh, we'll see that now our outline is green.

[01:13] The focus pseudo-class represents an element, such as a form input, that has received focus, but you usually see this when a user clicks or taps on an element or selects it with the keyboard's tab key. A few other pseudo-classes are nth-child, which allows us to target specific children, such as the 6 or the 7, by passing a number here.

[01:34] Finally, there is also the visited pseudo-class, which represents links that the user has already visited. These pseudo-classes barely scratch the surface. Mozilla shows us many more options of classes that can be used to style elements. I suggest taking some time to look over these.

Course

CSS Fundamentals

Customize CSS Selectors with Pseudo Classes

Share this video with your friends