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
✅ More info on the box model and box-sizing: • box-sizing: border-box...
✅ More info on specificity: • CSS Specificity explained
✅ Getting started with flexbox: • Learn flexbox the easy...
✅ Getting started with grid: • Learn CSS Grid the eas...
⌚ 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
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
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 ^^.

[@RickBeacham]

Congrats! What STACK do you like the most?

[@diwakardayal954]

thanks for the inspiration, May I ask what u did to perfect your JS? what helped you most in JS

[@Maxelya]

@@RickBeacham Thanks ! That's the cool part : I no longer have any preference ^^ meaning I get to fully enjoy my job. CSS was the only thing I used to really hate though because it was not "programming" and I didn't fully understand how it worked, leading to a lot of frustration -_-

[@Maxelya]

​@@diwakardayal954 With JS and programming in general I was lucky enough to grasp the logic rather quickly by solving algorithms. Then you can learn DOM manipulation/Event Listeners which might be confusing at first but really, you don't need to know a lot of it to start doing cool little apps with it. Especially with DOM manipulation I like to organize my code in a really simple way in order for make it look easy. Watching others coding on youtube also helps a lot to learn how to write clean code. Be curious !

[@sprtlife6261]

amazing!

[@zachjensz]

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

[@sagaryerguntala909]

True fan 😃😂

[@danisob3633]

its kevin :D

[@acubley]

I knew it, but I didn't really know it. 😐

[@Miretazam]

Why is his comment from 2 days ago? The video has been uploaded from 12 hours ago

[@acubley]

@@Miretazam He's a time traveler and it's the only way to watch all of the YT he wants to?

[@jovani4921]

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

