Learn CSS Specificity In 11 Minutes

🚨 IMPORTANT:

CSS specificity is the best and worst part of CSS. It allows you to do some incredible things with CSS especially with variables and responsive design, but when you are first starting out with CSS it is a nightmare trying to figure out how to properly overwrite styles. In this video I will be breaking down absolutely everything you need to know about CSS specificity in only 11 minutes so you can spend your time writing CSS instead of watching YouTube videos. We cover exactly what effects CSS specificity and how to calculate the specificity of a selector through the use of multiple examples so you can quickly comprehend all the complexities of CSS specificity.

🧠 Concepts Covered:

- How to calculate CSS specificity
- What selectors effect CSS specificity
- How !important works with CSS specificity
- CSS specificity best practices

🌎 Find Me Here:

#CSS #WDS #CSSSpecificity

[franksolinsky]

Hi Kyle,

I don't write a lot of YouTube comments, and I'm sure you'll never see this one. When I find myself consistently returning and learning from one particular YouTuber, I always want to make a point of thanking them personally for their content and hard work. So, thank you! You are very easy to listen to, follow along with and learn from. Cheers

[youpeekayey]

Found you like a week ago and I'm impressed by the explenation clarity. Great content, sharing is caring!

[ProgrammingwithPeter]

You're the best, you have tutor skills, great explaining!

[beto.aveiga]

Wow... I've been 15 years doing web development and thought I had these basics down. But I just learned that classes are more specific than tags. Also, the operators "plus" and "greater than", although they imply a more specific context, are not considered in specificity calculation. Many thanks!

[Wheatleybitch]

You are so good at explaining things. The voice, the visuals, the pace at which you present material - I was watching another person's video on this exact topic and still did not understand the concept after the video ended. Thank you for being an awesome educator, keep it up man!

[darthsidious]

I really appreciate your content and just begging you for continue. Also, I was wandering if you would cover these specific topics:

1) CSS box-sizing;
2) creating fully functional custom videoplayer using HTML, CSS, JavaScript;
3) working with HTML5 canvas (maybe make a paint-like app);
4) working with context in JavaScript (call, apply, bind), where and when can we use that.

It's just my suggestion, thank you a lot for what you're doing anyway.

[JasimGamer]

smart tip you can query things with custom attributes
<div box></div>
in css
div[box]{
width:16px;
height:16px;
background: #000;
}
or in querySelector("div[box]")
this thing make the coding faster and easier

[lgckyqc]

Kyle, you saved me so often. I really like how you teach. It is short but on the point. So grateful about this content and just want to let you know. All the best for you!

[-Elias-]

This video is *important* ...
...especially for those who've learned to loathe !important

(9:20) is particularly *important*

[aashayamballi]

Thank you Kyle for making me understand this concept :)

[yvng]

I couldnt understand anything in the Odin Project but you made it so much easier, thanks!

[iHidden]

This was amazing! Clearly explained, good examples, i simply loved it. Thank you for all these tutorials. Really hope you'll make more videos with concise informations that are used in day-to-day programming. Thanks once again!

[dorocodes]

Fantastic video, I learned so much!
Would you mind enabling captions please?

[rshraddha]

And here I was using important on my styles without knowing what was going on. Seriously your tutorials are the best.

[theambient]

Best explanation of specificity I’ve seen. Thanks!

[drviagrin]

I needed this so bad. It clears up so much as to why my CSS has not been working on some elements. Again, Thank you!

[KTM_Trooper]

w3 schools was confusing to me for some reason and this vid made me understand it much easier

[robertjohnson]

Thank you sir for this good explanation!!

[adedoyin-emmanuel-adeniyi]

God bless you man. I totally understand now 🎉🎉

[miikoa]

OMG!! I finally understand!!! Thank you!!!