Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.