How We Apply CSS & Specificity

[00:00:00]
>> There are three main ways that we would apply CSS.The primary one that you're probably used to is creating an external CSS stylesheet with a link that you would link in the head of your HTML element. The second way that you can apply CSS, typically, is creating style tags in the head of your document and just actually writing the CSS in your HTML file.

[00:00:22]
And then lastly, we've got inline on HTML elements using the style attribute, which typically is not a great way to do it. Let's talk about some of the problems with CSS. First, we need to kind of examine specificity. You might not have even heard this term before. But this is the mathematical equation of how our styles are applied to our HTML elements.

[00:00:44]
So there are three different big buckets of CSS specificity. So the first are type selectors and pseudo elements. So you can see we've got an h1 tag and the pseudo element here, so the before element. The second is class selectors, attribute selectors, and pseudo classes. So we've got a class of cat, we have an input type of radio, so that's our attribute selectors.

[00:01:05]
And we've got the pseudo class of hover and then last bucket is ID selectors. So essentially, going back to this real quick, the way that our styles are applied are by examining how specific a style is and that accrues a point value. So the most specific style wins.

[00:01:25]
So an ID selector is much more specific than just selecting all h1 tags. And so whatever has the ID selector, whatever styles are in that, are gonna be applied.