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 

The cascade is frequently conflated with the concept of inheritance. These two topics are related, however you should try to understand each individually. Let's apply color styles to a UL and see how it affects our child LIs. As well as use the inherit and initial property values. 

Instructor: [00:00] Here, we have the basic HTML to make a navigation. Inside of our style.css, if we did ul color as blue and refresh, we see that we get this color style applied to all of our li's inside the ul. This is called inheritance, meaning that some styles are carried to the child elements within the HTML tree.

[00:20] Most of the accepted inherited properties involve text, such as color, font, font family, font size, and so on, while properties that do not are those like padding, margin, height, and width.

[00:33] We can also control inheritance. For example, if we did li with a color of red. Then, inside of home, we gave this home li a class of home. Back inside of our style, if we targeted this home class of color inherit and refresh the page, we see that all the li's are now red except for the home item.

[00:54] The li's are red because we're targeting them here. However, we tell the home li to apply the inherited color, which in our case is the color being passed to it from its parent ul element. We can also use the initial property value, which, when we refresh the page, changes the text back to black.

[01:14] Initial sets the property value to be the same as the value set for that element in the browser's default style sheet. For our text, this is black. Initial is not supported in IE, but is in all of the other browsers.

Course

CSS Fundamentals

Apply CSS Styles with Inheritance

Share this video with your friends