From the course: CSS: Variables and Fluid Layouts
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
CSS custom properties and inheritance - CSS Tutorial
From the course: CSS: Variables and Fluid Layouts
CSS custom properties and inheritance
- Lets take a closer look at how inheritance works with custom properties. It's just like other aspects of CSS inheritance. However, for whatever reason I find that people are surprised by the way custom properties behave in terms of inheritance. So let's look at an example in a little bit more detail and in isolation. So its starting here we have some HTML. We have an H1. We have a paragraph and then we have an article. Inside of that article we have an H2 and another paragraph. And those two paragraphs are what we are going to focus on a lot of the time here. Down in my CSS, as you'll see, I have my root declaration and I've set up a variable called the color and the color is set to red. And then I have just some empty declarations right now for the article and the paragraph. So the first thing that I want to do is I want to declare that my article will have a color of red. In other words, the text color is…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
(Locked)
CSS custom properties overview3m 44s
-
(Locked)
Configure CSS custom properties2m 26s
-
(Locked)
CSS custom properties and inheritance4m 27s
-
(Locked)
CSS custom properties and Sass variables3m 37s
-
(Locked)
Using Sass variables3m 25s
-
(Locked)
Challenge: Add custom properties to type scale2m 27s
-
(Locked)
Solution: Add custom properties to type scale2m 20s
-
(Locked)
-
-
-