Ems & Rems: How to use CSS Units

► ems and rems are relative units. Properties with these units take their sizes from font sizes.
Elements that have properties using the ems unit are sized relative to the parent element. Unless they are a non-typographic property like height, or width. Then they take their size from the font size of the element itself.
ems are really useful for setting things like margins, padding, and border radius that consistent scale. Useful if you expect an element to recur in different sizes across the page. Buttons, for example.
Rems or 'root' ems give us much more consistency through a document as they take their size from a singular source - they reach up to the root html element, and size themselves off of the font size applied to that.
Perfect for setting consistently sized typography. Rems make it easy to resize text with media queries too, as we can just change the base font size applied to the root html element for different screen widths.
► Timestamps:
0:00 Start
1:24 The em unit
3:46 Issues with ems and nested content
5:32 Em units with non-typographic properties
6:48 The rem unit
7:29 Setting font size on the root html element
8:26 Fixing the nesting amplification issue with rems
9:56 Scaling rem font sizes with media queries
10:33 Using ems for consistently scaling visual properties
12:22 Summary
► Get the code:
Starting CodePen codepen.io/craigabourne/pen/N...
Finished CodePen: codepen.io/craigabourne/pen/w...
► Useful links:
CSS Relative Units - thecssworkshop.com/lessons/re...
Em vs rem vs px - engageinteractive.co.uk/blog/...
Font sizing with rem - snook.ca/archives/html_and_cs...
MDN CSS Values & Units: developer.mozilla.org/en-US/d...
► This video is part of the CSS for Absolute Beginners playlist: • CSS for Absolute Begin...
► Social Media:
/ craigabourne
/ craigabourne
► Code & Projects:
github.com/craigabourne
codepen.io/craigabourne

[@craigabourne]

Learn CSS: kzbin.info/aero/PL4cTxE4s2XIYwGURywyDlkfmhmRC5FaUR

[@simonbielik]

One of the best channels. You should be bigger

[@craigabourne]

Not in any rush! Haven't added any JavaScript or React yet. I expect a bit more growth when I get on to those topics

[@thirty3843]

Great format ...wonderful and very understandable presentation.... thank you sir

[@craigabourne]

Thank you! Appreciate the kind words 😊

[@jipeejoce1353]

Your lessons are always great. Appreciate the pace and the CodePen for us to experiment.

[@craigabourne]

Thank you, that's very kind. My pleasure!

[@kjetelhallen3887]

Learning a lot!

[@craigabourne]

Awesome! Glad to hear it Kjetel

[@kirillbrehzkov]

Rems for fonts, got it!

[@craigabourne]

Much easier to scale across devices

[@untildev8530]

Just finished the html playlist and now i'm currently learning css. I'm understanding much much more with your videos than any other udemy course out there. Thanks again for teaching us this amazing content!

[@craigabourne]

Ah that's great to hear. Thank you. I try to be a bit more detailed where I can. My day job is a developer and I'm not sure many of the bigger course creators actually are. Some are, and they're very good. But some course creators make content that can leave people a little short on technical details, which we see in interviews again and again with candidates. Which is the whole rationale behind why i started making videos in the first place I guess!

[@jamesdarnel]

Yes!! My man!

[@craigabourne]

Thanks James! Hope you're good

[@jamesdarnel]

@@craigabourne i am. Need to work harder💪!! Your vids are a HUGE HELP

[@leelaneupane4958]

Always stuck to pixels because I found ems confusing. Not any more! Super helpful video!

[@craigabourne]

Great to hear!

[@veerratliff]

Love it. Good mini refresher

[@craigabourne]

Thanks! Appreciate it 👍

[@caoimheshields4159]

Thank you sooooo much

[@craigabourne]

You're welcome!