1
00:00:00,000 --> 00:00:03,990
In this movie, I want to cover another topic that you're going to come across

2
00:00:04,000 --> 00:00:05,990
again and again and again when learning CSS,

3
00:00:06,000 --> 00:00:09,990
that is, how to declare units of measurements for certain properties.

4
00:00:10,000 --> 00:00:15,990
Now many of the property values that you'll see in CSS require what's known as a length.

5
00:00:16,000 --> 00:00:20,990
Within the specification, you'll often see them referred to like this, where the

6
00:00:21,000 --> 00:00:22,990
length notation is in brackets.

7
00:00:23,000 --> 00:00:23,990
So, what's a length?

8
00:00:24,000 --> 00:00:28,990
Well, a length is really nothing more than a numeric value followed by a unit of measurement.

9
00:00:29,000 --> 00:00:33,990
In CSS syntax, there is no whitespace between the number and the unit itself.

10
00:00:34,000 --> 00:00:37,990
There are a couple of exceptions to this rule, but by and large, this is the

11
00:00:38,000 --> 00:00:39,990
syntax that you're going to be using.

12
00:00:40,000 --> 00:00:43,990
Obviously, if you're not familiar with the units of measurement in CSS and when

13
00:00:44,000 --> 00:00:47,990
it's appropriate to use one over another, declaring values for properties can

14
00:00:48,000 --> 00:00:49,990
get a little confusing.

15
00:00:50,000 --> 00:00:52,990
Most of the time, you're going to see units referred to in the specifications as

16
00:00:53,000 --> 00:00:57,990
being either absolute or relative, and that's typically how you're going to see

17
00:00:58,000 --> 00:00:59,990
them grouped when referenced.

18
00:01:00,000 --> 00:01:02,990
Let's take a closer look at those unit types and when it's appropriate to

19
00:01:03,000 --> 00:01:04,990
use one over another.

20
00:01:05,000 --> 00:01:08,990
Absolute values, which are sometimes referred to as fixed values specify an

21
00:01:09,000 --> 00:01:12,990
exact measurement and are typically used when the physical properties of the

22
00:01:13,000 --> 00:01:15,990
user agent is known. Great.

23
00:01:16,000 --> 00:01:16,990
So what does that mean?

24
00:01:17,000 --> 00:01:20,990
Well, if you take a look at the absolute values, it becomes a little bit clear.

25
00:01:21,000 --> 00:01:23,990
Inches, centimeters, millimeters, points, and picas,

26
00:01:24,000 --> 00:01:25,990
those are all absolute values.

27
00:01:26,000 --> 00:01:29,990
Now for output devices where you know exactly what size you're going to be

28
00:01:30,000 --> 00:01:30,990
dealing with, say, a printer,

29
00:01:31,000 --> 00:01:33,990
those units work just fine.

30
00:01:34,000 --> 00:01:37,990
However, for user agents that may have different sizes, resolutions, things like

31
00:01:38,000 --> 00:01:41,990
rendering intents, these units aren't exactly optimal.

32
00:01:42,000 --> 00:01:44,990
Now that leaves us with relative units.

33
00:01:45,000 --> 00:01:47,990
These are called relative units because their value is relative to the length

34
00:01:48,000 --> 00:01:49,990
of another property.

35
00:01:50,000 --> 00:01:55,990
These units are ems; exes; pixels; grids; root ems; viewport width; viewport

36
00:01:56,000 --> 00:01:58,990
height; a viewport minimum, which is based on the width and height--whichever one

37
00:01:59,000 --> 00:02:02,990
is smaller--and character width, which is typically based on the width of the

38
00:02:03,000 --> 00:02:04,990
zero character of a font.

39
00:02:05,000 --> 00:02:07,990
Now, I'm betting that a lot of the guys are seeing some of these units for the first time,

40
00:02:08,000 --> 00:02:09,990
so let's talk about them in just a little bit more detail.

41
00:02:10,000 --> 00:02:14,990
At first, I need to point out that several of these units are brand new in CSS3,

42
00:02:15,000 --> 00:02:17,990
and they're not fully supported yet.

43
00:02:18,000 --> 00:02:20,990
Others aren't as widely used, or maybe they're used for very, very specific

44
00:02:21,000 --> 00:02:23,990
purposes like grids, and grids are new to CSS3.

45
00:02:24,000 --> 00:02:26,990
They're widely used for East Asian typography,

46
00:02:27,000 --> 00:02:28,990
so, very narrow usage set there.