[@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.

[@theatypicaldeveloper]

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

[@kadagalaganesh4230]

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

[@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

[@iambabyr0o]

This is an amazing video! Thank you, Kevin! Appreciate you sharing stories about your own mistakes - it really helps build confidence and not focus on own clumsiness.

[@sep1ol]

hey Kevin, i've started diving deeper into CSS past week and eventually i found your channel. just wanted to say thanks, such great content, it's been really VERY helpful. have a great day :)

[@jaymarley6172]

I am a frontend developer checked out your earlier course html and css from 2016 and you also covered very well back then some of these concepts good to see it being transferred here as-well ... has also really helped me at work ... thank you for all your good content and continued efforts really appreciated.

[@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!

[@kapteinkonyn3450]

Thanks for this! Your channel is really helping me with CSS topics that I used to struggle with.

[@CulturalToast]

Love your channel! You have helped me so much!

[@JG-ky6pw]

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!

[@Xevailo]

Hey Kevin, I just wanted to leave a HUGE thank you for making this channel! I am currently in the process of learning CSS and your videos are an incredible help there! Your style of teaching the subjects is on point, pragmatic and paced just the right way that I feel as if I'm understanding things. And though I still have a long journey ahead of me, I am beginning to feel confident that I may some day build something that actually looks nice, too! If I may leave one bit of constructive criticism though: In your video about "6 simple typography tips to more professional looking sites" you mostly work in Figma to draft the layout, which is absolutely understandable as a way to quickly visualize the effect certain changes will have. One thing I (as a complete novice) would have wished though would be that you briefly would have said how a CSS-porperty to achieve that COULD look like. Sometimes you did that but other times not, and it would have been a good crutch for me as well as repetition for more advanced viewers. I hope you have a great start into 2021 and am looking forward to learn more from you :)

[@dennyw17]

Awesome video! Just what I needed. Thanks!

[@zachj7078]

I knew all these very vaguely but this has really enlightened me, thank you! 😊

[@alouisjeanmedia7723]

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!

[@mcfliermeyer]

Same! His teaching style is sooooo good for me

[@duvanxo3033]

every time I look for css videos your channel pops up! love your videos :)

[@andresmillsgallego814]

Wow, amazing video . I can tell you put a ton of work into your videos which I respect and appreciate! Just found your channel, look forward to checking more of your videos out.

[@CharlesSmall]

Thank you for keep us up to date.

[@aravis_]

Thanks for your videos, I am actually starting to enjoy coding way too much (as I originally thought I would) because you explain things in a way I actually understand and don't make me feel dumb lol. Thanks so much, you have no idea how excited I am now on my journey. Thanks so much for all your videos!

[@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!

[@Adjust91]

Fantastic. Your content is extremely helpful as im focusing on css to land my junior job!

[@qxb348]

this is really helpful! thank you!❤

[@user-mb3fg2he3m]

Props for the hint on separating layouts from the design selectors 👍 Valuable recording there.

[@mwengemwanambale8659]

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

[@LazarusStr]

Thank you for creating this video. I've watched it three times because I loved your explanation and breakdown. I appreciate the effort you made to create this content. 🌺☺

[@hectorg362]

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

[@alialrahem9817]

Thank you for your tips and recommendations really helpful

[@80Vikram]

As always thank a ton for your knowledge sharing, god bless you. Happy + prosperous new year 2022

[@AzimXma]

Great explanation buddy❤️ Keep it up 👍

[@bobbysilver272]

The specificity in this video was very specific. Thank you :-)

[@Kai-zein]

Thank you Sir for all tutorial and advice! WE LOVE YOU

[@mandyb-vs4cc]

This is a great content. Thank you very much for this.

[@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!

[@hjetwd]

Kevin, as always, pumps our brains. 🤗

[@bswck]

A fantastic video! Thanks 👍

[@alibaba0428]

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

[@abdihakimguliye8207]

The CSS KING IS back! Kevin thanks for the concepts. Please do also JS most important concepts.

[@Fullsunfl00wer]

Thank you for sharing!

[@reoxb]

Thanks so much, this was so helpful to me.

[@henrysmith6578]

Thank you for such an informative video! Your channel is amazing. I'm so happy someone recommended I check it out!

[@KevinPowell]

Thank you so much!

[@MrKay23]

Wow this video was super super helpful!

[@b1mind]

Words are hard 😂Kevin- "After 5 years of making videos, I can finally say specificity"

[@Jordan-nv8dt]

This is the best video! Thank you for teaching me so much

[@durgfestivalvibes]

Great video, thanks!!

[@md.arafathrahmankhan6076]

Really an aswesome video for those who're gonna start their journey with CSS. Keep it going kevin, make more beginner friendly videos. Thanks.

[@LiHou]

Nice content! Really enjoyed

[@azuraflame1]

You really are a great dude for these videos Kevin and you are really great teacher.

[@ferrystech6066]

Great video! i have done allot of CSS in my professional career and i definitely can find myself in this video.

[@michaelgleason4791]

I felt that intro in my soul.

[@dannygarcia8353]

Thank you Kev!!

[@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.

[@code-tox6203]

Kevin The Css guru. your every videos teach me something new ♥️

[@Pareshbpatel]

A really good tutorial on the most important CSS concepts. Separating concerns regarding Layout and Styling is something I found very illuminating. Also, I was having a hard time choosing between FlexBox and Grid to start with. Grid it is. Thank you, Kevin {2022-01-08}

[@iliyansvechev8113]

the best channel ever thank you kevin

[@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).

[@Sampad-Sarker]

thanks for life saving lessons,I really mean it

[@Smalls-iT]

I feel motivated to break out the text editor again. Thanks for the vid 👍.

[@ziranshuzhang6831]

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

[@eccenux]

Great video. Even though I kind of know all this it is still good to organise your knowledge. One thing I would add is that in general inheritance work for font things and it doesn't work for layout things.

[@JohnBortins]

Outstanding!

[@zoirradjabov1420]

I've got much useful stuff from this video, tnx✌

[@hassaneoutouaya]

Thank you so much !

[@bySterling]

Ahhhh man I would LUV if you had secondary alternate shorts versions of your amazing vids for those of us usually ‘short’ on time (just don’t have a half hour for each vid to spare)

[@ahmadfaisal6356]

big thanks for this video

[@cold_]

the last tip is amazing

[@ikechukwualita521]

Thanks Kevin. ... U're just superlative!

[@Bookseeke]

Oh my God it worked 😅 thank you!!

[@thecatmanager]

Very helpful

[@RickBeacham]

Thanks Kevin! Great concepts to never forget. Did you know your one of the most famous Canadian devs on youtube after Ryan Reynolds? This is what I'm dealing with at work... .main-container .main .col-main .thread-products ul.thread-grid li.item span { padding-left: 70px; } .page .main-container .main .col-main .thread-products #products-list.thread-grid li.item span .price-box { margin: 5px 5px 5px 0 !important; } This could have been named : .threads-price-box { margin: 5px 5px 5px 0 } 😅

[@RickBeacham]

I suppose they did not want to edit the theme files from Magento too much...

[@viniciusm.m.7822]

THANKS!!!

[@durppp]

The CSS king. Keep on kingin’ king 👑

[@legostud]

I hadn’t seen the prettierrc file, but the guys here setup an eslint and style lint files. Stylelint is pretty cool, because we have it setup to to control the order of properties. We also have something that does accessibility checking in JSX files.

[@ludwigvillalba1886]

Thanks!!!!

[@80Vikram]

Can you please make a video on how to style a page, after receiving design from designer. Let's take a complex FB profile page or newsfeed page. This will be really helpful. As a beginner I struggled a lot about CSS where to start styling and how to proceed. Learnt through trial and error, thanks in advance

[@bryanthompson1070]

Kevin, great videos. What video recording software do you use?

[@DaPaBe1999]

Kevin I suggest doing a video about CSS methods|functions that are very useful, it is very important for responsivness

[@skynettava]

Thanks.

[@zaczac7030]

Hi. How about putting a empty space (I mean, the space created when we tap the enter button twice) to separate the styling for content and layout? Most of the time we dont need to have sperate selector for each because we usually inherit what the parent is using

[@drankenstein5241]

I'm learning html n css and feeling like I will never get it. This really made things click for me. Thank you sir

[@jeromealtariba7339]

very good thks a lot

[@CxG8Clan]

Got a question: at 6:10, you say we need inheritance because setting a property on a specific element (like a paragraph as opposed to a class) would mean we would not get the properties further down (when setting them for the class), but at 16:00, you've shown the complete opposite. Any clarification would be appreciated!

[@manhloc7784]

Hello Kevin, when are you gonna to open course about SASS again, I really want to look in this!

[@deatho0ne587]

How to simplify old CSS? Should be one of your future topics. Some key bullets: Bootstrap that used !important on almost everything and/or it just being on classes it really should not be on. There are 20+ pages and you should really only touch the one you are updating/creating though. Living in the basic looks that the other pages used. Making them responsive for IE and modern browsers without anything that is already in the project. Etc ... Another one would be how to limit HTML classes. Example have seen class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-2 etc". Most of it could have been just dropped down to 3 of the classes in the above example. This is part of the reason I think most dislike frameworks, if the classes on a single HTML element are a paragraph long then I know I dislike HTML.

[@laurenwozny2901]

Great videos. Very clear to understand. One thing I have a question about though, at 27:44 in Content vs Layout you combine columns and dark-background into one class (that I get), What I'm confused about is why does that override the gap setting in your grid layout? Is it because the gaps ARE still there, but they have now inherited the dark background?

[@kapurubanda6131]

Yes, the gaps are still there, but you can't see it because of the dark background-color, which is now applied to the parent div element by the ".dark-background" class. It's not technically inheritance. You just see "through" the gaps. You can also notice the parent div getting a padding of 1em.

[@troy1516]

whats typically better for making navbars/footers? flexbox or grid?

[@srinathsri6975]

Impressive

[@layerseven8755]

What extension are you using to preview your CSS implemented to your web-page in real time?

[@michaelengelby732]

Interesting. Specificity is like Order of Operations for the math folks out there. Never made that connection before. I am going to try and write up the rules of specificity so that it follows an order of operations ruleset. Might be an exercise in folly, as there as so many exceptions, but in doing so I will learn more things about it.

[@chomo54andbabyaisha97]

Really, how hard can it be to say speficiticity

[@chomo54andbabyaisha97]

Specificity is an absolutely horrible word, much easier to say is precedense. There is a precedense rule in Javascript too, and Mozilla has a splendid article on it. A lot of it is built on the presedence in boolean logic and math which both have individual precedense rules. Most know that addition has lower precedense than multiplication in math (so multiplication will be executed before addition), but the same is true in boolean logic, where OR has a lower precedense than AND in the order of which it will be executed (so AND will be executed before OR). *javascript operator precedence mdn*

[@chomo54andbabyaisha97]

You can also use an *online CSS specificity calculator*

[@bobbysilver272]

27:45 can anyone explain why " .columns {gap: 1em;} " is no longer working on the grid in the video.

[@RobertMcGovernTarasis]

it is still working, you just can’t see it because the background of the container div is now black. Previously it was just the boxes in the div that had the dark background so the gap was white. It does raise a question for me though, based on what Kevin said about preferring inheritance … is it better to have the dark background applied to the container, or just to the boxes, or is it one of those “it depends”

[@eccenux]

And that also shows another problem that padding should not be in the dark-background class. Because it's a layout thing more then it is about content style.

[@iftikhar3731]

Sir kevin you saved my life ❤😊

[@JottyHB]

Danke!

[@KevinPowell]

Thanks!

[@webapple1]

So iI'm a beginner currently studying web development , Im currently using positioning on my CSS and its actually not so easy , so ima look into grid/flex box because it sounds better than positioning everywhere

[@karuheine1152]

Just curious, is utility classes much better than having a css function such as invert() for inverting color? For instance, dark-clr can be done to "all" places, but then if the background changes to something darker, I will just flip it over like this color: invert();

[@eccenux]

Invert will also flip images and this might not look good. Invert will probably work fine for icons, but will be bad for photos and more complex images (e.g. cartoon character).

[@karuheine1152]

@@eccenux thanks.

[@bmccollneb1]

Kevin, how is the header 'IMPORTANT CSS CONSEPTS' styled in your example? Thanks.

[@KevinPowell]

That's just the way the font looks :)

[@jjjjj33333able]

Hi, can you tell me how I can open a webpage on the side as you have it on the video above so I can see my chances?

[@mohitdhatrak]

So you used position: absolute; to bring your video on top of the HTML doc, as it is covering the text is it definitely out of the flow of the document :))

[@rita1234rita1234]

if I could give two thumbs up to this video I would!!👍👍👏👏