The 6 most important CSS concepts for beginners

When we first get started with CSS, we hear a lot of new terms and jargon, a lot of which is glossed over pretty quickly. In this video, I look at the most important things to know when getting started, but I also look at why they matter, and how to work with them or take advantage of them to write better CSS.

🔗 Links

⌚ Timestamps
00:00 - Introduction
01:37 - Inheritance
07:48 - The Cascade
12:09 - Dealing with the box model
15:04 - Specificity
18:46 - Naming stuff is hard
20:58 - Creating layouts
25:22 - Content vs Layout

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[Maxelya]

Not exactly related, but it's been months since I wanted to write this :
As a (now employed) self-taught developer I used to really struggle with CSS and I was pretty sure I would have to find a job as a back-end dev since I couldn't do anything without bootstrap. But then, I stumbled across a company looking for a "true" full-stack dev. That's when I decided that it was time to do something about my css weakness. I started watching tons of vids on the subject and quickly found your channel and got the job.

Less than a year later, I'm now working as a full-stack developer and a teacher, I now wish I could get rid of bootstrap (which my company still uses) and I'm obsessed with writing clean code (grid blew my mind and forever changed the way I write HTML).

I still have tons of things to learn, but the best thing your channel did to me was actually make me LIKE css. And when I like something, I can't get enough of it ^^.

[simboy]

as a self taught web dev everything ive learnt has been on-line and this is one of the best and clearest yet not dummed down videos out there which is a huge rarity ..if your like me and have spent hours watching videos where they are explaning stuff and they somehow manage to skip the bits that are subtle a not obvious and after ten vidoes your like - yeah, they may be good programmers but not very good teachers - and then compared to all that, this is great

[zachjensz]

Already know all of this but watched anyway because it's Kevin!

[iChrisBirch]

The tip about separating layout and design selectors is gold. I've fought this so much when trying to re-use patterns and trying to override so many properties. Huge thanks for this video.

[alouisjeanmedia]

Everything in this video touched on exactly where I'm at in my coding journey. Felt like you were doing a class specifically for me. Thanks, Kev!

[jovani]

You freestyling that dark-background color number @ 20:10 is goals 👏👏

[JG-kypw]

You are the best. I went to a Bootcamp and I struggle a lot with CSS. Thanks to you I understand what is going on. Thank you so much Kevin!

[sanfords]

I was doing a grid layout and having some bizzare issues with content going outside of the grid - then I added your box-sizing hack and whalla - mystery gone! Wow what a GREAT TIP!

[theatypicaldeveloper]

this vid pretty much covers every subject that you need to know when starting out with CSS, great stuff.

[hectorg]

Content vs Layout. That's something I never really put much thought of until now. Thanks! WIll keep that in mind for now on.

[kadagalaganesh]

Not gonna say more, this video simply amazing for CSS learners.

[WebDevYTLearningAccount]

I'm currently taking Colt Steele's web boot camp and I'm glad everything you reviewed I have an idea on due to his course, so this was a good watch for multiple reasons.

[mwengemwanambale]

Hi Kevin, thank you for your videos CSS has become more easier to deal with since i started watching your videos

[ziranshuzhang]

CSS is always, always, the part that takes me most of the time whenever there is web development.

[MikeKoss]

When you refer to "the Cascade" in this video, I get the impression you're just talking about the order of style declarations in a style sheet. But, in my reading of the spec, it uses that term to apply to ALL the factors that affect when a style is chosen over competing styles. Out of 5 different factors to consider, the position of the declaration is the least important (#5).

[hjetwd]

Kevin, as always, pumps our brains. 🤗

[alibaba]

dude, where have you been my whole life? this video is amazing and has made my life a little bit easier.

[Powerful-Manifestor-]

So well said when you say "most of the things we read about in the beginning but then forget" and then run into trouble later 🤣🤣 So true!

[kopilkaiser]

I'm pumped to learn from this tutorial of yours, which is always an absolutely gold mine for CSS knowledge ✌️⭐️⭐️⭐️⭐️⭐️

[Wandering_Horse]

Wow, thank you. Your videos are so clearly articulated and I really enjoy the video layout and production. As someone new to html and css your videos are so far more helpful then anything else I have worked with so far. In this video you explanations of inheritance, cascading, and specificity where my biggest take aways. I have been working on a simple web form and was given example css styling to go with it and I found myself going back and forth where modifying one thing would not make a change and then I found myself trying to hack it by force before finally just commenting out all the css and reintroducing one element at a time. Had I known about inheritance, cascading and specificity all of that could have been avoided. The great thing is I now have my go to source for all my html and css knowledge. Thank You!