Are you using the right CSS units?

  Рет қаралды 444,857

Kevin Powell

Kevin Powell

Күн бұрын

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.
Zell's article on media queries: zellwk.com/blog/media-query-u...
Em vs. Rem: • CSS em and rem explain...
Using clamp() for fonts: • min(), max(), and clam...
The issue with em with font sizes: • Why you shouldn't set ...
Viewport units: • CSS Units: vh, vw, vmi...
The ch unit: • The ch unit is the mos...
#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
---
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 KZfaq channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
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!

Пікірлер: 466
@einfachnurlegendar7947
@einfachnurlegendar7947 3 жыл бұрын
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 :)
@kedigiller111
@kedigiller111 3 жыл бұрын
Just I'm looking for this, thanks :D
@JErock25
@JErock25 3 жыл бұрын
Thank you!
@colindante5164
@colindante5164 3 жыл бұрын
Thanks ))
@DilshanPuwanendran
@DilshanPuwanendran 3 жыл бұрын
thanks mate
@tabhesab3555
@tabhesab3555 3 жыл бұрын
Thanks
@TheBigCheez365
@TheBigCheez365 3 жыл бұрын
This is such a solid channel. Literally my go-to for any and all things CSS. You da man Kevin.
@yasuekko8814
@yasuekko8814 3 жыл бұрын
Indeed 🔥
@ErikZettersten
@ErikZettersten 3 жыл бұрын
Second this
@juanmartinguillen4876
@juanmartinguillen4876 3 жыл бұрын
I concord
@robs257
@robs257 2 жыл бұрын
I agree
@dr_corrupt1014
@dr_corrupt1014 Жыл бұрын
kevin you are the man!
@andreschavarria7091
@andreschavarria7091 3 жыл бұрын
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!
@toddhoward5947
@toddhoward5947 3 жыл бұрын
All the best man ❤
@samuelgoncalves5616
@samuelgoncalves5616 3 жыл бұрын
Love that you are trying to learn! That's the way to go. Just out of curiosity, why did you start learning?
@rellison68
@rellison68 3 жыл бұрын
Hi Andres. I am 52 and am returning to development after about 10 years off. I really appreciate channels like this to help out. Good luck!
@andreschavarria7091
@andreschavarria7091 3 жыл бұрын
@@rellison68 thanks Robert, and good luck to you too! Agree with you, channels like this show some of the greatest benefits of platforms like KZfaq... sharing IS caring
@andreschavarria7091
@andreschavarria7091 3 жыл бұрын
@@samuelgoncalves5616 thanks Samuel! My wife started doing volunteering at her job, but one requirement is that whoever they’re volunteering for, must have a website and must of them don’t have one... so I said to her... I can build them a website, I’m sure that’s easy! Ha, little did I know... lol. And so I started learning literally 32 days ago. It’s a win win situation, they get the website and I get to learn.
@jackr9122
@jackr9122 3 жыл бұрын
Kevin thank you so much man - the clarity I get from these videos is unreal. Keep it up, my friend!
@cmyk8964
@cmyk8964 2 жыл бұрын
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
@lordyc8393
@lordyc8393 2 жыл бұрын
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
@maitolehrer2613
@maitolehrer2613 3 жыл бұрын
I've been looking for this kind of video for a long long time now. Thank you so much for this!
@TheMatcap1
@TheMatcap1 3 жыл бұрын
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!
@patriknordberg1259
@patriknordberg1259 3 жыл бұрын
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.
@kiggi__
@kiggi__ 3 жыл бұрын
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!
@Reckless917
@Reckless917 3 жыл бұрын
Amazing video as always. Super concise and well explained, thanks a lot!!
@antoniomasotti8060
@antoniomasotti8060 2 жыл бұрын
I love this man and his videos. You see immediately how experienced he is and still humble and willing to help. And the advices are always top, they greatly improved the way I use css.
@TheMoonLayingLow
@TheMoonLayingLow 3 жыл бұрын
This is so helpful! Thank you for sharing your knowledge, Kevin.
@lieutenantlascivious1992
@lieutenantlascivious1992 3 жыл бұрын
Thank you so much! I learn so many little tricks and get so many great suggestions from your videos!
@necroowl3953
@necroowl3953 2 жыл бұрын
Thanks a lot, Kevin, your videos are awesome and very complete. This used to be super boring to me, and your content got me interested in actually learning SCSS.
@VasilyPavlik
@VasilyPavlik 3 жыл бұрын
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!
@troelsrasmussen7457
@troelsrasmussen7457 3 жыл бұрын
Realy nice example with the button where padding is defined using em! Good job and nice videos - thanks!
@TheJacklwilliams
@TheJacklwilliams 2 жыл бұрын
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.
@Priority64
@Priority64 3 жыл бұрын
In addition to awesome content you put out constantly, I also have to admire that your videos are CRISP! Love that not only your content is hiqh quality but your video quality too.
@asdfasdfsdflk
@asdfasdfsdflk 2 жыл бұрын
This is so useful for how short it is; I really appreciate this content.
@tomasjsierra
@tomasjsierra 2 жыл бұрын
After watching this I improved my site by a lot, I think. Such a big difference in just 6 minutes of video. Many thanks.
@lordyc8393
@lordyc8393 2 жыл бұрын
Same!! made a new css which went from 1000 lines to 700 for my website
@Springfielde
@Springfielde 3 жыл бұрын
I really like that you add your face to your content. It makes things much more direct, so it's easier to learn. :)
@erichobbs4042
@erichobbs4042 3 жыл бұрын
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.
@yahayaoyinkansola8258
@yahayaoyinkansola8258 4 ай бұрын
Thank you so much Kevin for this particular video!, it really clarified a lot for me
@wickedwifestre
@wickedwifestre 2 жыл бұрын
this was extremely helpful. i’m pretty new to css so this gives me a lot of good stuff to think about. thank you!
@cmdaltctr
@cmdaltctr 3 жыл бұрын
THANK YOU THANK YOU! I have been wondering about this as a beginner and this helped me termendously!
@penggunayoutube2580
@penggunayoutube2580 2 жыл бұрын
I always check a video or two from this channel. All of them is really helpful in my road on web development learning Love your content
@CodingNuggets
@CodingNuggets 3 жыл бұрын
The CSS GOAT bringing everyone some very useful info. Appreciate you Kevin. See you soon!
@Coco-ii2pu
@Coco-ii2pu Жыл бұрын
You're the best tutor online Kevin. And somehow you have all the answers 😂. Thank you
@rohitkf8474
@rohitkf8474 2 жыл бұрын
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
@doubledeckercouch6251
@doubledeckercouch6251 3 жыл бұрын
Excellent video - and something which needed a quick reference point to "flick back to". Thanks Big K :)
@aceandember
@aceandember 2 жыл бұрын
So, today something clicked and I owe it all to you Mr Powell. I have been doing CSS/SCSS almost every day for a few years but I didn't grasp the concept of parent height affecting the height of children until I watched one of your videos (you do great btw, ty). I struggled with dealing with it for a long time and today I was tackling a typical challenge, one where a div dynamically pops up from the bottom and I had to size the content above so that it could handle a custom scrollbar etc. Anyway, due to your videos, I walked it through and it worked the first time! Often I'd struggled over this similar scenario with other elements and had to guess, refresh, and just sort of luck my way into it. Now I get it! TY TY TY!!
@0the0ambient0
@0the0ambient0 3 жыл бұрын
Kevin ~ You are amazing . So much ambiguity yet you find clarity
@kblyr
@kblyr 3 жыл бұрын
Awesome! This is really very helpful, thank you!
@nymusicman
@nymusicman 3 жыл бұрын
Been a rem user for a long time and love it. First time learning about ch. I'm very excited to start using it in some of my websites.
@stevepiraud7629
@stevepiraud7629 3 жыл бұрын
Awesome, like always!
@90kidsgamezone76
@90kidsgamezone76 3 жыл бұрын
You are the man who learn me a lot of love with css
@arceniocornejo6779
@arceniocornejo6779 3 жыл бұрын
I'm trying to learn more about css "little tiny details" for many years. I know your videos will be helpful to learn the subtle details hidden in this languages. Thanks very much for your efforts to disseminate these important techniques. PD I am a retired professor from Panama.
@theorycreative
@theorycreative 3 жыл бұрын
Great video! It definitely gets confusing sometimes, especially if you’re hours into a project, getting tired and start making mistakes. I’m still a designer at heart, even though I’ve been writing code for decades, it’s not often enough to keep track of everything... and then throw math into the mix after a long day, d’oh!
@dimitrys.2494
@dimitrys.2494 3 жыл бұрын
i thought you had like a million plus followers. you are my go to guy if i don't understand something in css. let's try and bring you to at least half a mil. i'm sharing for sure all the time ! you go man!
@TheDMaciek
@TheDMaciek Жыл бұрын
Thanks man! Great video
@PlayRiteProductions
@PlayRiteProductions 3 жыл бұрын
Video is gold, thanks so much!
@RahulKumar-jx5ku
@RahulKumar-jx5ku 2 жыл бұрын
You are making my job easier, Kevin. Thank you very much for that.
@jovanlaguitao3384
@jovanlaguitao3384 Жыл бұрын
Very helpful Kevin thank you so much!!
@ru2979
@ru2979 2 жыл бұрын
Sir .This is a ultimate web dev channel . Kudos to your hard work and love your videos ❤️☺️
@MasayaShida
@MasayaShida 3 жыл бұрын
Thanks so much for this I'm always insecure about what units to use
@guillermoandradaFSD
@guillermoandradaFSD 3 жыл бұрын
Thank you so much... You channel is awesome
@mrx-qi8th
@mrx-qi8th 3 жыл бұрын
Nice,thanks for sharing your information. I've always clicked the like button even if i didn't have the time to watch it at the moment
@stefanofrontani2220
@stefanofrontani2220 2 жыл бұрын
So clear. You've just won a new subscriber.
@KevinPowell
@KevinPowell 2 жыл бұрын
Welcome aboard!
@PaulNieman
@PaulNieman Жыл бұрын
Brilliant and helpful advice. Thank you.
@vasiovasio
@vasiovasio 2 жыл бұрын
Great video! Thank you!
@Football__Junkie
@Football__Junkie 3 жыл бұрын
Great video. Actionable and to the point
@mabelwin4779
@mabelwin4779 3 ай бұрын
THANKS U SO MUCH❤😢WITH your videos, now I become understanding about front end working .the videos are right to the point and save time❤🎉
@thewadegreen
@thewadegreen 3 жыл бұрын
Another great video topic! Thanks!
@mreclecticguy
@mreclecticguy 3 жыл бұрын
Extremely helpful, thank you.
@ax-coding631
@ax-coding631 2 жыл бұрын
Really useful, thank you!
@40ozTea
@40ozTea 9 ай бұрын
Great explanation!
@huynh4128
@huynh4128 3 жыл бұрын
This is the video i needed right now
@georgiosg9464
@georgiosg9464 Жыл бұрын
this cool person is the only one who making me enjoy his content , describe it as much as simple he can!
@maxwellandyaffanyi7499
@maxwellandyaffanyi7499 2 жыл бұрын
🙌🙌🙌👏.... You be CSS bossu 🥳🥳 😄Kudos from Ghana🇬🇭
@imluctor5997
@imluctor5997 3 жыл бұрын
You can also make a function in scss to calculate the pixels to rem. I always use that and call the function px-to-rem() if you take this in use make sure you don't have to put a value with px at the end to make it faster to write it.
@ViorelMocanu
@ViorelMocanu 3 жыл бұрын
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 widths and heights (even if I override them in CSS in other units) » ch for paragraph max-widths
@doug7897
@doug7897 3 жыл бұрын
Due to writing a lot of wordpress stuff, I've avoided using the 62.5% font-size trick since that breaks certain styles in the admin. Instead I have a SASS function called rem(), which just takes whatever pixel value I want to have, and devides by 16 to convert to rems. Definitely a few more characters to type (painfully so), but I've honestly gotten used to it and outside of the awkwardness using them in things like long padding declarations, it's been pretty nice. Untill the designer uses inspector to figure out size adjustments and gives me values in REMs that I have to convert back to pixel values. Then it's hell.
@troika_473h
@troika_473h 3 жыл бұрын
Thank you for the video!
@tommy6322
@tommy6322 3 жыл бұрын
I am not sure. But hopefully you will clear things up for me! :) Love your videos!
@Brunoenribeiro
@Brunoenribeiro 3 жыл бұрын
.kevin__coat { display: flex; justify-content: flex-start; }
@ivanberdichevsky5679
@ivanberdichevsky5679 3 жыл бұрын
I think this has align-items: flex-end actually 😂
@akifcankara2225
@akifcankara2225 3 жыл бұрын
.kevin__tshirt:nth-child(even){ background: pink; } .kevin__tshirt:nth-child(odd){ background: whitesmoke; } .kevin__tshirt:nth-child(3n){ background: grey; }
@sumitpurohit8849
@sumitpurohit8849 3 жыл бұрын
.kevin__coat { align-items: space-between; }
@ari-mcbrown
@ari-mcbrown 3 жыл бұрын
weird flex, but okay
@TazExprez
@TazExprez Жыл бұрын
Thanks a lot for this.
@tonybell1597
@tonybell1597 7 ай бұрын
Thankyou! I’ve very recently arrived at coding a website for a group of people, having managed to avoid html, css and Java since Sir Tim B-L invented it! (Odd as I’ve been in this business for 40+ years) and now I’m here! Wow…. Thank you so much for your vids, they have been superb at explaining principles … keep up the grand work…
@williamboshi1855
@williamboshi1855 3 жыл бұрын
This topic interested so much I liked before watching, I hope the algorithm gods noticed
@angeh100
@angeh100 2 жыл бұрын
helped me very much. thanks
@DANNFIGDESIGNS
@DANNFIGDESIGNS Жыл бұрын
This was the video I was looking for. I know how the units work, but where to use them busted my brain. For the most part I was using vh and vw to much. Also, I was using em for my font sizes, and the parents all the way up were using em as well. Also the whole concept presented here will stick. Thank you Kevin. Big fan. Update: I read the article regarding the media queries and I'm curios if it's still relevant today. It definitely was written a long time ago. I'm using Webflow and was surprised to see them using px for media queries.
@AnandKumarChaudhary
@AnandKumarChaudhary 3 жыл бұрын
Kevin has unparalleled skill of explaining highly complex concepts in very simple manner. Great Work!!!!
@DrewBombard
@DrewBombard 3 жыл бұрын
Just found Kevin last week. Wow… so awesome and easy to understand examples and tutorials and … just amazing.
@KevinPowell
@KevinPowell 3 жыл бұрын
So glad you're enjoying my content!
@mikaockerman832
@mikaockerman832 3 ай бұрын
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!!
@micahhlc
@micahhlc Жыл бұрын
the best CSS teacher in youtube.
@joulesgarcia400
@joulesgarcia400 3 жыл бұрын
THANK YOU SO MUCH MAN!
@A_Lesser_Man
@A_Lesser_Man 3 жыл бұрын
css is the bane of my existence, you make it bareable!
@WizardOfArc
@WizardOfArc 3 жыл бұрын
Thank you so much!
@intelo6251
@intelo6251 3 жыл бұрын
Just love this guy!
@kudaykumar1261
@kudaykumar1261 2 жыл бұрын
Thank you so much sir.
@juanmadelaflor6406
@juanmadelaflor6406 3 жыл бұрын
Thanks Kevin!
@LuisReyes-zs4uk
@LuisReyes-zs4uk 3 жыл бұрын
You're awesome, Kevin!
@mechmaverick
@mechmaverick 3 жыл бұрын
literally subbing because the "ch" explanation
@malamhari_
@malamhari_ 3 жыл бұрын
Nice video, been doing with vw all this timeXD
@KevinPowell
@KevinPowell 3 жыл бұрын
Thank you! 😃
@YannMetalhead
@YannMetalhead Жыл бұрын
Good explanation.
@GR_BackingTracks
@GR_BackingTracks Жыл бұрын
@ 4:21 is my favorite of the tips... I'm a brand newbie to this stuff and this seems perfect for the site I'm making.
@snaydenoff
@snaydenoff 3 жыл бұрын
Great video! As a product designer who has just started writing my own html/css, I find your videos really useful! It would be great for beginners if you could expand on the issues with examples, such as what issues using the viewport width would cause. ✌️
@camarondeviaje
@camarondeviaje 3 жыл бұрын
Thanks for the video
@Andrei-xb1pz
@Andrei-xb1pz 3 жыл бұрын
Cool video! I don't like CSS but you make me hate it less
@sundayuchegbu2060
@sundayuchegbu2060 3 жыл бұрын
Hi Kelvin, have been going through your channel and you are simply amazing
@KevinPowell
@KevinPowell 3 жыл бұрын
Thank you so much 😀
@not_amanullah
@not_amanullah 4 ай бұрын
This is helpful ❤
@slayerd52
@slayerd52 2 жыл бұрын
Great content!
@rammaheshwari9748
@rammaheshwari9748 3 жыл бұрын
Very helpful video 👌
@maciekopozda7498
@maciekopozda7498 2 жыл бұрын
Wow you are awesome :) thank you
@mmelimahlobo7656
@mmelimahlobo7656 11 ай бұрын
I am forever grateful for having such people like you,every time I am stuck with css I know you will be the solution to my problem may the Lord increase you more and more
@haliszekeriyaozkok4851
@haliszekeriyaozkok4851 2 жыл бұрын
When ı wasn't know the difference between relative and absolute units ı used to the absolute units and because of that struggled with media queries. Thanks to Allah ı learned them and now my layouts even more responsive and ı don't use media queries too much.
@shahshail12
@shahshail12 3 жыл бұрын
Hey Kevin, your videos are awesome 👌, just wanted to ask you that is it a good practice to give margin top & bottom in vw?
@mountainslopes
@mountainslopes 3 жыл бұрын
I like the idea of px for html font size (can change with breakpoints), rem for components, and em for elements within those components.
@KevinPowell
@KevinPowell 3 жыл бұрын
For accessibility reasons, it's really important not to set the html font size with a pixel value. Assume the default is 16, and use a percentage. You can still scale that number up and down within breakpoints :)
@Vreth6
@Vreth6 3 жыл бұрын
You nailed the thumbnail on this one 😂
@CharlesSmall
@CharlesSmall 3 жыл бұрын
Thank you I never knew it at all.
Container queries are possible!
17:30
Kevin Powell
Рет қаралды 157 М.
CSS em and rem explained #CSS #responsive
16:54
Kevin Powell
Рет қаралды 379 М.
Дибала против вратаря Легенды
00:33
Mr. Oleynik
Рет қаралды 4,5 МЛН
Sigma Girl Past #funny #sigma #viral
00:20
CRAZY GREAPA
Рет қаралды 30 МЛН
FOOLED THE GUARD🤢
00:54
INO
Рет қаралды 63 МЛН
Avoid These 5 Awful CSS Mistakes
20:42
Kevin Powell
Рет қаралды 190 М.
5 Signs of an Inexperienced Self-Taught Developer (and how to fix)
8:40
Use these instead of vh
6:06
Kevin Powell
Рет қаралды 478 М.
Avoid these 5 beginner CSS mistakes
21:38
Kevin Powell
Рет қаралды 74 М.
px vs rem: what to use for font-size in your CSS
16:11
Coder Coder
Рет қаралды 49 М.
A CSS Unit Deep Dive - Learn CSS Units & When To Use Them
15:13
Slaying The Dragon
Рет қаралды 80 М.
CSS unit Tier List
28:00
Kevin Powell
Рет қаралды 26 М.
CSS Tips And Tricks I Wish I Knew Before
12:12
Lama Dev
Рет қаралды 439 М.
Learn CSS Units In 8 Minutes
8:48
Web Dev Simplified
Рет қаралды 224 М.
Using CSS custom properties like this is a waste
16:12
Kevin Powell
Рет қаралды 160 М.