Tip:
Highlight text to annotate it
X
What's Going on Everybody! Welcome to todays tutorial on HTML5 and CSS3, my name is Jack
Jenkins and this is Academy of One. Today we are going to talk about Specificity and
Inheritance. We're going to talk about two things this lecture. First off, we're going
to talk about Inheritance. Then we're going to talk about Specificity. It's going to be
a short one this week. Inheritance states that all children will inherit the parents
styles. What does that look like? Well, lets say we have a div and a list item. If we reference
the div in css and change the font color inta [inta? You making up words?] pink. That way,
the list item will be pink also. Go ahead and try it out. So, lets say we have a div
and we have a paragraph with a class. In our CSS we reference both the div and the paragraph
with the class [no space]. What style would be outputted? Who will win? Well, there's
a simple way to figure that out, and that's called Specificity. How specificity works
is that you're givin four different tiers. And each tier has a number value givin to
it. You add up the highest numbers. And then the highest number will be the style that
will be outputted. The one with the highest specificity are incline elements. They are
worth a thousand points. IDs are worth a hundred points. Class and pseudo-classes are worth
ten points. And elements and pseudo-elements are worth one point. Let's take a quick look
at an example. This one has one class, one element, and one pseudo-element for a total
of twelve. So... what's the specificity value of this one? It is of course 220. There are
two IDs and two classes. What about this one? This one is a hundred and twelve. There is
one class, one ID, and two elements. Now between these two, which one will win? It is of course,
the one on the right. Good job. So who will win in this situation. CSS with the important
or incline HTML? And the important will win. Important will win everything. So keep that
in mind when you're losing the battle of specificity [THIS IS CSS!!]. That's it for today's tutorial
tune in next week when we talk about margin vs. padding. See you then.