How to resize text effectively with EM/REM units

Рет қаралды 38,554

2 жыл бұрын

Become a CSS wizard with my 6+ hour masterclass only at chriscourses.com/courses/css/...
Em and Rem units are used to size your text elements relative to one another. By assigning em units to your elements, you can change all of their font sizes at once, simply by changing the font size of the elements' root tag. With rem units, you can change all elements' font size by changing the default font size of your root html tag.
These two units come in very handy if you ever need to scale things up or down as your site grows. When to use each is a little tricky, so let's learn a little more on how to use each with the above video.

Пікірлер: 44

@Heavenira 2 жыл бұрын

Never knew how these units worked, I just kinda threw text in a pile and mixed around their units until my site looked about right. Thank you for this excellent demonstration.

@webizy369 Жыл бұрын

i think i never understand why should i use rem sadly instead of px

@dumptruck3354 Жыл бұрын

@@webizy369 pixels are absolute units whereas ems rems etc are relative units so if a user changes font size in their browser in case of pixels its hard coded so the text will not change but in case of rem units the text will change according to the root element so its better

@kumareshmusk 2 жыл бұрын

Edit's and visual exaplanation literally good 🔥

@floogi123 2 жыл бұрын

This just apreared in my recomended and as a new web developer this was a great and clear comparison between the units! You learn something new every day, and great video!

@ChrisCourses 2 жыл бұрын

Glad it was helpful! I'm still learning every day just as well, so hope to continue sharing my knowledge as I go 🙌

@razerukat2134 Жыл бұрын

The best video for Em and Rem for me. Short and covers what I need to know in just 3 minutes🤩

@jordanroywhite Жыл бұрын

Thank you! I finally took the time today to fully understand these units. By the way, your videos helped me a lot back in 2017-2018 when I was working on a project and needed to use HTML5 Canvas. You’re the man Chris!

@ShreyaskarART 10 ай бұрын

Your chris courses website clone was my first html css project, since then I've been learning and now Ive covered ReactJs. Thanks man! Underrated channel.

@ANSEYA89 Жыл бұрын

Em vs Rem explained in just 3 minutes, brilliant!

@cultistsash 2 жыл бұрын

This was very concise and easy to understand. Thank you. 🤘🏻

@johncharles4146 Жыл бұрын

thanks for the excellent explanation.

@mananwebandall1203 2 жыл бұрын

your videos are of very high quality and awesome content, you deserve more than a Million subs

@ChrisCourses 2 жыл бұрын

I wish man, don't get recommended very often from KZfaq 😅

@QkysenQ Ай бұрын

youtube is pathetic, you are the best!! thank u so much man but i guess it's for the good atleast now i can flex these skills infront of my mates hehe ^-^@@ChrisCourses

@richardparker123 2 жыл бұрын

STRAIGHT TO THE POINT?? OH MY GOSH THANK YOU. Thank you for not drawing this out for 12 minutes. I can’t stand that trend. I’m gonna have to go back and look at more of your videos.

@ChrisCourses 2 жыл бұрын

Thanks man, just started doing some of these concise videos within the past couple of months, so admittedly don't have too many of them. Nevertheless, I think some of the code adventures and shorts are some of my best, so be sure to check them out!

@Hello_VVolf Жыл бұрын

wow, you are so underrated bro. You deserve more views!

@caveman3703 8 ай бұрын

Very good editing and a good explanation

@bluwoo8197 Жыл бұрын

this is beautiful

@BrennanCarpenfield Жыл бұрын

Flawless video!

@AmatuerHourCoding 2 жыл бұрын

Sweet video!

@3bkareeno Жыл бұрын

This is really helpful. Short and to the point. Thank you.

@afrasp570 Ай бұрын

Thanks

@lipi6535 2 жыл бұрын

Awesome explanation.

@ChrisCourses 2 жыл бұрын

Thank you! Was a topic that used to trip me up-figured it could use some detailing.

@kunalrajput4539 Жыл бұрын

great video

@SamiullahKhan 2 жыл бұрын

Why I get the feeling of fireship 😀

@ChrisCourses 2 жыл бұрын

Fireship definitely inspired me to do some ~2 minute videos, he's awesome.

@keyen3 2 жыл бұрын

This is a great video. Have you considered making these a series? Edit: nvm, I see you've made one. Watching now. Thanks

@ChrisCourses 2 жыл бұрын

Thanks to your suggestion haha. Might try some shorts and see how those do, don't mind making these videos, they're typically quick and only take 2 days or so.

@gonglongdong6869 Жыл бұрын

what are cool tools you used for making these cool footages ? :)

@arielp7582 Жыл бұрын

Love how you explained it unlike those other videos that take 25 minutes to explain it. If you need 25 minutes to explain em, them you're not a good teacher 😂

@abrandnewcompany 2 жыл бұрын

Devloper for life

@matthewd8970 Жыл бұрын

So basically, if you use REM units, you only have to change the font-size on the html tag to basically grow/shrink your entire website?

@ulasfakir 3 ай бұрын

i think so

@-aravan 2 жыл бұрын

the vedio is so good but what is the music name i lovet

@lakehighland 2 жыл бұрын

O hell ya nother CC yum yum yum

@SmashBro7510 2 жыл бұрын

here's something fun to do, put the video in 2x speed and spam the left arrow key. Have fun :)

@edmundnokrach5291 2 жыл бұрын

Im gonna be honest, I was suspicous after that gameplay you showed, but it wo

@Pyraptor 2 жыл бұрын

em seems useless because you forgot the main point of em, thats an inherited property, so if you do something like p { font-size: 0.5em } , you can nest p tags and get smaller letters in each level of nesting. Kinda stupid use case anyways.

@Kamil-rf5qn 3 ай бұрын

Why do other youtubers need 15-20 minute videos to explain this concept and babble when this was explained perfectly in less than 3 minutes here....

@scienceblossom6197 Жыл бұрын

I knew this but it doesn't "demystify" it really, how would a normal user who doesn't know dev-tools stuff increase root's font-size? How is it useful? I even read a Medium article on it that it's just hype and pixels are more explicit and readable and rems are one of those big of things that everyone boasts about but has no serious impact.