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 is an acronym for cascading style sheets. It can be frustrating when working with CSS and elements are not styling correctly because there is a conflicting style lower on the cascade. Let's look at how the browser uses the cascade to determine which styles to implement. 

Instructor: [00:00] Let's go ahead and style all of our li's to be the color red that we see here. We'll do that by doing li color red. Save and refresh. Everything's red. Great. Let's copy this and do the same thing, li, but give it a color of blue and save. We'll see that everything turns to blue even though we still have the color red above it.

[00:22] CSS is an acronym for Cascading Style Sheets, which points to the fact that source order, or how we define our styles, actually affects what gets displayed in the browser. When styles conflict like this, the browser will look at specificity, then to the source order that we define our styles.

[00:40] Since these two li's are the same specificity, the lower li color value is applied, as we see. This is true for any type of selector. Let's give one li a class of home. Now we'll change this top li to a color of red, which will change the one to red.

[00:57] Then, if we add this second one of color blue, we'll see that blue still wins. It doesn't matter what selector you use. The bottom of the cascade will always win.

[01:07] Let's go ahead and add another class to our li. We'll say home--two. We'll change this second class to --two. Save and refresh. You can see that it still stays blue. It doesn't matter how many classes we have on this li. When two selectors collide, it's going to take whatever class is lower.

[01:27] Even we switch up the order -- we do home--two and then home -- we see that blue still wins because home--two lives lower on the cascade. It doesn't matter the order of the classes here. What matters is the source order.

Course

CSS Fundamentals

Style Elements Using the Cascade

Share this video with your friends