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