Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Learn about color keywords, hexadecimal colors, and how to change the fonts on your web page.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In our CSS, we've used a lot of helpful
properties to add color to the page.
0:00
Such as color, background color, and
border.
0:05
CSS uses a few different ways to identify
color.
0:09
Two types are color keywords like red,
green and blue and hexadecimal colors.
0:13
We'll learn more about those in a minute.
0:19
Color keywords are black, silver, gray,
white,
0:22
maroon, red, purple, fuchsia, green, lime,
olive, yellow, navy, blue, teal and aqua.
0:27
RGB stands for red, green and blue.
0:34
And when you're using a hexadecimal number
to write these colors,
0:37
you represent each color with two number
or letters.
0:42
So two for red, two for green, and two for
blue.
0:46
Hex colors always begin with a hash or
pound, followed by rrggbb, or
0:50
the abbreviated version of just rgb.
0:55
An abbreviated three digit form is
sometimes used when each pair of
1:01
colors repeat the same character.
1:05
For example, if the color is 0099cc, we
could just write the shorthand of 09c.
1:08
In our code, you can see a few examples of
each.
1:16
Here at the top, we have a six digit hex
color,
1:19
and here in our body, we have a three
digit hex color.
1:22
When you position your mouse over the
color,
1:25
you should be able to get a preview in the
workspace like this.
1:27
The next important feature I want to talk
about is the font family.
1:33
Fonts are an important part of the design
aesthetic.
1:37
Text, whether on the web or in print
conveys a particular message.
1:40
And your choice of fonts can greatly
reinforce that message.
1:44
Bring out the personality of your website.
1:48
When features of CSS were first
implemented into the browser.
1:52
The technology became available to display
fonts that weren't installed in
1:55
your computer.
2:00
This means you can now choose from a much
larger selection of fonts for
2:01
your webpage.
2:05
Then you could just a few years ago.
2:07
In order to take full advantage of this,
2:09
let's use Google web fonts to access a
wide range of fonts for your web page.
2:11
If you follow the link in the teacher's
notes to pick your Google fonts you can
2:17
browse the different fonts available.
2:22
I'll show you how it works.
2:24
Begin by choosing a font.
2:26
I'll choose Oswald, add it to my
collection.
2:28
And here, I can see I've Oswald in my
collection and press Use.
2:33
You scroll down a touch.
2:38
You can see the link that we have here for
2:40
our Google font, the same one with a
different font family.
2:43
That we used here in our index.html.
2:49
In the line for font family, that we
should write into our CSS.
2:52
And this is where we wrote it into our
CSS.
2:58
You should pick any font you want and
replace it with the one I have.
3:01
Well that about wraps it up for colors and
fonts in our stylesheet.
3:05
Stay tuned for a quick quiz before the
last video in this course.
3:09
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up