Using CSS Units correctly: Pixels and Percentages
► Modern CSS units allow us to set the sizes of a whole host of CSS properties.
There are a range of different measurement units like pixels, rems and ems, vh and vw, vmin, vmax, %, millimeters, inches, centimeters, points, quarter millimeters, and many others.
There is no need to know all of these. Over the next few videos, we will look at which ones we should know, and in which circumstances developers use them today.
This video covers the difference between absolute and relative units. We look at one of each type in. Pixels for defining fixed sizes, and percentages for relative or adaptive sizes.
► Timestamps:
00:00 Start
01:50 Types of absolute & relative units
02:35 Specifying a unit
02:58 Pixels
04:21 Relative Units & percentages
05:41 Demonstrating percentages in Codepen
07:47 How percentages work differently with line-height
09:28 Checking how percentages work on given properties on MDN
09:46 Summary
► Get the code:
Starting CodePen - https://codepen.io/craigabourne/pen/w...
End CodePen - https://codepen.io/craigabourne/pen/K...
► Useful links:
CSS Absolute Units - https://www.w3.org/TR/css-values-3/
CSS Relative Units - https://thecssworkshop.com/lessons/re...
Em vs rem vs px - https://engageinteractive.co.uk/blog/...
MDN CSS Pixel - https://developer.mozilla.org/en-US/d...
A pixel is not a pixel: https://www.quirksmode.org/blog/archi...
MDN Percentages - 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 Using CSS Units correctly: Pixels and Percentages online without registration, duration hours minute second in high quality. This video was added by user Craig A. Bourne 08 March 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 3,398 once and liked it 152 people.