47
00:02:29,000 --> 00:02:32,990
They in fact refer to the layout grid used in the CSS3 Text module.

48
00:02:33,000 --> 00:02:36,990
Now viewport width, height, and minimums are also new to CSS3, and they allow you

49
00:02:37,000 --> 00:02:40,990
to size elements relative to the viewport, which is really cool, but

50
00:02:41,000 --> 00:02:43,990
unfortunately they don't have widespread support just yet.

51
00:02:44,000 --> 00:02:46,990
Now that leaves us with ems, exes, root ems, and pixels.

52
00:02:47,000 --> 00:02:50,990
I want to talk about pixels first, because a lot of people think that pixels

53
00:02:51,000 --> 00:02:53,990
should be an absolute value, like inches or points.

54
00:02:54,000 --> 00:02:57,990
The truth is, however, that the size of pixel is actually relative to the

55
00:02:58,000 --> 00:02:59,990
display of the device that it's shown on.

56
00:03:00,000 --> 00:03:00,990
Let me show you what I'm talking about.

57
00:03:01,000 --> 00:03:08,990
A pixel on a 1024x768 display is a lot bigger than the one shown on a 1440x900 display.

58
00:03:09,000 --> 00:03:11,990
After all, not the size of the monitor that changes when you change the

59
00:03:12,000 --> 00:03:14,990
resolution, just the size of the pixels.

60
00:03:15,000 --> 00:03:18,990
Pixels are one of the workhorse units in web design, and you'll see them used

61
00:03:19,000 --> 00:03:19,990
inside over and over again.

62
00:03:20,000 --> 00:03:24,990
You just need to keep in mind that while sixteen pixels will always be sixteen pixels,

63
00:03:25,000 --> 00:03:26,990
it won't always be the same size.

64
00:03:27,000 --> 00:03:30,990
Ems, exes, and roots are also all fairly similar.

65
00:03:31,000 --> 00:03:35,990
If you're a graphic designer, I'm betting that ems probably look familiar to you.

66
00:03:36,000 --> 00:03:39,990
The name doesn't indeed come from typography, and it roughly means the value of

67
00:03:40,000 --> 00:03:43,990
text at its default size. As you can see here, for example, if somebody sets

68
00:03:44,000 --> 00:03:49,990
their browser's default font-size to 16 pixels, 1 em for that particular page is

69
00:03:50,000 --> 00:03:51,990
going to be equal to 16 pixels.

70
00:03:52,000 --> 00:03:54,990
You do need to understand, however, that the value of an em changes depending

71
00:03:55,000 --> 00:03:57,990
upon where it's used within your CSS.

72
00:03:58,000 --> 00:04:02,990
If it's used to define the size of fonts, then 1 em is equal to the value of its

73
00:04:03,000 --> 00:04:03,990
parent element's font size.

74
00:04:04,000 --> 00:04:08,990
Now, essentially all that means is that an em tells an element to calculate its

75
00:04:09,000 --> 00:04:11,990
size relative to the size of the parent.

76
00:04:12,000 --> 00:04:14,990
This means that you can set one value for the body element and then set all the

77
00:04:15,000 --> 00:04:18,990
headings and paragraphs relative to that value.

78
00:04:19,000 --> 00:04:24,990
So here, for example, if you set the body font-size to 100%, now the h1, h2, h3

79
00:04:25,000 --> 00:04:29,990
and paragraph's ems will all be based on that body size, because the body is the

80
00:04:30,000 --> 00:04:31,990
parent element of those elements.

81
00:04:32,000 --> 00:04:34,990
Now the added beauty of this technique is that the starting size of the text

82
00:04:35,000 --> 00:04:40,990
is up to the device itself, whether it's a desktop browser or it's a mobile

83
00:04:41,000 --> 00:04:45,990
device, or even if the user has changed the font- size to compensate for say a vision disability.

84
00:04:46,000 --> 00:04:49,990
Now in those cases, the overall file size will get bigger or smaller, but the

85
00:04:50,000 --> 00:04:52,990
relationship between the elements will stay exactly the same.

86
00:04:53,000 --> 00:04:57,990
Now, if you're still with me, you'll probably remember me saying that the value of

87
00:04:58,000 --> 00:05:00,990
an em changes based on where it's used.

88
00:05:01,000 --> 00:05:04,990
If an em value set outside of font-size, it's equal to the computed size of the

89
00:05:05,000 --> 00:05:05,990
text of that element.

90
00:05:06,000 --> 00:05:07,990
I know that sounds confusing,

