Up next in 10
CSS Tutorial For Beginners 11 - Inheritance
597 views
Feb 7, 2024
In this CSS tutorial tailored for beginners, viewers explore the concept of inheritance, a fundamental principle in CSS styling. The video likely covers how styles are inherited from parent elements to their child elements, simplifying the process of styling multiple elements with similar attributes. Viewers can expect to learn how to leverage inheritance to create more efficient and maintainable CSS code by setting styles at higher levels in the document hierarchy. Additionally, the tutorial may provide examples demonstrating how inheritance works across different CSS properties. This tutorial serves as a valuable resource for beginners seeking to understand how inheritance enhances the consistency and scalability of their CSS stylesheets.
View Video Transcript
0:00
Hi everyone what the hell is going on this is CSF for beginners lesson 11
0:11
I'm the Net Ninja and today we're going to talk about inheritance
0:15
Okay so what the heck is inheritance well to explain that I've done this funky little tree here
0:21
and it's all colour coordinated for you guys so hope you enjoy this as much as I did
0:25
Alright so off we got we've got a sample simple HTML structure here okay we open with the body tag and we close with the body tag that
0:33
we'd say was the top level element the parent element okay everything in pink
0:38
here is within the body tag it's one level deep you've got this div tag here
0:42
and the closing tag and then the H1 tag we'd say this was a child element of the
0:47
body tag okay it's one level deep and then finally we've got this p tag here
0:51
with texting it which is yellow we'd say that's the child of this div tag here and
0:56
we could say it's the grandchild of the body tag because it's two levels
0:59
deep within the body tag, but only one level deep within the PTAG
1:03
Now, how is this important with CSS? Well, the way it works is this
1:09
If we apply styles to the body tag here, then everything within this body tag will
1:15
inherit those styles. So if we say, okay, we want a font color of green for the body, and we apply that just
1:22
to the body, then everything within it would automatically inherit that style and have a green
1:28
color, a green text color. If we say, okay, we want to give all the div tags a color of blue
1:34
then everything within the div tags would automatically be colored blue. We don't have to
1:38
style the P directly because it's inheriting from the div style. All right, so to put this into
1:44
practice, we're going to go back into the code and go through a few examples
1:50
All right, troopers, I'm back here in the HTML file we've been working on. I've stripped out all
1:55
the CSS we've done so far, and we're going to go through a few examples. of this whole inheritance malarkey, all right
2:00
So we're going to start off with what we went through in the slide, and that was the body
2:05
So we going to write our simple body selector and give it a property of color and we say red We want all the text within body to be read that means okay so we save this and we view
2:17
this in a browser showing Explorer and open up in Google Chrome and there it
2:24
is simple as everything's red and that's because everything within the body all
2:28
the tags that are within the body are inheriting that style okay so where we
2:33
put here color red it's saying okay well apply this rule to every div tag within the body okay everything within that body tag now what
2:44
if we want all the divs these two to be colored blue everything within that we want
2:49
blue well we can override this this body tag and this is a form of a conflict by the
2:55
way carries on from conflicts and we could say color blue right well the CSS is
3:01
going to say well hey okay I find the body and I'm gonna color everything inside the body red and every tag is going to inherit that but then this div tag's going well not me not me
3:11
i want to be blue okay so we're overriding that default inherited style so everything now within the
3:17
div tags should be blue so let's have a view of that in the browser again oops let's save this first
3:23
open this in chrome and there we go we've got the div tag at the top with the headers in and the div tag
3:32
with the paragraphs in which are blue so they're overriding those inherited styles all right so now what if we wanted the P tags to be green you
3:41
know they're like well I'm gonna I don't want to be blue I want to be green even though they're inheriting this div style here of blue the P tags we can override
3:51
it further by saying okay well all P's I want to color green okay so again oops
3:59
the CSS is coming down here from top to bottom is saying well okay the body and
4:05
I'm going to colour all the text within that red and then the divs tags are going, no, no, not us
4:09
We want to be blue. So we're colouring all the text within div tags blue. And then finally at the bottom we've got these P tags going, no, no, no, we want to be green
4:17
So then the P tags are being coloured green So these inherited styles as we go down through the chain of children are being overridden by the styles themselves on the elements Okay does that make sense So
4:31
we'll view this in a browser once more. And now we can see, okay, we've got the initial
4:41
red text here because we've given that body tag a style of colour red. So everything within the
4:48
body tag is inheriting that and it's coloring everything red okay then it's coming
4:52
to the div tags and they're saying oh we want to be colored blue so it's coloring both the div tags blue which is this and this this bit here sorry and
5:00
then finally the P tags are shouting about going no no no we want to be green so
5:07
finally the P tags are being overridden again that inherited blue style to
5:12
color them green all right so I am gonna throw a spanner in the word
5:18
because this inheritance thing doesn't always work. And to demonstrate that, I'm going to go to the bottom of the HTML file here
5:25
and add a link tag in. Don't forget that's A. And we'll just give it an herif of any old thing here
5:30
just to put a pound sign in. And then I'm a spanner
5:36
Oops, spanner. Right, so let's view this in a browser. Now, before we do that, what would you expect the colour of this text to be
5:46
Well, let's have a look. we've said that we want everything in the body tag to be red and it's in the body tag
5:51
It's not within a div tag, so it's not going to be blue and it's not a P tag, it's an A tag
5:56
So you'd expect it to inherit the body tag style, which is red here, wouldn't you
6:00
All right, well, let's have a look. View this in Chrome again
6:07
Open with Chrome. And there it is. Wait, it's blue. Now, why is that happening
6:13
Well, this is where the default browser styles are kicking in. Remember that video that I did on default browser styles
6:21
If you've not seen that, I'm going to pop a link to the description below so you can go out and check that and then come back here
6:26
But essentially what happening is these default browser styles one of the default styles implemented by the browser is on A on all A sorry And what it does is it colours all A by default blue and underlines them
6:43
Okay? So even though we've not specified here, we want this A-tag to override this colour of red
6:51
The browser has done that. Essentially, what the browser has done has said, A-color blue, and..
7:00
text decoration underline okay that's what the browser's done behind the scenes that's a default
7:08
browser style and it's overriding this inherited style of red okay so you need to be careful it doesn't always work these inheritance
7:16
things you need to know what the default browser styles are so you can keep track of what's being inherited and what's not
7:22
alright so just to demonstrate that we can change this we can override these
7:28
default styles we can color it yellow if we want to. We'll save this and open this up back in the browser. And there it is, yellow now
7:39
barely legible at all. So, I mean, that's the basics of how inheritance works. You need to be
7:47
really careful, really, really careful, because it can get very messy, very quickly. You know
7:52
we've done like, what, four different rules here, and it's already starting to get a little
7:57
bit complicated. When you've got rules going up into the hundreds or possibly even thousands
8:03
or big websites, you're going to have to keep track of them. That's where it's always good to
8:07
organise your CSS effectively using comments like I showed you earlier. So that's about it for this
8:13
video. As always, if you have any questions, feel free to comment below. I'll answer all of those
8:18
questions. Otherwise, if you like these videos, please, please, please subscribe, share and like them
8:23
and I'll see you guys in the next video where we're going to look at specificity in CSS conflicts
8:30
I'll see you guys then
#Skins
# Themes & Wallpapers