This is really helpful Kevin! Stay blessed!😄 So if we summarize: use *rem* with *font-size* because it always looks at the root or HTML element for *font-size* . So, we don't need to worry about parent-child calculations as with *em* . use *em* with *padding* as em will adjust the padding based on the font-size of that element. use *rem* with *margin* if you want consistent space among all the adjacent elements.
Small chunks of information, followed by enough practice, makes the concept stick. Thanks for that 'drip content' style course on responsive layouts. It is helping immensely!
Hi Kevin, I'm just finishing day 2 of the course and I wanted to take a moment to thank you for offering this free content. I have been really struggling to understand responsive design and decided to find a way to make it click. Likewise, I have always found your content helpful and concise before, making it easy to turn to you for instruction now. I have got to say, in the two short lessons so far, it's already making so much more sense. You're the best!
I'm on your Conquering Responsive Layouts course and I learned so much from this one video. At the agency where I build WordPress templates, I'm used to building websites for desktops and then using media queries to resize designs for mobile devices. But now, my whole mindset has changed. Your use of media queries to change `html` font size with minimal changes to child elements and their font size and padding is epic!
You and your videos are probably the best teacher and resources I've found to really learn and understand what's happening with CSS. What they teach you in school or in books doesn't explain the nuances that you're going to need to know when you're developing real-world applications. Thank you so much for everything you do and for being such a boon to those of us who are looking to level up our skills quickly while also developing that deeper understanding!
Great video about explaining the differences between rems and ems. For those, like me, who like to know to what actual pixels the relative values turn into, the computed values in devtools and/or just inspecting an element can give some confidence about that. Another important aspect of giving relative font-sizes is to support accessibility. If a user has different browser settings for default font-size, the font-sizes in pixels won't adapt. These are just some thoughts that came up while watching the video. Some may find it useful. Cheers!
Seriously having nightmares with rems and ems. But no more. The nightmare is over Thanks to you. Great tutorial again, right up to the point along with simple explanation. 😀😀😀
Great content Kevin, I hadn't considered how powerful this could be with media queries or just simply being able to adjust various aspects of site design by font-size only!
Kevin, you are amazing mentor! Each video of yours gives me "aha" moment and the insane to this is I code for 4 years now and still I have so many misunderstandings and you bring brightness to me with every video
You are a CSS geniues, I'm following the Conquest Responsive Layouts course and thinking about that html and css is responsive by default, but we break it with rules is amazing. great perspective. Thanks for all the work.
Thanks to this video. I always use rem coz I was in a rush to learn things back then. I now know when to use em instead of rem. Some takeaways 6:41 - the difference of using margins from padding 12:48 - onto pixels
I can't believe I even ever tried to build anything ever without watching this video. How stupid was that? 😆 17 minutes that could have saved me weeks of my life.
I have been using pixels and a thousand media queries, one for each element and subelement, in order to scale the fonts up and down. No more. I was always afraid of using Ems and Rems and this is the first time I feel like I understand them. Thank you!
15:02 Real cool flick around there - saves us a bunch of time and misery changing a lot of font-sizes through a page. Just like old Jimbo Rockford at the wheel of his Firebird.
Experiencing some real stress with a "simple" landing page build out for an existing page. In media query hell yet but finding this and the 21 day challenge course to be very rewareding and useful. Kevin Powell is a trusted resource fo CSS. I am a big fan and even bought the hoodies!
This video made me delete more than 300 lines of code, making my code much more clean and optimized. I came across your channel and I am learning a lot, thank you so so much.
When I was struggling with css3 margin and padding, I wish I would have watched this video at that time. That's so amazing and informative sir Kevin Powell. You are a genius.
oh my goodness!!!!!!!!!! BE GONE dubious-looking-buttons -on-small-screen-sizes I flat out had no idea that ems are the magic behind perfect buttons, thank you soooo much Kevin :) :)
The only knowledge anyone needs from this is within the first 50 seconds. You all obsess over how thankful you are to have all these opinions on how and why you should use different aspects of css when the only reason he’s able to give you those opinions is he put in the trial and error of figuring out css from not knowing anything and just using what you see works to picking up thing by thing and applying it to his workflow in a way more natural way then trying to jerry rig multiple peoples coding styles together in your learning process
I use px, em, rem on my css, but not sure of the point using em, rem.. only use it out of curiosity until i watch this.. Thank you for well explaining this, it is a great help..
Excellent explanation with great examples, you're truly a talented lecturer! Sorry for bad English and going a bit off-topic, but I'm so excited and motivated after watching this video and having a revelation on CSS units, I just had to share my feelings; you remind me very much of my "live" teacher in my Front-end education program, who is an excellent, knowledgable and passionate top-tier teacher, just like you are; I think it is really challenging to make such great content in such a short time, and still maintaining fantastic feedback from your viewers, or should I say, students, which of course means people are *actually* learning so so very much, and feeling motivated, happy and engaged while going through all these amazing lectures... So you most definitely are succeeding in making CSS less frustrating, more exciting and even "fall-in-loveable"! 😄 To you and all other developers who are so dedicated to share their knowledge with the world, THANK YOU from the bottom of my heart, you are the greatest, and you are making the teaching profession proud! ♥
thank you so much for your video, it really helped me put things into perspective. The use of ems and rems really makes a difference to the mobile friendly design and I've never seen it explain as well as in this video, so thanks for posting this video..
I have been using old school CSS for way too long and I am trying to come up to speed. This was a great video for that (even though you made it 5 years ago!)
Please make a video on - ::before and ::after ( I really don't understand this thing ) and also make a video on - transform and translateX and translateY and also make a video on absolute, relative position in css and also make a video on linear gradient and also make a video on - Explain overflow concepts and Sorry for so much videos but Kevin you explain very well and you are the world's best teacher in the world...I love my teacher Kevin ( Honestly from heart ) - I love you and thank you so much
Glad you're enjoying my videos Mahendra! Don't watch too many of them at once, take some time to practice what you're learning! I actually have quite a few of your suggestions on my list! A video on ::before and ::after should be coming out in a few weeks, and I have something for absolute and relative as well. Thanks for the suggestions though, I'll add the others to my list :)
Such a good video! Now i not only understand the difference between them, but also when should or shouldn't i use each of them. Very helpful, thank you :)
really thank you very very very much , these videos made me understand ,, without it i was lost , thank you really because you love what you do and illustrate each detail
It's also important the ordering of the classes in the CSS file. Both .call-to-action and call-to-action--small has font-size. call-to-action--small is defined later than call-to-action, therefore font-size property on call-to-action overrides previous one.
Thanks man. This is really clear. It's gonna take some playing around to really sink in but I can see awesome benefits to this. Do you use percentages for widths and heights or is there still a case for using ems, rems, px in responsive design?
Hello Kevin ! I like your clear explanation on most confusing css properties. Could you please make a video about 'calc' function in CSS, how and when to use it. Thanks
This is a very helpful video. Just a tip: please consider sitting a little bit back from the camera. It will look much nicer. It looks like your face is dominating the whole screen, although nothing bad with current set-up either.
Man finally someone gives me a real reason to use “rem” and “em” and explains it in a convincing way. This is why you are the master. Thank you sir
This is really helpful Kevin! Stay blessed!😄
So if we summarize:
use *rem* with *font-size* because it always looks at the root or HTML element for *font-size* . So, we don't need to worry about parent-child calculations as with *em* .
use *em* with *padding* as em will adjust the padding based on the font-size of that element.
use *rem* with *margin* if you want consistent space among all the adjacent elements.
you have a gift for making that "ah that makes sense" moment happen
every damn time i think "why would i ever need that" then i go "AH!"
You are right! He does have that gift!
Sir, you are a blessing to us..
Agreed!!
I agree. :-)
Indeed😌
I am watching this after 5 years since the video got released and still its the best video on rem and em in youtube
5 yrs on and the best explanation I've seen on this topic... for the first time I finally get it...thank you!
Small chunks of information, followed by enough practice, makes the concept stick.
Thanks for that 'drip content' style course on responsive layouts. It is helping immensely!
Hi Kevin,
I'm just finishing day 2 of the course and I wanted to take a moment to thank you for offering this free content. I have been really struggling to understand responsive design and decided to find a way to make it click. Likewise, I have always found your content helpful and concise before, making it easy to turn to you for instruction now. I have got to say, in the two short lessons so far, it's already making so much more sense. You're the best!
I'm on your Conquering Responsive Layouts course and I learned so much from this one video. At the agency where I build WordPress templates, I'm used to building websites for desktops and then using media queries to resize designs for mobile devices. But now, my whole mindset has changed. Your use of media queries to change `html` font size with minimal changes to child elements and their font size and padding is epic!
Instablaster...
Thank you Kevin, taking your responsive layouts course now and wanted to be thorough. Had an aha moment so glad I came to check this out.
You and your videos are probably the best teacher and resources I've found to really learn and understand what's happening with CSS. What they teach you in school or in books doesn't explain the nuances that you're going to need to know when you're developing real-world applications. Thank you so much for everything you do and for being such a boon to those of us who are looking to level up our skills quickly while also developing that deeper understanding!
Great video about explaining the differences between rems and ems. For those, like me, who like to know to what actual pixels the relative values turn into, the computed values in devtools and/or just inspecting an element can give some confidence about that. Another important aspect of giving relative font-sizes is to support accessibility. If a user has different browser settings for default font-size, the font-sizes in pixels won't adapt. These are just some thoughts that came up while watching the video. Some may find it useful. Cheers!
Seriously having nightmares with rems and ems. But no more. The nightmare is over Thanks to you. Great tutorial again, right up to the point along with simple explanation. 😀😀😀
Glad I could help!
@@KevinPowell talk about deep nested comments
@@rashujain6813 this is kevin powell alt account - will do
Great content Kevin, I hadn't considered how powerful this could be with media queries or just simply being able to adjust various aspects of site design by font-size only!
Kevin, you are amazing mentor! Each video of yours gives me "aha" moment and the insane to this is I code for 4 years now and still I have so many misunderstandings and you bring brightness to me with every video
You are a CSS geniues, I'm following the Conquest Responsive Layouts course and thinking about that html and css is responsive by default, but we break it with rules is amazing. great perspective. Thanks for all the work.
Thanks to this video. I always use rem coz I was in a rush to learn things back then. I now know when to use em instead of rem.
Some takeaways
6:41 - the difference of using margins from padding
12:48 - onto pixels
This is the best explanation I’ve seen so far. Watching your tips saves years of lifetime 😊
I can't believe I even ever tried to build anything ever without watching this video. How stupid was that? 😆
17 minutes that could have saved me weeks of my life.
Thanks! I have been watching video's about EM and REM forever, and I never understood it until today. Great tutorial, great examples.
1. Font-size: rem to fixed
2. Padding: em because it see the element font size
3. Margin: rem to fixed the margin gap
em is basically there to fu(k things up
I have been using pixels and a thousand media queries, one for each element and subelement, in order to scale the fonts up and down. No more. I was always afraid of using Ems and Rems and this is the first time I feel like I understand them. Thank you!
Finally, someone has made a clean and practical explanation of what REM and EM. 🎉 thanks for sharing
15:02 Real cool flick around there - saves us a bunch of time and misery changing a lot of font-sizes through a page. Just like old Jimbo Rockford at the wheel of his Firebird.
That is some extremely interesting colour grading at the start.
Very underrated video… still to this day the best explanation of em/rem I’ve seen. Thank you 🙏
Experiencing some real stress with a "simple" landing page build out for an existing page. In media query hell yet but finding this and the 21 day challenge course to be very rewareding and useful. Kevin Powell is a trusted resource fo CSS. I am a big fan and even bought the hoodies!
6 years later and this content is still so helpful :)
This video made me delete more than 300 lines of code, making my code much more clean and optimized. I came across your channel and I am learning a lot, thank you so so much.
I've gotten 3 recommended videos from from you by TH-cam and they were what I was looking for. Haha
+1 sub
Welcome aboard! Glad that TH-cam is pointing you in the right direction (though it's also sometimes a bit scary, lol)
I found it perfect that the surprise width changing slightly @ 5:40 was due to em instead of rem being used for the margin/padding size for .col :)
I am in the middle of learning front-end coding and WOW - I'm was confused. Now, I get it. Thanks, A Lot.
I am new to webdev, but far enough into it now to recognize this as a core method. Thanks Kevin!
One of the most underrated channels about learning web dev or atleast designing using CSS
First time saw practical use of em and rem in case study example. Thank you sir
This channel might make me change my life and become a better coder.
When I was struggling with css3 margin and padding, I wish I would have watched this video at that time. That's so amazing and informative sir Kevin Powell. You are a genius.
You are truly a godsend; such clear and succinct explanations and examples. Thank you so much, Kevin!
I'm new to this channel and i just love that different css things that not much of the people explain are explained by him (just loved it)
oh my goodness!!!!!!!!!! BE GONE dubious-looking-buttons -on-small-screen-sizes I flat out had no idea that ems are the magic behind perfect buttons, thank you soooo much Kevin :) :)
this saves us from media query to a great extent 🙏. Thanks Kevin.
i was changing them based on what looks good but now i actually understand them, thankyou!
...okay. That single media-query thing at the end sold me. I can see that being used all the time. 😮
CRL - Day 2 CSS em and rem explained! Learning so much already. TY KEVIN!!!
Useful video. I finally get a sound reason to use em and rem. I have used px all the time but from now on I will use em and rem
I was seeing your course of responsive with ccs and sir you are amazing, thanks you, you help me a lot !
Thanks...!
I learned a lot but I must have to repeat this tutorial so I can expand my understanding.
Regards: Muhammad Zubair
Best explanation! Keep it up. Love your way of explaining things
Thanks so much, glad you liked the vid :)
The only knowledge anyone needs from this is within the first 50 seconds. You all obsess over how thankful you are to have all these opinions on how and why you should use different aspects of css when the only reason he’s able to give you those opinions is he put in the trial and error of figuring out css from not knowing anything and just using what you see works to picking up thing by thing and applying it to his workflow in a way more natural way then trying to jerry rig multiple peoples coding styles together in your learning process
I use px, em, rem on my css, but not sure of the point using em, rem.. only use it out of curiosity until i watch this.. Thank you for well explaining this, it is a great help..
Excellent explanation with great examples, you're truly a talented lecturer!
Sorry for bad English and going a bit off-topic, but I'm so excited and motivated after watching this video and having a revelation on CSS units, I just had to share my feelings; you remind me very much of my "live" teacher in my Front-end education program, who is an excellent, knowledgable and passionate top-tier teacher, just like you are; I think it is really challenging to make such great content in such a short time, and still maintaining fantastic feedback from your viewers, or should I say, students, which of course means people are *actually* learning so so very much, and feeling motivated, happy and engaged while going through all these amazing lectures... So you most definitely are succeeding in making CSS less frustrating, more exciting and even "fall-in-loveable"! 😄 To you and all other developers who are so dedicated to share their knowledge with the world, THANK YOU from the bottom of my heart, you are the greatest, and you are making the teaching profession proud!
♥
thank you so much for your video, it really helped me put things into perspective. The use of ems and rems really makes a difference to the mobile friendly design and I've never seen it explain as well as in this video, so thanks for posting this video..
No problem at all!
Cant wait to actually understand when to use which... love this channel!
I finally feel like I have a handle on this topic. Great explanation. Thanks!
Thank you! I finally understood what Em's and Rem's are. Best explanation (:
Man, I have fallen in love with your channel. Thanks for making awesome videos.
Glad that you're enjoying my content!
I have been using old school CSS for way too long and I am trying to come up to speed. This was a great video for that (even though you made it 5 years ago!)
For the 1st time ever, I understood em and rem, how it works.
great explation ,just started your course -challenge , this presentation will certainly helpful ! this speaks your experience of so many years......
Awesome! You’re really doing the best html, css Tutorials out there. Thank you so much!!!
Thank you for all these tutorials. Every single one rocks! Super helpful!
I never took the time to understand em and rem and I've never bothered to use them so thank you for creating this video
Outstanding job on explaining, em and rem and why and how to use them!
Please make a video on - ::before and ::after ( I really don't understand this thing ) and also make a video on - transform and translateX and translateY and also make a video on absolute, relative position in css and also make a video on linear gradient and also make a video on - Explain overflow concepts and Sorry for so much videos but Kevin you explain very well and you are the world's best teacher in the world...I love my teacher Kevin ( Honestly from heart ) - I love you and thank you so much
Glad you're enjoying my videos Mahendra! Don't watch too many of them at once, take some time to practice what you're learning! I actually have quite a few of your suggestions on my list! A video on ::before and ::after should be coming out in a few weeks, and I have something for absolute and relative as well. Thanks for the suggestions though, I'll add the others to my list :)
Kevin your content is SO HELPFUL!
Very useful video!!!! I'm taking the responsive layouts course now and just watched this video! Thanks for posting!!!!! Ok, back to the course. :)
Thanks to you I can understand and apply em and rem, I love to see your videos, God bless you
Came here from "CSS Demystified", great insights in CSS!
you are absolutely the definition of WONDERFULL.good you are on this planet
Still very useful content, glad to see that video, never too late!
Such a good video! Now i not only understand the difference between them, but also when should or shouldn't i use each of them. Very helpful, thank you :)
You are such a clever guy 💪. Thanks for taking the time to create this video and sharing your knowledge.
Such an amazing explanation of em vs rem. great job sir.
simple but extremely concept , thank you so much for delivering it
This channel has an amazing energy and awesome content... thankssss
insane explanation, always used pixels and had problems with responsiveness now i know why!
Thank u very much !
That video is 100 percent clear ..Finally understood why i shouldn't use Pixels in CSS !
Thank you so much! I really appreciate you sharing your knowledge and making things easier to understand
Excellent and thorough explanation of em versus rem. Thank you.
really thank you very very very much , these videos made me understand ,, without it i was lost , thank you really because you love what you do and illustrate each detail
Amazingly useful video!! Thank you sooooo much!!!
this is going to change my game! thank you Kevin
This video helped me greatly, thank you Kevin :)
Great way to explain em and rem Thank you so much!
I don't even use rem & em, but after watching this video now i am interested.
Damn em and rem are AMAZING!! i was using them without really knowing how i could use it to my advantage..
It's also important the ordering of the classes in the CSS file. Both .call-to-action and call-to-action--small has font-size.
call-to-action--small is defined later than call-to-action, therefore font-size property on call-to-action overrides previous one.
Well done, Kevin. Very concise and clear.
Thanks man. This is really clear. It's gonna take some playing around to really sink in but I can see awesome benefits to this.
Do you use percentages for widths and heights or is there still a case for using ems, rems, px in responsive design?
for width and heights use % or vh and vw
Thanks heaps Kevin, I can finally start using em's in my projects now. Could never understand them before.
That just makes my day James, I'm so happy I could help! You won't know how you worked without them once you get used to it!
You made it extremely easy for me. Thank you!
This channel is a gift, superb job thanks a lot Kevin
Hello Kevin ! I like your clear explanation on most confusing css properties. Could you please make a video about 'calc' function in CSS, how and when to use it. Thanks
I finally understand it now! Thank you!
That was super helpful. Thank you so much, Kevin!!
Excellent video, thanks for clarifying this once and for all. The codepen is really helpful too!
thanks, useful video, I wonder what if I don't want to change font size of text when screen become larger?
This is a very helpful video. Just a tip: please consider sitting a little bit back from the camera. It will look much nicer. It looks like your face is dominating the whole screen, although nothing bad with current set-up either.
That's an old video, things look very different now 👍
Thanks for yet another fantastic explanation.
Thank you. I wish I had watched this months ago. :)
Amazingly helpful - thank you Kevin!