Cascading, specificity and inheritance – Basic CSS3 Fast

Cascading, specificity and inheritance – Basic CSS3 Fast


Hello everyone, welcome to the css3
course. In this video, I’m going to talk about three important concepts of CSS,
which are cascading, specificity, and inheritance. Before I discuss these three
important properties, I would like to show the webpage, together with the HTML
file that corresponds to this webpage. So in this HTML file, I would have a
paragraph followed by a blockquote. And after the blockquote, I would have
an unordered list. And you can see that I have already mentioned the classes and
IDs that would help me introduce these three concepts later. So I’d like to
demonstrate the CSS code that can demonstrate these three important
properties Okay, you can see that my web page has turned to blue font color,
because I have already applied a universal selector by this asterisk
selector. So you can see that the words have turned to blue already. And
I would like to show some important properties after the change of
the font color. Okay, so let me go to the first part which is called cascading.
Cascading is quite easy to understand When you have some elements whose styles
are in conflict, the styles that are placed at a later part of your CSS file
will prevail. So I will show you this example by means of the paragraph here Suppose I already turn the paragraph
font to monospace. If I have a similar declaration after the monospace
declaration, the later one will win the battle Okay, you can see that I have
turned the font-family to San serif because I put the San Serif font after
the declaration corresponding to the monospace font family. So we have to
remember that this is known as cascading When we have conflicting styles,
the one at the later part will override the settings on the previous part. And
then after cascading, I would like to talk about specificity. Specificity is simply
the competition among multiple declarations for a single element. In
this case, we would give more weight to a certain declaration according to the
following order. When we have multiple declarations for a single element, a
class is more specific than an element Also an ID is even more specific than a
class. And even more, an inline style is even more specific than an ID. So I would
like to demonstrate these three properties now. I would like to
demonstrate it by means of the block quote here. We can see that I have already
given a class name to the blockquote together, with an ID name for the blockquote So now let me style the block code by
specifying the element directly Okay, I can simply change the background
color of the block quote by means of the element selector. And I’d like to
demonstrate that the class declaration is even more powerful than
the element alone. So I can show you this property by the following code Okay, you
can see that the block quote has turned its background color to light blue
instead of the original color. So what does it mean by that? When I simply
specify the element by means of the class identifier, the class identifier is
even able to override the styles that by using the element selector alone. So we
can verify this property: A class is more specific than an element. So the class
declaration corresponding to a particular element wins the battle
against the declaration by means of the element alone. Okay? And the second thing
to talk about is the battle between a class and an ID, okay Okay, you can see that the background
color has changed to orange, because I used the ID to specify the element. So we
can see that an ID would win the battle against the class when we talk about
specificity, okay. So an ID is more … even more specific than a class. So if we have
a class identifier to a specified element, it would win the war against the
class declaration, okay. And one more important thing is that, we have to
notice that an inline style is even more specific than an ID. So if I just
declare an inline style inside the opening tag of the blockquote element,
we will see the change in the background color very quickly Okay, when I simply
add the inline style, you can see that the color of the background for my block
quote has changed to the color specified inside the inline code, which is lime, okay.
So this is the important property: An inline style is even more important than
or even more specific than an ID. So we have to remember the order like this.
The element selector alone is the weakest. And the class identifier is
stronger, the ID identifier is even stronger. But the strongest one is the inline
style mentioned inside the opening tag, okay. After talking about specificity, we
would like to talk about inheritance. So let me go to the unordered list.
What does it mean by inheritance? We can see an example already on the webpage.
When I want to set up the unordered list, we will see that the font color of
the unordered list has already inherited from the body styles. So you can see that
for my body, every single character has turned to blue font color due to the
universal selector shown above, okay And this is known as inheritance. Even though
the unordered list elements are inside the unordered list tag, the list elements
would inherit the color coming from its parent element, okay. So if we really want
to change the color explicitly, we need to do so by using the code like this way Okay, you can see that I really do the
changing of the color explicitly by using the CSS declaration as follows. I
specify the element which is “li”. And then I turn the characters inside the
unordered list into red. So in this case, my setup is able to override the
inherited colors from the body styles. Okay? If you really want to change the
pattern coming from the inheritance effect, you can do so by overriding the
inheritance using the styles of your parent element. What does it mean by the
overriding action? Now the list elements have turned to red color. If you want the
list elements to inherit the color coming from the body styles, which is
blue, we can do so right here so that the parent element properties
and styles can be brought to the descendants. Okay? Okay, by using the
“inherit” keyword, you can just inherit the color coming from the parent element. So
you can see that the first list item has changed its font color to the color that
comes from its parent element, which is the unordered list. And actually the
unordered list is simply controlled by the universal selector, which is here. So
when I do the “inherit” action, I just turn the font color from red to blue.
Okay? In addition to the “inherit” keyword, I want to introduce one more keyword to
you. Actually we can override inheritance by retaining the initial styles of your
parent element. Remember that our font color has turned to blue at the very
beginning by means of the universal selector. If you don’t apply the
universal selector here, we can expect that every single character has black
color. So if you just want to retain the initial color of the font, you can do so
by means of the “initial” keyword. So let me demonstrate it to you now Okay, you can see that the element
corresponding to id2 would be turned to black, which is the initial color of
your parent element which is your unordered list.
So the “initial” keyword is even able to override the universal selector
shown at the very beginning of the CSS file. So you can see that by means of the
“inherit” keyword and the “initial” keyword, you are able to override inheritance
quite easily. And remember, the “initial” keyword is even able to override the
universal selector settings. So after this video, I hope you are able to understand
the basics of cascading, specificity, and inheritance. So you are able to notice
the change in the styles when you apply these styles properly. And for
specificity, you need to remember these few lines to understand the weight to
different declarations of your elements And for the inheritance, you can override
inheritance by means of the “inherit” keyword and the “initial” keyword properly.
This is the end of the video. If you have any questions about my video, please
leave your questions on the comment section below the video. If you like this
video, please give me a like and please subscribe to my channel. Thank you for
watching

Leave a Reply

Your email address will not be published. Required fields are marked *