New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

CSS Fundamentals
Illustration by

Common units of measurement


From:

CSS Fundamentals

with James Williamson

Video: Common units of measurement

In this movie, I want to cover another topic that you're going to come across again and again and again when learning CSS, that is, how to declare units of measurements for certain properties. Now many of the property values that you'll see in CSS require what's known as a length. Within the specification, you'll often see them referred to like this, where the length notation is in brackets. So, what's a length? Well, a length is really nothing more than a numeric value followed by a unit of measurement. In CSS syntax, there is no whitespace between the number and the unit itself.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
CSS Fundamentals
3h 14m Beginner Sep 26, 2011 Updated Dec 13, 2011

Viewers: in countries Watching now:

This course contains a high-level overview of Cascading Style Sheets, while exploring the basic concepts, terminology, and tools of the language. Beginning with an exploration of CSS syntax, author James Williamson explains how CSS modifies text, borders, backgrounds, and color; demonstrates CSS and HTML integration; and contextualizes the current state of CSS. The course also tours some of the most popular CSS editors and frameworks and lists online tools and resources for further study. This course is for people who want a big-picture overview before taking hands-on courses.

Topics include:
  • Understanding basic selector types
  • Integrating CSS with HTML
  • Examining browser rendering differences
  • Exploring CSS specifications
  • Checking browser support
  • Understanding the box model
  • Adjusting margins and padding
  • Positioning elements
  • Exploring basic layout concepts
  • Understanding media queries
  • Introducing CSS3
  • Using CSS Reset
Subjects:
Web Web Foundations
Software:
CSS
Author:
James Williamson

Common units of measurement

In this movie, I want to cover another topic that you're going to come across again and again and again when learning CSS, that is, how to declare units of measurements for certain properties. Now many of the property values that you'll see in CSS require what's known as a length. Within the specification, you'll often see them referred to like this, where the length notation is in brackets. So, what's a length? Well, a length is really nothing more than a numeric value followed by a unit of measurement. In CSS syntax, there is no whitespace between the number and the unit itself.

There are a couple of exceptions to this rule, but by and large, this is the syntax that you're going to be using. Obviously, if you're not familiar with the units of measurement in CSS and when it's appropriate to use one over another, declaring values for properties can get a little confusing. Most of the time, you're going to see units referred to in the specifications as being either absolute or relative, and that's typically how you're going to see them grouped when referenced. Let's take a closer look at those unit types and when it's appropriate to use one over another.

Absolute values, which are sometimes referred to as fixed values specify an exact measurement and are typically used when the physical properties of the user agent is known. Great. So what does that mean? Well, if you take a look at the absolute values, it becomes a little bit clear. Inches, centimeters, millimeters, points, and picas, those are all absolute values. Now for output devices where you know exactly what size you're going to be dealing with, say, a printer, those units work just fine. However, for user agents that may have different sizes, resolutions, things like rendering intents, these units aren't exactly optimal.

Now that leaves us with relative units. These are called relative units because their value is relative to the length of another property. These units are ems; exes; pixels; grids; root ems; viewport width; viewport height; a viewport minimum, which is based on the width and height--whichever one is smaller--and character width, which is typically based on the width of the zero character of a font. Now, I'm betting that a lot of the guys are seeing some of these units for the first time, so let's talk about them in just a little bit more detail. At first, I need to point out that several of these units are brand new in CSS3, and they're not fully supported yet.

Others aren't as widely used, or maybe they're used for very, very specific purposes like grids, and grids are new to CSS3. They're widely used for East Asian typography, so, very narrow usage set there. They in fact refer to the layout grid used in the CSS3 Text module. Now viewport width, height, and minimums are also new to CSS3, and they allow you to size elements relative to the viewport, which is really cool, but unfortunately they don't have widespread support just yet. Now that leaves us with ems, exes, root ems, and pixels. I want to talk about pixels first, because a lot of people think that pixels should be an absolute value, like inches or points.

