1
00:00:00,570 --> 00:00:05,770
In our CSS, we've used a lot of helpful
properties to add color to the page.

2
00:00:05,770 --> 00:00:09,490
Such as color, background color, and
border.

3
00:00:09,490 --> 00:00:13,610
CSS uses a few different ways to identify
color.

4
00:00:13,610 --> 00:00:19,910
Two types are color keywords like red,
green and blue and hexadecimal colors.

5
00:00:19,910 --> 00:00:21,350
We'll learn more about those in a minute.

6
00:00:22,520 --> 00:00:27,310
Color keywords are black, silver, gray,
white,

7
00:00:27,310 --> 00:00:32,360
maroon, red, purple, fuchsia, green, lime,
olive, yellow, navy, blue, teal and aqua.

8
00:00:34,020 --> 00:00:37,520
RGB stands for red, green and blue.

9
00:00:37,520 --> 00:00:42,500
And when you're using a hexadecimal number
to write these colors,

10
00:00:42,500 --> 00:00:46,670
you represent each color with two number
or letters.

11
00:00:46,670 --> 00:00:50,860
So two for red, two for green, and two for
blue.

12
00:00:50,860 --> 00:00:55,770
Hex colors always begin with a hash or
pound, followed by rrggbb, or

13
00:00:55,770 --> 00:01:01,590
the abbreviated version of just rgb.

14
00:01:01,590 --> 00:01:05,810
An abbreviated three digit form is
sometimes used when each pair of

15
00:01:05,810 --> 00:01:08,430
colors repeat the same character.

16
00:01:08,430 --> 00:01:16,607
For example, if the color is 0099cc, we
could just write the shorthand of 09c.

17
00:01:16,607 --> 00:01:19,250
In our code, you can see a few examples of
each.

18
00:01:19,250 --> 00:01:22,370
Here at the top, we have a six digit hex
color,

19
00:01:22,370 --> 00:01:25,810
and here in our body, we have a three
digit hex color.

20
00:01:25,810 --> 00:01:27,910
When you position your mouse over the
color,

21
00:01:27,910 --> 00:01:31,780
you should be able to get a preview in the
workspace like this.

22
00:01:33,090 --> 00:01:37,210
The next important feature I want to talk
about is the font family.

23
00:01:37,210 --> 00:01:40,270
Fonts are an important part of the design
aesthetic.

24
00:01:40,270 --> 00:01:44,990
Text, whether on the web or in print
conveys a particular message.

25
00:01:44,990 --> 00:01:48,680
And your choice of fonts can greatly
reinforce that message.

26
00:01:48,680 --> 00:01:50,840
Bring out the personality of your website.

27
00:01:52,300 --> 00:01:55,510
When features of CSS were first
implemented into the browser.

28
00:01:55,510 --> 00:02:00,120
The technology became available to display
fonts that weren't installed in

29
00:02:00,120 --> 00:02:01,550
your computer.

30
00:02:01,550 --> 00:02:05,960
This means you can now choose from a much
larger selection of fonts for

31
00:02:05,960 --> 00:02:07,150
your webpage.

32
00:02:07,150 --> 00:02:09,600
Then you could just a few years ago.

33
00:02:09,600 --> 00:02:11,860
In order to take full advantage of this,

34
00:02:11,860 --> 00:02:16,110
let's use Google web fonts to access a
wide range of fonts for your web page.

35
00:02:17,300 --> 00:02:22,160
If you follow the link in the teacher's
notes to pick your Google fonts you can

36
00:02:22,160 --> 00:02:24,520
browse the different fonts available.

37
00:02:24,520 --> 00:02:26,140
I'll show you how it works.

38
00:02:26,140 --> 00:02:28,240
Begin by choosing a font.

39
00:02:28,240 --> 00:02:31,560
I'll choose Oswald, add it to my
collection.

40
00:02:33,240 --> 00:02:38,220
And here, I can see I've Oswald in my
collection and press Use.

41
00:02:38,220 --> 00:02:40,350
You scroll down a touch.

42
00:02:40,350 --> 00:02:43,890
You can see the link that we have here for

43
00:02:43,890 --> 00:02:49,180
our Google font, the same one with a
different font family.

44
00:02:49,180 --> 00:02:52,362
That we used here in our index.html.

45
00:02:52,362 --> 00:02:56,860
In the line for font family, that we
should write into our CSS.

46
00:02:58,380 --> 00:03:01,294
And this is where we wrote it into our
CSS.

47
00:03:01,294 --> 00:03:04,480
You should pick any font you want and
replace it with the one I have.

48
00:03:05,790 --> 00:03:09,420
Well that about wraps it up for colors and
fonts in our stylesheet.

49
00:03:09,420 --> 00:03:13,140
Stay tuned for a quick quiz before the
last video in this course.