91
00:05:08,000 --> 00:05:11,990
so let me try to walk you through this, in the hopes that I can make some sense of it.

92
00:05:12,000 --> 00:05:13,990
So here we have a rule set on h1.

93
00:05:14,000 --> 00:05:18,990
We're using ems for both font-size and margin, but remember, the rules on how an

94
00:05:19,000 --> 00:05:22,990
em's size is calculated changes based on whether it's defined in font-size or

95
00:05:23,000 --> 00:05:23,990
outside of font-size.

96
00:05:24,000 --> 00:05:25,990
So let's take a look at that.

97
00:05:26,000 --> 00:05:29,990
Let's say that whatever device we're on, its default font size is 16 pixels.

98
00:05:30,000 --> 00:05:34,990
So if we go to font-size, that's 2 ems. So two times 16,

99
00:05:35,000 --> 00:05:36,990
we've calculated out to 32 pixels of font-size.

100
00:05:37,000 --> 00:05:40,990
So it's very tempting here to say, oh, okay, so the bottom-margin would be 16

101
00:05:41,000 --> 00:05:42,990
pixels, but no, that's not true.

102
00:05:43,000 --> 00:05:49,990
Remember, if an em is used outside a font-size, it's relative to the size of

103
00:05:50,000 --> 00:05:50,990
that unit, that element.

104
00:05:51,000 --> 00:05:53,990
So it's going to look for the actual font-size of the h1.

105
00:05:54,000 --> 00:05:58,990
So in this case 1 em since our h1 calculated out to 32 pixels of font-size is

106
00:05:59,000 --> 00:06:00,990
equal to 32 pixels in this case.

107
00:06:01,000 --> 00:06:04,990
So there is always a slightly different calculation for that em based on whether

108
00:06:05,000 --> 00:06:07,990
it's part of the font size or part of another property.

109
00:06:08,000 --> 00:06:11,990
I know that may seem a little confusing to you, but the more you do it I promise

110
00:06:12,000 --> 00:06:14,990
you the easier it is to make sense of all that.

111
00:06:15,000 --> 00:06:18,990
As for the remaining two relative values, exes and root ems, they're very similar to ems.

112
00:06:19,000 --> 00:06:21,990
Exes are a lot like ems; they're just based on the x-height of the font.

113
00:06:22,000 --> 00:06:26,990
Now, root ems are a very intriguing addition to CSS3.

114
00:06:27,000 --> 00:06:30,990
Root ems always size text relative to the root element, which is usually the body tag,

115
00:06:31,000 --> 00:06:34,990
so they give you a much more consistent starting point for sizing text in

116
00:06:35,000 --> 00:06:35,990
the other elements.

117
00:06:36,000 --> 00:06:39,990
Now I need to point out their support isn't complete yet, but hopefully we'll be

118
00:06:40,000 --> 00:06:42,990
able to use root ems without hesitation in the near future.

119
00:06:43,000 --> 00:06:46,990
I want to mention one last unit of measurement that isn't contained in the

120
00:06:47,000 --> 00:06:48,990
relative or absolute value groupings,

121
00:06:49,000 --> 00:06:53,990
even though I always considered it to be a relative unit, and that is percentages.

122
00:06:54,000 --> 00:06:57,990
Percentages are exactly what you think. If you size an element's width to 80%, for example,

123
00:06:58,000 --> 00:07:01,990
its computed size will be 80% of its parent element.

124
00:07:02,000 --> 00:07:05,990
Text the size with percentage calculates the value based on the parent element.

125
00:07:06,000 --> 00:07:09,990
Percentages are great for building fluid layouts that react to size of the

126
00:07:10,000 --> 00:07:10,990
screen or device on which it's viewed,

127
00:07:11,000 --> 00:07:14,990
so it's really good if the user might, for example, change sizes every now and then.

128
00:07:15,000 --> 00:07:18,990
Now keeping track of all the various units of measurement in CSS can be tricky,

129
00:07:19,000 --> 00:07:21,990
but don't be too concerned about what you've seen here.

130
00:07:22,000 --> 00:07:25,990
Unless you're dealing with really specific circumstances, you're more likely to

131
00:07:26,000 --> 00:07:30,990
just use a mixture of pixels, ems, and percentages for screen designs, and then

132
00:07:31,000 --> 00:07:32,990
inches, points, and picas for our print designs.

133
00:07:33,000 --> 00:07:35,990
Either way, you should be aware of what your options are when defining

134
00:07:36,000 --> 00:07:46,000
lengths for CSS properties.