Hello everyone. Thank you very much for watching my video. I'm Hiroshi Isabelle from Japan. Today, I'm going to talk about the CSS specificity. What is CSS specificity? I'm going to mention the detail about it and if you are a kind of new to a learning CSS and you might have felt very frustrated not being able to implement the CSS statement that you want to, but um sadly that keeps on happening all the time. But the key to avoid that situation is to understand specificity. So let's take a look at these Before diving into the main contents. I use um the live server extension of VS code which enables us the live unimplemented implementation of CSS to HTML five. So I highly recommend that you install this before and using learning CSS. So let's take a look at the main contents here. I commented the main contents of this video, so which CSS statement will be applied in order to tell the detail about that we have to put in mind these four things. The important declarations, Presidents and specificity and order according to this order. And CSS will be applied. So the important statement has the highest priority. So let's take a look at this uh one by one important state declarations which is not recommended as it says. But let's take a look at this later on and first take a look at the president's the way CSS is declared. There are three types of CSS which are in line CSS statement and embedded CSS statement. An external CSS statement which is the most popular. So what is in line CSS statement? Let's take a look at html file and there are a church one a element and the development which has the element inside of it. And the in line element is CSS statement which is written directly to an html element like this style background color round. And if you save this, the background of p elements turn into brown. So let's delete this statement for now and with you. Uh sorry, the embedded CSS statement is the CSS statement which is this embedded into the head tag of html file. So if you activate this statement, the background color turn into purple. But if you reactivate the in line CSS which is background of background color of brown, the color the background color go back to brown. So why does why this happens? Is that in line CSS statement has higher priority than embedded CSS statement. So let's comment these out and late this in line TSS statement and back to normal. So next one is external CSS statement. So external means like um the separate CSS file is linked to a html file using link tag. Mhm. Mhm. And if I activate this statement, the background color of the element paragraph element turned into green. Mhm. And if I reactivate this statement in the embedded CSS statement, background turning to purple. And if you reactivate the in line CSS statement schema file. The background color turned into a realm. So that means in line CSS statement has the higher highest priority. And embedded is the second and external is the third. So mhm. With the activated in line statement and embedded. C. Assessment. And let's focus on external CSS statement. So then here comes the specificity. This is the most important one. Understanding of which CSS statement will be applied. So an I. D. S. And classes elements which will be mentioned later. So let's activate this statement. What happens background color turned into orange even though there are background colors statement here. So why this happens is because of specificity let's hover over the CSS selector in the V. S. Code. Then three numbers appears right about that 011. This stands for the number of um I. D. S. And classes and elements. So that's what I mentioned here by these classes and elements and here If I hover over this selector it says 0-1. So what's the difference with when this 011 because it has one element selector which is P. And two. Class selectors which is class one and class two. So we can say that this selector is more specific than this selector. So more specific CSS statement. Background color orange is applied in this case. So let's take let's comment this statement out and move on to I. D. Selector. So if I activate this statement, the background color turned to yellow. So why this happens looking at the specificity of the selector. 1011 element no classes and one I. D. S. So um that the numbers on the left side it can be an add more specificity to the selectors And this has one i. d. so uh this is more specific than this statement. Mhm. So here we can say that one I. D. Is more specific than thousands of classes we have to understand this. So this is all about specificity but and here comes the order we have to understand it is um there is an easy way to remember this rule. So last man standing. So if the sorry let's comment this out. So if the two statement mm hmm is activated and those two has the same specificity. So this is 011 and this is 0112. But looking at the result of implementation, the background colour is purple which is from this because last man standing is applied all the CSS selectors. So because of this statement is stated later than this statement. So therefore the background called the purple that's implemented in the uh display in the ui So this is the order. Let's comment this out for now. And uh it's all for now. Sorry I have forgot to mention one more thing about specificity. So let's activate this statement. The ps selector and this statement background color white. So in this case background color white is implemented because Looking at this selector specificity. This is 001 because only p selector is applied. But looking at this selector, The specificity is 002 because this selector has divx and p inside of it. So we can say that this selector is more specific than this statement. Let's go into sound again. So um let's activate this again and activate this again. So obviously this CSS selector is more specific than this selector. Here we go back to important declarations of C. S statement. This is not recommended and should be considered as a last resort of CSS. Why is this? So let's add important declarations to Not specific selective. So if I save this so um then the background color turned into aqua color. So why this happens because the important declarations has the highest priority among in line No among all CSS statement About among these four. Which means that the important statement can defy the natural rules of cascading um rule of CSS So that's why this should be avoided. So let's say on uh the big the large team is maintaining the website using external CSS and using important statement can cause a lot of problems because that defies the unnatural rules of specificity and the developers and designers always use specificity rules to uh can take control of CSS So that's why this is this should be avoided. But one more thing which should be avoided is in line CSS statement because in line sees this statement has higher priority than external CSS statement. Yes, obviously. Which means that in line CSS statement can defy the rule of specificity as well and make it more difficult to an understand what is happening inside CSS file. Because external CSS is the most popular way to manipulate CSS that many developers use external CSS. And if there are um in line CSS statement in html file, yeah. As I said, it becomes really difficult to uh understand what's happened, what is happening inside CSS. So this is all about CSS specificity for now. I hope this helps to understand, help you understand the CSS rules and the I hope you enjoyed this and I try to post the useful accountants for you uh although I am still a beginner, so thank you for very much for watching this video, everyone and see you next time.