The truth is, however, that the size of pixel is actually relative to the display of the device that it's shown on. Let me show you what I'm talking about. A pixel on a 1024x768 display is a lot bigger than the one shown on a 1440x900 display. After all, not the size of the monitor that changes when you change the resolution, just the size of the pixels. Pixels are one of the workhorse units in web design, and you'll see them used inside over and over again. You just need to keep in mind that while sixteen pixels will always be sixteen pixels, it won't always be the same size.

Ems, exes, and roots are also all fairly similar. If you're a graphic designer, I'm betting that ems probably look familiar to you. The name doesn't indeed come from typography, and it roughly means the value of text at its default size. As you can see here, for example, if somebody sets their browser's default font-size to 16 pixels, 1 em for that particular page is going to be equal to 16 pixels. You do need to understand, however, that the value of an em changes depending upon where it's used within your CSS.

If it's used to define the size of fonts, then 1 em is equal to the value of its parent element's font size. Now, essentially all that means is that an em tells an element to calculate its size relative to the size of the parent. This means that you can set one value for the body element and then set all the headings and paragraphs relative to that value. So here, for example, if you set the body font-size to 100%, now the h1, h2, h3 and paragraph's ems will all be based on that body size, because the body is the parent element of those elements.

Now the added beauty of this technique is that the starting size of the text is up to the device itself, whether it's a desktop browser or it's a mobile device, or even if the user has changed the font- size to compensate for say a vision disability. Now in those cases, the overall file size will get bigger or smaller, but the relationship between the elements will stay exactly the same. Now, if you're still with me, you'll probably remember me saying that the value of an em changes based on where it's used. If an em value set outside of font-size, it's equal to the computed size of the text of that element.

I know that sounds confusing, so let me try to walk you through this, in the hopes that I can make some sense of it. So here we have a rule set on h1. We're using ems for both font-size and margin, but remember, the rules on how an em's size is calculated changes based on whether it's defined in font-size or outside of font-size. So let's take a look at that. Let's say that whatever device we're on, its default font size is 16 pixels. So if we go to font-size, that's 2 ems. So two times 16, we've calculated out to 32 pixels of font-size.

So it's very tempting here to say, oh, okay, so the bottom-margin would be 16 pixels, but no, that's not true. Remember, if an em is used outside a font-size, it's relative to the size of that unit, that element. So it's going to look for the actual font-size of the h1. So in this case 1 em since our h1 calculated out to 32 pixels of font-size is equal to 32 pixels in this case. So there is always a slightly different calculation for that em based on whether it's part of the font size or part of another property.

I know that may seem a little confusing to you, but the more you do it I promise you the easier it is to make sense of all that. As for the remaining two relative values, exes and root ems, they're very similar to ems. Exes are a lot like ems; they're just based on the x-height of the font. Now, root ems are a very intriguing addition to CSS3. Root ems always size text relative to the root element, which is usually the body tag, so they give you a much more consistent starting point for sizing text in the other elements. Now I need to point out their support isn't complete yet, but hopefully we'll be able to use root ems without hesitation in the near future.

I want to mention one last unit of measurement that isn't contained in the relative or absolute value groupings, even though I always considered it to be a relative unit, and that is percentages. Percentages are exactly what you think. If you size an element's width to 80%, for example, its computed size will be 80% of its parent element. Text the size with percentage calculates the value based on the parent element. Percentages are great for building fluid layouts that react to size of the screen or device on which it's viewed, so it's really good if the user might, for example, change sizes every now and then.

Now keeping track of all the various units of measurement in CSS can be tricky, but don't be too concerned about what you've seen here. Unless you're dealing with really specific circumstances, you're more likely to just use a mixture of pixels, ems, and percentages for screen designs, and then inches, points, and picas for our print designs. Either way, you should be aware of what your options are when defining lengths for CSS properties.

Find answers to the most frequently asked questions about CSS Fundamentals.


Expand all | Collapse all
please wait ...
Q: This course was updated on 12/13/2011. Can you tell me what has changed?
A: One movie called "Who is this course for?" was added to provide information on what you can expect to get from the course, depending on your level of familiarity with CSS.
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.