- [Voiceover] In this movie, I want to cover another topic
that you're gonna come across again, and again,
and again when learning CSS.
That is, how to declare units of measurement
for certain properties.
Now man of the property values that you'll see in CSS
require what's known as as a length.
Within a specification, you'll often see them refered
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 unite of measurement.
In CSS syntax, there is no white space 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 gonna 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 the time, you're gonna see units referred to in
the specifications as being either absolute or relative,
and that's typically how you're gonna 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 in exact measurement,
and are typically used when the physical properties
of the user agent is known.
Okay, so what does that mean?
Well, if we take a look at absolute values,
it'll become a little clearer,
so inches, centimeters, millimeters,
quarter millimeters, points, picas, and pixels
are all listed as absolute values.
Let's ignore pixels for a moment,
since they work a little bit differently.
All of these other units work fine,
if used without output devices, when you know
exactly what size you'll be dealing with.
Like a printer, for example.
However, for user agents that have different
sizes, resolutions, and rendering intents,
these units aren't optimal.
In fact, the specification says,
that if a user agent doesn't explicitly support the unit,
the value should be approximated,
so in many ways, you'd be getting your devices best guess.
These types of units, especially inches, points, and picas,
work great for print style sheets,
but not so great for screen devices.
I wanna discuss pixels separately because although
they are grouped with absolute values,
pixels don't really function exactly like the others.
Pixels are a foundational unit of measurement for the web,
so it's important as a web designer,
that you understand how they work.
First, you have to understand the difference
between a device pixel, and a reference pixel.
Device pixels refer to the individual pixels
that make up a devices screen.
For example, here we have a simulated
low resolution and high resolution screen.
Notice that the high resolution screen contains more pixels.
In the past, pixel width, defined through CSS,
would roughly equal the same as the device pixel itself.
However, higher resolution displays
have made this impracticable.
As their device pixels have become increasingly small.
If CSS pixels mapped to these devices,
pixels, text, images, and interfaces
would be tiny and hard to read.
To address this, the W3C created
what is known as a reference pixel.
The definition for them is fairly technical,
but the result is an abstract value,
that roughly equals 1/96th of an inch
based on the distance of the viewer.
In this way, a CSS pixel can equal as many device pixels
as needed to achieve consistent sizes.
This is great in theory, but the truth is
that the size of the pixel is relative to the display
of the device it's shown on.
A pixel on a 1024 x 768 display,
is much bigger than the one shown on a 1440 x 900 display.
After all, it's not the size of the monitor that changes
when you change resolution, just the size of the pixels.
Just keep in min that while 16 pixels
will always be 16 pixels.
It won't always be the same size.
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, root ems, exes,
character units, viewport width, viewport height,
viewport minimum, and viewport maximum.
Let's take a brief look at these.
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 does indeed come from typography,
and it roughly means the value of text at it's default size.
As you can see her for example,
if somebody sets their browser's default font size
to 16 pixels, one em for that particular page
is gonna 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 one em is equal to the value of
ts parent elements 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 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 paragraphs ems,
would all be bassed 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 font-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 probably remember
me saying that the value of an em changes
based on where it's used.
If an em value is set outside a font size,
it's equal to the computed size
of the text of the element.
I know that sounds confusing, s let me try to walk you
through this, in the hopes that I can make some sense of it.
Okay, 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 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.
Alright, let's say that whatever device we're on,
its default font size is 16 pixels.
Okay, so if we go to font-size, that's two ems,
so two times 16, we would calculate out
to 32 pixels of font size, so it's very tempting here
to say okay, so the bottom margin would be 16 pixels,
but no, that's not true.
Remember, if an em is used outside of font size,
it's relative to the size of that unit, that element,
so it's gonna look for that actual font size of the h1,
so in this case one em, since our h1 calculated out
the 32 pixels of font size, is equal to 32 pixels
in this case, so there's always that 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 exes, root ems, and character units,
they're similar to ems.
Exes are like ems, they're just based on
the x-height of a font.
Root ems are an intriguing addition to CSS.
One of the biggest problems with using ems,
is that they're always relative to their parent.
This can cause big problems with complex layouts
and structures, as it becomes hard to keep track
of all the relationships, and nesting elements
can cause text to shrink, or scale up unexpectedly.
Root ems always size text relative to the root element,
so they give you a much more consistent starting point
for sizing text and other elements.
The character unit is defined as equaling
the zero character in the font, so in that sense
it's similar to ems and exes.
Viewport width, height, maximum, and minimums,
all allow you to size elements relative to the viewport.
Viewport width and height are each equal
to 1/100th of the viewport itself.
While viewport minimum and maximum values
are equal to 1/100th of the minimum and maximum
values of the viewport respectively.
These values aren't fully supported yet,
so you should research them and use them with care.
I wanna mention one last unit of measurement that
isn't contained in the relative or absolute value groupings.
Even though I always kind of consider it to be
a relative unit, and that is percentages.
Percentages are exactly what you think.
If you size an elements width to 80% for example,
it's computed size will be 80% of it's parent element.
Text to the size with percentages calculates
the value based on the parent element.
Percentages are great for building responsive layouts,
that react to the size of the screen
or device on which it's viewed,
so it's really good if the user might for example,
change sizes on it every now and then.
Keeping track of all the various units of measurement in CSS
can be tricky, but don't be to concerned
by 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 print designs.
Either way, you should be aware of what your options are
when defining lengths for CSS properties.