1
00:00:00,030 --> 00:00:05,036
Usually when defining a number 
value, we need to specify a length

2
00:00:05,036 --> 00:00:07,999
or unit of measurement for that 
value. If we don't, the browser

3
00:00:07,999 --> 00:00:13,711
will likely not know what to 
do with that number value.

4
00:00:13,711 --> 00:00:18,000
So CSS offers different units 
for expressing length.

5
00:00:20,251 --> 00:00:24,150
Some length units are more
flexible than others.

6
00:00:24,150 --> 00:00:29,277
For example, relative units and
percentage units are always relative

7
00:00:29,277 --> 00:00:33,892
to other length values, which 
makes it easier for developers to

8
00:00:33,892 --> 00:00:38,440
lay out content independently
of screen size and resolution.

9
00:00:39,740 --> 00:00:45,190
Meanwhile, absolute units like 
pixels are always fixed in relation

10
00:00:45,190 --> 00:00:48,840
to each other. They don't 
scale like relative units do.

11
00:00:50,520 --> 00:00:55,402
As we learned in previous lessons,
many CSS properties take length or

12
00:00:55,402 --> 00:01:03,020
percentage values for font size,
padding, margin, width and more.

13
00:01:03,020 --> 00:01:06,530
When it comes to length values, 
there are several different unit 

14
00:01:06,530 --> 00:01:11,880
types we can use. There are relative 
length units and absolute length units.

15
00:01:13,070 --> 00:01:15,840
We're going to cover 
absolute units first.

16
00:01:17,420 --> 00:01:20,800
There are seven 
absolute units in CSS.

17
00:01:20,800 --> 00:01:24,386
But measurements like inches 
and centimeters are only

18
00:01:24,386 --> 00:01:27,160
useful for the printed page.

19
00:01:27,160 --> 00:01:30,705
The most commonly used screen
measurement is the pixel unit,

20
00:01:30,705 --> 00:01:33,030
which you might be 
familiar with by now.

21
00:01:34,800 --> 00:01:39,000
When we use pixels, the size we 
define will always remain the 

22
00:01:39,000 --> 00:01:43,870
same and will not scale regardless 
of the browser window and size 

23
00:01:43,870 --> 00:01:50,294
of the screen. If we give our 
header a width of 960px,

24
00:01:52,396 --> 00:01:56,671
The header will always take
up 960px of the screen.

25
00:01:58,617 --> 00:02:01,720
We can see what that looks
like in the browser.

26
00:02:01,720 --> 00:02:07,303
It no longer takes up the full
browser width, only 960px.

27
00:02:10,705 --> 00:02:16,546
We can say the same about the pixel
font sizes applied to our headings,

28
00:02:16,546 --> 00:02:23,498
the pixel based border values, or
any value defined with a pixel unit.

29
00:02:23,498 --> 00:02:28,010
They will always remain a fixed
size in relation to each other.

30
00:02:29,570 --> 00:02:32,362
Pixels are a common unit in web 
design, since they allow us 

31
00:02:32,362 --> 00:02:37,361
to size and position elements 
precisely on a page. And CSS

32
00:02:37,361 --> 00:02:42,318
pixels are cool because they are 
considered device-independent.

33
00:02:42,318 --> 00:02:47,982
Even though not all screens have the 
same number of pixels per square inch

34
00:02:47,982 --> 00:02:53,697
an element measuring 10 pixels in
CSS will appear to be the same size

35
00:02:53,697 --> 00:02:58,851
whether on a high-resolution 
screen or a low-resolution screen,

36
00:02:58,851 --> 00:03:03,690
helping you maintain consistency in your
designs with one simple measurement.