CSS CSS FUNDAMENTALS
Units
IN A ROCKET
Learn front-end development at rocket speed
ABSOLUTE
RELATIVE
UNITS UNITS
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
px pixel
1/96 of 1 inch
(96px = 1 inch)
pt point
1/72 of 1 inch
(72pt = 1 inch)
pc pica 12pt = 1pc
ABSOLUTE
UNITS mm millimeter 1cm = 10mm
cm centimeter 10mm = 1cm
in inch 2.54 cm = 1 inch
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
GOOD
PRACTICE
AVOID PIXELS
Pixels are bad for usability:
Use them only when you
• they don't scale,
really need an exact and
• they don't help other elements fixed size.
to scale proportionally. EXAMPLE
border: 1px solid #000;
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
ABSOLUTE
RELATIVE
UNITS UNITS
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
Relative to the parent element’s
% Percentage 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".
RELATIVE
vw Viewport width Relative to the width of viewport.
1vw = 1/100 of the viewport’s width.
UNITS Relative to the height of viewport.
vh Viewport height 1vw = 1/100 of the viewport’s height.
vmin Smaller dimension 1vmin = 1/100 of viewport’s
smaller dimension.
1vmax = 1/100 of viewport’s
vmax Larger dimension larger dimension.
ex x-height Relative to the height of a lower-case x.
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
RELATIVE UNITS / PERCENTAGE
container: 1000x
.box { width: 50%; } Box
500px
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
RELATIVE UNITS / EM
font-size: 20px
Container text.
.box {
font-size: 2em; Box 20x2
width: 4em;
20x4
}
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
RELATIVE UNITS / REM
font-size: 20px
Container text.
:root { font-size: 15px; }
Box 15x3
.box {
15x6
font-size: 3rem;
width: 6rem;
}
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
RELATIVE UNITS / REM vs EM
EM REM
html {font-size: 100%} /* 16px */ html {font-size: 100%} /* 16px */
h1 { h1 {
font-size: 2rem; /* 1em = 16px */
[font-size: 2em; /* 1em = 16px */
margin-bottom: 1em; /* 1em = 32px */ margin-bottom: 1rem; /* 1em = 16px */
} }
p { p {
font-size: 1rem; /* 1em = 16px */
[font-size: 1em; /* 1em = 16px */
margin-bottom: 1em; /* 1em = 16px */ margin-bottom: 1rem; /* 1em = 16px */
} }
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
RELATIVE UNITS / VW
viewport
.box { Box
width: 50vw; 50% of the viewport
}
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
RELATIVE UNITS / VH
viewport
.box { Box
height: 100vh; 100% of the viewport
}
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
RELATIVE UNITS / VMIN
width: 1000px
Box 10% of 500px=50px
.box {
font-size: 10vmin; height: 500px
}
1vmin = 1vw or 1vh, whichever is smaller.
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
RELATIVE UNITS / VMAX
width: 1000px
.box { Box 10% of 1000px=100px
font-size: 10vmax; height: 500px
}
1vmax = 1vw or 1vh, whichever is larger.
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?
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
ABSOLUTE
RELATIVE
UNITS UNITS
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TOOLS: TYPE SCALE
CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
YOU CAN CONTINUE THIS COURSE FOR FREE ON
inarocket .com
Learn front-end development at rocket speed
+ READY TO USE CODE
+ QUIZZES
+ FREE UPDATES
by miguelsanchez.com
inarocket .com
Learn front-end development at rocket speed
We respect your time
Step by step guides
Ready to use code
No more blah blah videos. Just straight to Clear and concise steps to build real use Real code you can just copy and paste into
the point slides with relevant information. solutions. No missed points. your real projects.
CSS CSS FUNDAMENTALS
Units
IN A ROCKET
Learn front-end development at rocket speed
