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 https://codepen.io/craigabourne/pen/N...
Finished CodePen: https://codepen.io/craigabourne/pen/w...
► Useful links:
CSS Relative Units - https://thecssworkshop.com/lessons/re...
Em vs rem vs px - https://engageinteractive.co.uk/blog/...
Font sizing with rem - https://snook.ca/archives/html_and_cs...
MDN CSS Values & Units: https://developer.mozilla.org/en-US/d...
► This video is part of the CSS for Absolute Beginners playlist: • CSS for Absolute Beginners
► Social Media:
/ craigabourne
/ craigabourne
► Code & Projects:
https://github.com/craigabourne
https://codepen.io/craigabourne
Watch video Ems & Rems: How to use CSS Units online without registration, duration hours minute second in high quality. This video was added by user Craig A. Bourne 13 March 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2,508 once and liked it 147 people.