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.