Check out a free preview of the full Complete Intro to Web Development, v2 course:
The "CSS Specificity Guide" Lesson is part of the full, Complete Intro to Web Development, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Brian reviews a guide to better understand CSS specificity.

Get Free Access Now

Transcript from the "CSS Specificity Guide" Lesson

>> Brian Holt: So, something I wanted to show you before we move on. Two things I wanted to mention. Both of these have to do with Estelle Weyl, who is- she's fantastic. She's one, when it comes to CSS, she's like, gee, she is like top of the game. She's really, really smart.

[00:00:21] Really great person. First of all, she has a Friend and Masters course that's A plus, like in depth CSS stuff. Far, far more talented and far better than I am with these kind of things, with things like she knows how to do and things like that. So if you wanna go deeper in CSS that is definitely the path.

[00:00:41] And then she also made this thing called CSS SpeciFISHity, which is quite cute, I think. I did ask her if I could use this. So, she gracefully allowed me to. And this kind of just like uses fish to demonstrate how specificity works. So the littlest one is the universal selector, which is the wild card one that I was talking about.

[00:01:05] And then you have plankton which represents tags, right? And then if you have two fish, then you have, or like two planktons, then you have two tag specificity. And then, you can have a bunch of them, but it's still just a bunch of tiny plankton. As soon as you specify one fish, right, one fish beats all of the plankton in the ocean.

[00:01:26] I don't know if that's necessarily true, but I'm saying it. [LAUGH] This is now a course in marine biology. [LAUGH] That does more than a bunch of plankton, right? And so you can eventually get down here, and you have a bunch of fish, and you eventually get a shark, right?

[00:01:43] And that's one ID, and then if you do inline styles, we haven't talk about inline styles, that's on purpose a little bit. But you can actually do styles directly on your tags, like as a attribute on your html, and that actually outweighs IDs. And then you have the bomb, which is important, which even outweighs that, right?

[00:02:09] So just a nice little thing, I think she actually sells posters of this, which I think kinda cute. There's also a version of this that does Star Wars. And they have storm troopers, and Darth Vaders, and stuff like that, which is kinda fun, too. So, I just wanted to show you that.

[00:02:26] It's kinda a nice concrete visual to understand where some of that stuff is coming out of.