CSS: An Overview
Pixels and ems

Great work! We'll do more with colors as you learn more CSS.

When we've asked you to adjust font size, we've specified that the unit you should use is px (for "pixels"), like so:

p {
    font-size: 10px;

A pixel is a dot on your computer screen. Specifying font sizes in pixels is great when you want the user to see exactly on their screen what you designed on yours, though it assumes your screens are of similar size.

What if the user is using a screen that's a very different size from yours, though (like a smartphone screen)? Enter ems. (Don't confuse these with the <em></em> tags we use for emphasis!)

The font-size unit em is a relative measure: one em is equal to the default font size on whatever screen the user is using. That makes it great for smartphone screens, since it doesn't try to tell the smartphone exactly how big to make a font: it just says, "Hey, 1em is the font size that you normally use, so 2em is twice as big and 0.5em is half that size!"

Check it out: we've set three different paragraphs to the font-sizes 1em, 0.5em, and 2em. For now, use whichever unit (px or em) you're more comfortable with—we just wanted to show you em now so you're not surprised when you see it later.


Hit Save & Submit Code to continue.

View Preview