Flash cards
Review the key moves
What is the main idea behind CSS Units?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Put the learning moves in the order that makes the concept easiest to apply.
CSS units are used to define the length and size of several properties.
Several CSS properties take "length" values, such as font-size , width , margin , padding , border , etc.
CSS has two types of units
- Absolute units
- Relative units
CSS Absolute Units
Absolute units are fixed, and the length expressed in any of these will appear exactly that size.
Absolute units do NOT change when the screen size change, and are not recommended for websites. However, they can be used if the output medium is known, such as for print layout.
The most used absolute unit is px (pixels).
CSS Relative Units
Relative units specify a length relative to another length property (like parent element, root element, or viewport).
Relative length units scale better between different screen sizes, making them ideal for responsive web design.
The two most used relative units are em and rem .
Tip
The em and rem units are perfect for creating scalable and responsive websites!