Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Treehouse Club: CSS!
You have completed Treehouse Club: CSS!
Preview
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