Up next in 10
Do You Really Understand CSS Inheritance_
508 views
Feb 7, 2024
"Do You Really Understand CSS Inheritance?" is an insightful video that explores the concept of CSS inheritance and its implications in web development. The video delves into the nuances of how CSS properties are inherited by child elements from their parent elements, examining common misconceptions and pitfalls. Viewers are provided with clear explanations and practical examples to deepen their understanding of how inheritance works in CSS, including specificity, the cascade, and the 'inherit' keyword. Through analysis and demonstrations, the video highlights the importance of understanding CSS inheritance for effective styling and maintaining consistent design patterns across web projects. Whether you're a beginner or an experienced developer, this video offers valuable insights into mastering CSS inheritance for better control and management of stylesheets.
View Video Transcript
0:00
How many times have you done this
0:01
You have a button and you want to make it red, so you just take the background color, set it to red, and save, and you realize it looks completely incorrect
0:08
And that's because the border is wrong, the font is wrong, the font size is wrong
0:11
So you have to come in here and say, you know what, we don't want any border. I want the font size to be one REM, and I want to make sure that the font family here is going to be Roboto
0:20
And you save and you finally get the button you want. But this is by far not the best way to do that
0:25
In this video, I'm going to talk about a bunch of different properties related to CSS inheritance
0:29
which are going to allow you to circumvent a lot of these problems and really understand why this doesn't work like you want it to
0:38
Welcome back to WebDev Simplified. My name's Kyle, and my job is to simplify the web for you so you can start building your dream project sooner
0:46
So if that sounds exciting, make sure you subscribe to the channel for more videos just like this
0:50
Now in this video, I'm going to be talking about initial, inherit, unset, and revert
0:54
which are all ways of dealing with inheritance inside of CSS, and it's really crucial that you understand how each of these properties
0:59
work, so I'll leave time strands in the description so you can skip around if you want. But first we're going to be talking about initial, and that's because it reveals something
1:06
really important about the browser that most people really don't understand. Let's just say we have a div right here, background color green, and you can see it showing up
1:13
on the right hand side of our screen. Well, we know that a div has a display of block by default
1:19
So if I type in display block, you'll notice nothing actually changes. And you would think since the default property of a div is display block, that if I used
1:26
display of initial, that it would also be display block. since you would think the initial would just use the default value
1:32
But when I save, you'll notice something interesting. The display actually changes to inline
1:36
If I just inspect this real quick, and we go over to the computed tab here
1:41
and I just search for display, you can see my display is in line
1:44
And that's because the default value for display is actually in line
1:48
and when you use initial, it uses the default value. And already you're probably confused because by default in the browser
1:54
these things show up as block elements, but based on CSS specifications
1:58
the default initial value for display is initial. And we can actually see that if you go to MDN
2:04
there's a section on almost every single property called the formal definition, and in this section you can see the initial value
2:09
As you can see, for display, the initial value is going to be in line. So you're probably wondering
2:14
how in the world does a div show up as a block level element when you don't specify the display
2:19
Because if I leave the display off, it shows up as a block level element. And that's because on top of the initial value
2:24
there are also browser-specific style sheets that give certain styles to your element
2:28
So, for example, our button, if we just remove all these styles, you can see the button has a default set of styles
2:34
If I just inspect that real quick and I go over to the styles tab you can see there a section called user agent style sheet And this section includes all of the different styles that are specifically put on the actual button and these are styles from the browser And this is why a button is going to look different for example in Chrome Firefox
2:50
and Safari, because they all have their own user agent style sheet, which defines how the button
2:55
is going to look. Now, if we do the same thing, but we look at the div here, so I'm just going to inspect this
2:58
div, you can see the user agent style sheet has a display of block. So the reason a div shows up as a block level element is not because CSS sets it up that way
3:06
but because the browser actually gives it a default style of block. So essentially, when you're deciding to use initial as the value for a property
3:14
what you're doing is you're just going to the initial value defined in the CSS definition
3:18
So the actual formal definition of CSS has an initial value for every property
3:22
and that's what you're going to be using when you set something to initial. This is why generally I don't use initial that much
3:27
just because you mostly don't want to revert all the way back to the default style
3:31
specified by the CSS definition. But in order to make sure we fully understand how this works
3:35
There's essentially three different tiers of CSS. There are the base initial styles defined in the formal definition
3:42
There are browser-specific styles. And then finally, there's the custom styles that you write in your own CSS style sheets or inline styles or whatever it is
3:49
So these initial values defined by CSS, this is like your base level
3:53
Everything else overrides them. So if I put a display of block on an element, it's going to overwrite this formal definition
4:00
Also, all of the style sheets defined by the browser, so everything in that user agent style sheet
4:04
that is also going to override those initial values. The initial values are only there if nothing at all is specified
4:10
for any of the properties anywhere, then it will use the initial value. And then finally, lastly, we have our own custom styles
4:16
and those are going to go overwrite every single thing, including the user agent style sheet and these initial values here
4:21
So it's kind of a little bit of hierarchy where these formal definitions are at the bottom, browser style sheets are next
4:26
and then our actual custom styles are the top level which are going to override everything else
4:30
And the next property value that I want to talk about is going to be inherit, which is something that you're actually going to use all the time, it's incredibly useful
4:37
If we go back to display here, you can see that we have the initial value section, and there's also this inherited section
4:42
And if a property is inherited, essentially what it means is it'll take the value from the parent
4:47
So common things that you're used to inheriting are like color, font size, font family, and so on
4:52
So if we look at the table for font size here, you can see the initial value is set to medium
4:56
and this inherited property is set to yes, which means that font size by default is going to inherit from a parent
5:02
If we just come down here, we have this is a div. Let's just come in, and we're going to put a P tag inside of here
5:07
This is a P, and then this is a div, just like that
5:12
And on our div, we're just going to come in, and we're going to say font size is going to be 2REM
5:18
I'm going to go over the page over here. I going to save this and you going to notice that this is a div and this is a P both have that 2REM font size Even though I never actually specified a font size for our P tag it is an inherited property so it going to inherit itself from the div which
5:32
has a font size set to 2REM. Now some properties, on the other hand, don't actually inherit by default though
5:38
So border is a great example. If we say we want a border, 1 pixel, solid black, you'll notice the border only goes around
5:45
the div, but there's no border around the P tag as well because it's not inheriting that property
5:50
But if we tell that our border should inherit, then if we save real quick, you'll see we also
5:55
have a border showing up around our P tag that is the exact same border as around our div, that
5:59
one pixel solid black border. So by specifying inherit, you can say you want to inherit anything, even things that don't
6:05
naturally inherit. You can make them inherit by using this inherit property value right here
6:10
And this is something I almost always do when defining the font family on a button
6:14
If we go and just uncomment this example up here, real quick, a font family by default is actually
6:18
going to be set specifically on a button. So if we inspect this real quick, and we just go to
6:22
computed, and we search for font family, you're going to see the font family is set to Ariel
6:27
And that comes from our user agent style sheet. If I scroll down here quite a ways, you can see
6:31
we have a font, and the font is being set to Ariel. This is something that really annoys me
6:35
that buttons have their own font family, because normally font family inherits, but on a button
6:40
it's set to a specific value. What I almost always do is I'll change my font family to inherit
6:45
like this, and then I'll save, and now it'll actually inherit that Times New Roman font that the rest of our page is using
6:50
or if you have a custom font, it'll inherit that custom font as well. Now the other important thing to understand about inheritance is it always inherits from the parent
6:58
A lot of people get confused and think it inherits based on selector specificity
7:02
So if I have a P tag called Important here, for example, this is going to have a font size
7:09
which is just going to be inherit here. And then if down here I just change my P, and I make this a font size of
7:15
1.25 REM, most people would think, okay, inherit is going to inherit the next thing in line
7:21
That is not actually the case. Let's just make sure I add the class here of important
7:26
And now when I save, you notice it's still using 2REM as the font size for our P tag
7:30
That's because Inherit always goes to the parent container. So RP, the parent is our div, and our div has a font size of 2REM
7:38
If, for example, our div didn't have a font size at all, then it's going to go up to the body
7:42
and the body in our case just has a font size of one REM. But if we wanted, we could change our body to be a font size of 2RAM
7:50
And now when we save, you can see we get that 2REM showing up for our P tag as well
7:54
because it's just going up the chain through the parents until it finds a parent that has a specific value set
7:59
Now the next property I want to talk about is the unset property, and it's actually pretty easy to understand
8:03
because it just a combination of initial and inherit So what we can do is we can set a property to unset and if we just get rid of all the rest of this stuff that we don need we just going to focus on the button for this example And we save you notice nothing actually changes
8:17
And that's because unset is either going to set itself to initial or inherit based on the actual property
8:23
So if the property, by default, inherits, then it's going to set the value to inherit
8:28
And if the property such as display does not inherit, then it's going to set it to initial
8:32
So generally, unset is not that useful because you could just, come in here and say inherit, and that's going to do the exact same thing. But
8:40
unset is really useful when you want to set a bunch of properties all at once to either initial
8:44
or inherit. And that is where the all property comes in. The all property allows you to set
8:48
all of the properties of an element to one value. So if you set all the properties to
8:53
unset, then it's going to automatically set everything that needs to be initial to initial and
8:58
everything that needs to be inherit to inherit. So now what we can do is we can just get rid of all
9:03
of our code here and save. And we now have our button exactly like we want. As you can see, we have that red button that has all the font size and everything correct
9:10
like we want because it's inheriting the font size automatically based on this unset, and it got rid of all the other styles such as the padding and the border that we don't want
9:17
because those are now set to initial. By combining together this all property along with unset
9:21
you can really do some powerful things to remove a lot of the default styles that you don't actually want
9:26
which in my opinion is a great thing to do. And if you kind of want to learn more about all and some other cool CSS tricks
9:31
I have a video on that. I'm going to link in the cards and description for you, so I highly recommend you check that out
9:35
Now the final value that I want to talk about is actually very similar to initial, and this value is called revert
9:41
And revert works just like initial, but instead of setting yourself to the initial value defined in the formal definition
9:47
what happens is it reverts it back to the default style within the browser. So if I just come in here and I say my background color is going to be revert
9:55
what happens is my background color is actually set to the background color inside the CSS user agent style sheet
10:00
So the style sheet in Chrome that defines what a button looks like. I change my border to revert
10:06
Now you can see that I have that default border from the actual CSS style sheet
10:09
Or I could change my padding to revert. What this is going to do is just going to use the default padding for a button element
10:16
that's defined in the CSS style sheet for Chrome. So revert is not something I use all that often because I generally prefer to just use
10:23
unset and reset all the browser defaults and manually make my own padding and border and color
10:27
and so on. But if you want to just revert something back to how it normally would look in the browser
10:32
revert is going to be the only way that you can do that reliably. Now I really hope this video was able to make you realize just how much you can do when you
10:39
truly understand CSS, which is why I highly recommend you check out my full CSS course
10:44
I'll link down in the description below because it's going to cover CSS in-depth like no other
10:48
video that you can find, which is really going to give you the power to create whatever you want
10:52
With that said, thank you very much for watching and have a good day