From the course: CSS Toolkit: Tips and Techniques for Layout and Styling

Unlock this course with a free trial

Join today to access over 24,700 courses taught by industry experts.

Understanding px, em, and rem units

Understanding px, em, and rem units - CSS Tutorial

From the course: CSS Toolkit: Tips and Techniques for Layout and Styling

Start my 1-month free trial Buy for my team

Understanding px, em, and rem units

“

- [Instructor] When sizing text in CSS, we typically use one of three units, pixels, ems, or rems. Relative units like em and rem are better for responsive design because they adapt to different environments. Em units used to be the standard of the day, but in recent years, the preference is shifting toward the rem unit. So let's break down how each of these work and interact with their context and we'll start with pixels. The pixel is the easiest unit to understand because it's an absolute length. So if you set the font size property of a document to 20 pixels, which we have here, any font that isn't otherwise styled will be exactly 20 pixels. So for example, here, this first paragraph, it doesn't have any specific styling on it, but if we look at our styles here, we can see that it's inheriting a font size of 20 pixels from the root. And this next paragraph, I've explicitly set this to use a font size of 16 pixels. So that's what the font size is. It's always 16 pixels because…

Contents