HomeОбразованиеRelated VideosMore From: Kevin Powell

CSS em and rem explained #CSS #responsive

731 ratings | 15608 views
A look at the CSS units EM and REM, how they work and when you might want to use one over the other! First I take a look at some basic examples of both ems and rems, then move onto some more interesting things with buttons and a call to action, as well how we can take advantage of both the em and rem with media queries. The way the em unit is calculated actually changes depending on if being used for that element's font-size or if it's being used for any other property, and this can be leveraged in some pretty awesome ways! Knowing when to use em vs rem can be a tricky business, but hopefully this video can help put you on the right track! Find the Codepen here: http://codepen.io/kevinpowell/pen/RKdjXe -- New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass -- 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. Instagram: https://www.instagram.com/kevinpowell.co/ Twitter: https://twitter.com/KevinJPowell Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell/
Html code for embedding videos on your blog
Text Comments (86)
David Bailey (19 hours ago)
SCHNIEKY! That's easy! Thanks!!!
Became more clear after watching for the second time.
Rita Pham (16 days ago)
Hi Kevin, can you make a video on reasons why (front-end or web in general) dev should learn JavaScript? I can see many benefits of using JS but using jQuery or Bootstrap is not a bad idea as an alternative but many people say learning JS is a must. Can you make a video explain why? Thanks a lot. I always like and learn a lot from your video!
Kevin Powell (15 days ago)
To get paid more? I wish it were a joke, lol. jQuery is (slowly) falling out of favor, and I think Boostrap already has started to decline. They filled a big need, but one that doesn't really exist anymore. Learning jQuery is fine if that's all you ever need to do, but learning JS opens a lot more doors and paths that you could move down. It's a massive language. Plus, you'll get paid more :P.
Meqdad Moradi (21 days ago)
I didn't understand at all. So confusing
Kevin Powell (21 days ago)
Sorry it wasn't more clear for you!
ינון אלבז (23 days ago)
thanks very very goog guide
Kevin Powell (23 days ago)
No problem, glad you liked it :)
Roronoa Sazzed (1 month ago)
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. 😀😀😀
Kevin Powell (1 month ago)
Glad I could help!
VIKALESH GUPTA (1 month ago)
Hi Kevin, thanks a lot for this tutorial 😀
Kevin Powell (1 month ago)
No problem :)
Kp prasad (1 month ago)
Height in percentages will work ? I tried using height:100% but it was not working Please do help
Kevin Powell (1 month ago)
heights in percentages won't work as a default. There are ways to get it to work, but most of the time I find setting a height at all is a risky thing to do (depending on the context of course!). Perhaps try out the vh unit, which stands for vertical height of the browser window. So 50vh would be a height of 50% of the users browser screen. Might not be what you are after, but maybe it's more what you are after?
udara kasun (2 months ago)
Kevin can you make new video different between display box and display inline
udara kasun (2 months ago)
+Kevin Powell this is the stackoverflow result. You can guide this https://stackoverflow.com/questions/8969381/what-is-the-difference-between-display-inline-and-display-inline-block
Kevin Powell (2 months ago)
Good idea, I'll add it to my list :)
westfield90 (2 months ago)
Thank you
Marco de Rover (3 months ago)
Thanks! I was asking a colleague about why to use EM or REM.. I never found it very useful as I was using it pretty much the same way as I would with pixels mainly using REM but he wasn't clear on explaining why it was the better choice. This is definitely something I have to start using.
Mizan al Harun (4 months ago)
Man, I have fallen in love with your channel. Thanks for making awesome videos.
Kevin Powell (3 months ago)
Glad that you're enjoying my content!
Mir Ashif (4 months ago)
You're awesome!! <3
Pradeep Singh (4 months ago)
Hey please increase the sound. The voice is very low. I have subscribed you because I liked your couple of videos.
Kevin Powell (4 months ago)
I think my newer videos are better sound wise (but please, let me know if they aren't!). And thanks for the sub!
md.warish Ansari (5 months ago)
hey i have problem, suppose i have two headings heading-1 : 2.5rem heading-2 : 0.9 rem but in mediaquery i want every heading to be small to fit container so i put root font-size : 17 px the heading-2 is fine but the heading -1 is becoming large i wanted it also to be small. please tell me how to fix this peoblem
Kevin Powell (5 months ago)
Inside your media query, you could give a new size for h1 as well, you don't only have to change the root font size. It's normal that the relationship changes as the screen size gets bigger
Alejandro Restrepo (5 months ago)
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..
Kevin Powell (5 months ago)
No problem at all!
FootBaLL HighLights (5 months ago)
sir please can you make a video on how a layout any psd easily to html .i got confused every time i saw new design of psd. i converted a design into html and css but when am using bootstrap its get to much complicated for me to setup layout with bootstrap.please make video on it.am waiting for your reply.
Kevin Powell (5 months ago)
I have a whole series where I make a layout from PSD to Bootstrap: https://www.youtube.com/watch?v=uoXFcsTGATg And I have others where I go from design to code, but the others don't use Bootstrap.
Zambo (6 months ago)
60 maybe :D wtf
Kevin Powell (6 months ago)
60 maybe? I made this a long time ago, not sure what you're referencing, lol.
SK Technohub (6 months ago)
Hey Kev! Quick question! rem or em which one is better for responsive design? #AskKev
SK Technohub (6 months ago)
Kevin Powell thankyou so much
Kevin Powell (6 months ago)
A combination of the two! It really depends on the context of what you're styling, and how you want it to work. My general rule of thumb is rem for font-size and em for things like margin and padding, but as usual, there are exceptions to that, but it's a good starting point.
SK Technohub (6 months ago)
So we should use rem for more consistent and responsive page?
George Smith (7 months ago)
good and clear tutorial thanks
Kevin Powell (7 months ago)
That you liked it George :D
Max Weir (8 months ago)
Great tips! cheers.
Kevin Powell (8 months ago)
No problem Max :D
Youssef Elmajbri (9 months ago)
I love the way you make things easier to understand, I love to watch your videos with cup of coffee and practice along with you. Thank you Kevin
Kevin Powell (9 months ago)
Thanks for the kind words Youssef, glad you're enjoying my videos :)
Mahendra Choudhary (9 months 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
Kevin Powell (9 months ago)
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 :)
lina mouss (9 months ago)
love the vid ! excellent teaching !
Kevin Powell (9 months ago)
Thanks a lot, glad you liked it :)
tree.g.b Chen (11 months ago)
rem ... what a terrible name, I always wrongly associate it to relative em haha, thanks for clarify it as root em in this video.
Kevin Powell (11 months ago)
No problem at all, glad it helped clear things up 👍
MSBC (1 year ago)
Excellent explanation, thanks.
Kevin Powell (1 year ago)
No problem :D
Sai Sarvani P (1 year ago)
Kevin! You are Awesome Teacher ! :)
Kevin Powell (1 year ago)
Thank you so much!
Apporva arya (1 year ago)
nice. kevin can u please make a video on making website template using html and css from scratch.thanks
Kevin Powell (1 year ago)
A mix of em, rem and %, depending on the property and what I'm trying to do. I also use vw and vh quite a bit these days as well. The only thing I tend to use px for anymore are borders, or other things that tend to be about 1px in size.
Apporva arya (1 year ago)
kevin in responsive website building what you prefer better px or % or rem?
Apporva arya (1 year ago)
very very thank you kevin
Kevin Powell (1 year ago)
Good luck in your learning, I am self-taught as well, so I know it can be hard at times! I have a few playlists where I build out responsive pages already! https://www.youtube.com/playlist?list=PL4-IK0AVhVjOH5r4GAtlk1-tLUlEdiqXG https://www.youtube.com/playlist?list=PL4-IK0AVhVjMNfaGdUgGfftCHfSPCuAT6 https://www.youtube.com/playlist?list=PL4-IK0AVhVjO0fw0sUh8UCIU10TPlVB4J (This one uses Bootstrap) And I'll be starting another one next week :).
Apporva arya (1 year ago)
kevin thanks for acknowledging my comment. i am a self learner in website designing and it will be a great help if u can teach Responsive websites building using media queries n all or other new web trends. Thanks
omar 23 (1 year ago)
Why are your lips strangely red, do you have lipstick on?
Kevin Powell (7 months ago)
I tend to use rem for font-sizes and em for things like padding and margin.
tiramisu (7 months ago)
Guy makes an educational video at no cost to you and this is what you choose to ask. So, should I use pixels for the root, rems for the higher level parent elements, and ems for the children of those higher level parents? I'm having trouble choosing when I should use what.
Kevin Powell (1 year ago)
Haha, nah, I think they are okay.
omar 23 (1 year ago)
I hope they're not that red in real life, you might need to see a doctor if they are.
Kevin Powell (1 year ago)
A combination of a crappy web cam, and not knowing how to fix it in post production, hah.
Lebone Mokae (1 year ago)
Best explanation! Keep it up. Love your way of explaining things
Kevin Powell (1 year ago)
Thanks so much, glad you liked the vid :)
brainfreeze (1 year ago)
this is a very, very good tutorial. thanks.
Kevin Powell (1 year ago)
Thanks so much, I'm glad you liked it!!
Gurpreet Grewal (1 year ago)
why to use rem if I am comfortable with px?
Gracie Sullivan (3 months ago)
I'd also like to throw in that px can throw ADA errors since they aren't flexible like Kevin mentioned. If you're trying to move up from px you could always use percents as well, they won't throw errors in ADA but I know firefox doesn't necessarily like to play nice with them. I went from px to percents as I got more and more into responsive stuff but I tend to use em's more nowadays because I've found more browsers like them.
Kevin Powell (1 year ago)
No problem using pixels for now, while you learn the basics, then once you're more comfortable with CSS, figuring out rem and em! I come from a background in print design, so I used pixels for a very long time!
Gurpreet Grewal (1 year ago)
thanks but difficult to understand for a beginner like me
Kevin Powell (1 year ago)
Rem and em are flexible units, which makes life much easier when dealing with responsive designs. They scale in relation to each other, and while they can be a little hard to figure out at first, they'll make your life a lot better in the long run.
OnTheArchipelago (1 year ago)
Cool video, cleared up a lot!
Kevin Powell (1 year ago)
Great to hear, I'm glad it helped!
Amir Hesham (1 year ago)
Man, I loved you 👏👏
Kevin Powell (1 year ago)
Glad you enjoyed the video!
Jaffna Tamil (1 year ago)
Thank you!! It's amazing
Kevin Powell (1 year ago)
Your welcome :D
James Pike (1 year ago)
Thanks heaps Kevin, I can finally start using em's in my projects now. Could never understand them before.
Kevin Powell (1 year ago)
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!
Joseph Alvarez (1 year ago)
Hey kev! Quick question. What's your opinion on Bootstrap? When should I/should I not use it?
Kevin Powell (1 year ago)
Awesome! Are you guys brothers by any chance?
Don Alvarez (1 year ago)
+Kevin Powell Thanks kev :) i'm learning a lot. haha
Kevin Powell (1 year ago)
Hah, quick question, but that could be a really long answer! If you only need a nice grid system, I'd either make my own or use a really lightweight framework like http://getskeleton.com/ The advantage of Bootstrap is it *can* save you a lot of time, but the downside is the weight of the whole thing. If I see myself being able to use their navigation, their grid, the card system, their buttons, their image and text helper classes and some of their JS stuff (in other words, if it's a large project), then I'll think about using it. I don't think anyone should be reliant on Bootstrap or any other framework, but I do think it's super important to know how, and when to use it. I also learned A LOT of good practice by using and learning how Bootstrap and Foundation go about things. A lot of smart people created it, so there is a lot to learn from it!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.