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 custom properties and inheritance - CSS Tutorial

From the course: CSS: Variables and Fluid Layouts

Start my 1-month free trial

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…

Contents