Are you using the right CSS units?

There are a lot of different units that we can use when writing CSS, in this video I give some general rules of thumb of which ones are best suited for which situations.

#css

--

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

---

Keep up to date with everything I'm up to

---

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!

[einfachnurlegendar]

Summary:

font-size: rem
width: % in combination with a max-width, ch
height: question urself "do i rly need to set height" if yes -> use a min-height
padding/margin: rem or em, kevin often uses em for padding of buttons
media queries: em

px only for little things like shadows, borders etc.


Great Video :)

[TheBigCheez]

This is such a solid channel. Literally my go-to for any and all things CSS. You da man Kevin.

[andreschavarria]

Ok so I’m 37 years young and decided to learn html/css with absolutely 0 experience and knowledge about coding or programming. Your channel has made things way easier for me to understand. So I guess I just want to say thank you and recognize the importance of sharing and the impact you’re making.... thanks!

[cmyk]

For basic HTML games, I define a custom variable in the root relative to the viewport width/height (e.g. min(4vw, 3vh)) and calc everything else relative to that

[rohitkf]

Font size : use rem
Width : coupled with max width, use ch unit(75 or less)
Height : set min height
Padding or margin : em(padding for buttons) or rem
Medi queries : em

[cysroom]

I discovered this channel a few days ago, I learned more about mobile responsive design than anywhere else and feel more confident using CSS. Kevin, you're a real one

[tomasjsierra]

After watching this I improved my site by a lot, I think.
Such a big difference in just 6 minutes of video.
Many thanks.

[TheJacklwilliams]

The ironic thing, as newb, I've used pixels for most everything because? I haven't the slightest idea of the definition and proper usage of the units you mentioned... Which of course, calls out the immediate need for me to, learn them, and use them accordingly. Thanks for this Kevin. I'm enjoying your content very much.

[ViorelMocanu]

My rules of thumb are:
» % or vw for box widths
» % or vh for box heights (indeed, rarely)
» rem or em for font sizes, leadings, and other type-related dimensions (e.g. image sizes sometimes)
» em for paddings and margins
» px for border widths (especially when aiming for that 1px crisp) and media queries (will take a look at the article you recommended, but in principle, it worked well for me so far) and <img> widths and heights (even if I override them in CSS in other units)
» ch for paragraph max-widths

[AndreBradshaw]

Just wanted to thank you for your videos. I have largely avoided getting good with CSS over the last 7 years and default to writing custom javascript for everything, but your practical examples have me writing a lot more CSS over the last few months.

[CodingNuggets]

The CSS GOAT bringing everyone some very useful info. Appreciate you Kevin. See you soon!

[TheMatcap]

After deploying some sites on html and css i started watching your tutorials and i´m totally impressed, you really helped me a lot improving my css styling an writing. Thanks!

[VasilyPavlik]

Man, after your videos I started to use REMs. And it's marvelous. Because you can change only one font-size for body in media-query. And that's all. It works like variables even in IE.
Now I'm thinking in REMs everywhere. Our body default font size is 10px, so it's quite easy to calculate. But it's also easy to scale layouts for any screen size depends on media.

Thank you a lot!

[kiggi__]

I am playing catch up with everything HTML, CSS, Javascript. Your video's are fantastic at helping me get to grips with all that has changed, keep up the awesome content!

[erichobbs]

I learned about Ch from one of Kevin's other video's last year. It's my go to unit for designing text layout now.

[patriknordberg]

I think you missed out on CSS Grid and using fractions or fr. Which I think should be very relevant at this time. People really need to start embracing CSS Grid as it makes your layout so much cleaner and allows you to keep your HTML semanticly correct.
Appreciated the comment about ch. I hadn't used that so much and it really makes sense for column sizes.

[Springfielde]

I really like that you add your face to your content. It makes things much more direct, so it's easier to learn. :)

[maxwellandyaffanyi]

🙌🙌🙌👏.... You be CSS bossu 🥳🥳 😄Kudos from Ghana🇬🇭

[Coco-iipu]

You're the best tutor online Kevin. And somehow you have all the answers 😂. Thank you

[mikaockerman]

Our designers want things to look consistent across sizes, fully responsive, and they also make very complex designs. This means the headings, boxes, margins, padding all needs to adjust to screen size. I find myself using Calc with VW quite often. I don't know of that's the best way, but it has been working for me. I do use REM for font size whenever I can though. Thanks!!