17- Learn CSS Fundamentals / Units
1 like374 views
This document discusses different units used in CSS including absolute and relative units. Absolute units like pixels and points set fixed sizes, while relative units scale with parent elements. Examples show how percentages, ems, rems, viewport units like vw and vh, and font-based units like vmin and vmax scale elements relative to different contexts. The document recommends choosing relative units when elements need to scale with viewport changes. It also promotes understanding units to build flexible and responsive designs.
17- Learn CSS Fundamentals / Units
- 1. IN A ROCKET Learn front-end development at rocket speed CSS CSS FUNDAMENTALS Units
- 2. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ABSOLUTE UNITS RELATIVE UNITS
- 3. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ABSOLUTE UNITS px pixel 1/96 of 1 inch (96px = 1 inch) pt point 1/72 of 1 inch (72pt = 1 inch) pc pica 12pt = 1pc mm millimeter 1cm = 10mm cm centimeter 10mm = 1cm in inch 2.54 cm = 1 inch
- 4. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com GOOD PRACTICE Pixels are bad for usability: • they don't scale, • they don't help other elements to scale proportionally. Use them only when you really need an exact and fixed size. EXAMPLE border: 1px solid #000; AVOID PIXELS
- 5. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ABSOLUTE UNITS RELATIVE UNITS
- 6. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com RELATIVE UNITS % Percentage Relative to the parent element’s value for that property. em Em Relative to the current font-size of the element. rem Root em Relative to the font-size of the root. ch Character Relative to width of the "0". vw Viewport width Relative to the width of viewport. 1vw = 1/100 of the viewport’s width. vh Viewport height Relative to the height of viewport. 1vw = 1/100 of the viewport’s height. vmin Smaller dimension 1vmin = 1/100 of viewport’s smaller dimension. ex x-height Relative to the height of a lower-case x. vmax Larger dimension 1vmax = 1/100 of viewport’s larger dimension.
- 7. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com RELATIVE UNITS / PERCENTAGE .box { width: 50%; } container: 1000x Box 500px
- 8. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com RELATIVE UNITS / EM .box { font-size: 2em; width: 4em; } font-size: 20px Box 20x4 Container text. 20x2
- 9. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com RELATIVE UNITS / REM :root { font-size: 15px; } .box { font-size: 3rem; width: 6rem; } font-size: 20px Box 15x6 Container text. 15x3
- 10. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com RELATIVE UNITS / REM vs EM EM REM html {font-size: 100%} /* 16px */ h1 { font-size: 2em; margin-bottom: 1em; } p { font-size: 1em; margin-bottom: 1em; } /* 1em = 16px */ /* 1em = 32px */ /* 1em = 16px */ /* 1em = 16px */ html {font-size: 100%} /* 16px */ h1 { font-size: 2rem; margin-bottom: 1rem; } p { font-size: 1rem; margin-bottom: 1rem; } /* 1em = 16px */ /* 1em = 16px */ /* 1em = 16px */ /* 1em = 16px */ [ [
- 11. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com RELATIVE UNITS / VW .box { width: 50vw; } viewport Box 50% of the viewport
- 12. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com RELATIVE UNITS / VH .box { height: 100vh; } viewport Box 100% of the viewport
- 13. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com RELATIVE UNITS / VMIN .box { font-size: 10vmin; } width: 1000px Box 10% of 500px=50px 1vmin = 1vw or 1vh, whichever is smaller. height: 500px
- 14. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com RELATIVE UNITS / VMAX .box { font-size: 10vmax; } width: 1000px Box 1vmax = 1vw or 1vh, whichever is larger. height: 500px 10% of 1000px=100px
- 15. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HOW TO CHOOSE A CSS UNIT Do I need to scale an element when the viewport size changes? What do I want it to scale relative to?
- 16. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ABSOLUTE UNITS RELATIVE UNITS
- 17. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com TOOLS: TYPE SCALE
- 18. Learn front-end development at rocket speed inarocket.com by miguelsanchez.com YOU CAN CONTINUE THIS COURSE FOR FREE ON + READY TO USE CODE + QUIZZES + FREE UPDATES
- 19. We respect your time No more blah blah videos. Just straight to the point slides with relevant information. Ready to use code Real code you can just copy and paste into your real projects. Step by step guides Clear and concise steps to build real use solutions. No missed points. Learn front-end development at rocket speed inarocket.com
- 20. IN A ROCKET Learn front-end development at rocket speed CSS CSS FUNDAMENTALS Units