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 to work with CSS color properties and gain the skills to transform the look and feel of your web elements. Explore the impact of color changes on backgrounds and text, and understand how to customize your web design.
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 the last video, we applied
some colors to our HTML elements,
0:00
such as white, black,
brown, and rosy brown.
0:05
These are called HTML color names, and
there are user-friendly options for
0:09
quickly defining basic
colors in your web design,
0:14
offering simplicity and
readability in your code.
0:17
HTML color names are excellent for
quick color choices, but
0:21
most of the time we'll want to be
more specific with our colors.
0:25
Enter, hex colors.
0:29
Hex colors use a hexadecimal
value to represent a color.
0:31
It uses the #RRGGBB format,
where RR represents the red value,
0:36
GG represents green,
and BB represents blue,
0:42
whereas 00 is the lowest value and
FF is the highest value.
0:47
For example,
#FF0000 will be pure red because the red
0:53
value is at its highest and
the other two are at its lowest.
0:58
By specifying values in this format, you
can create an extensive range of colors.
1:04
Let's play around with
the hex color values tool,
1:10
which you can find a link to
in the teacher's notes below.
1:13
See how the color and the hex value of
the box change with different values for
1:17
red, green, and blue.
1:23
If we have a look at the provided mockups,
1:25
we can see that there are some
very specific colors used for
1:28
the background, buttons, borders,
and ingredient box background.
1:32
There's a color.txt file
provided with the project
1:37
files that contain the four
colors used in the mockups.
1:41
Let's have a look at what these
colors look like using this hex
1:45
color values tool.
1:50
Adjust the sliders to F3, EE, and EA.
1:52
This is how the almost white color looks.
1:57
And now we'll adjust it to E8, DB, and D3.
2:01
This is how the light brown color looks.
2:07
For the last two,
we can use a color picker instead.
2:10
Enter aa7d7a and 75474a
2:15
to see what the colors look like.
2:21
There are many hex color tools out there,
so
2:27
take the time to find one
that works best for you.
2:30
Now that we know what hex colors are,
we can start using them in our CSS.
2:33
Let's change the body's
background color from rosy
2:38
brown to the light brown
listed in color.txt.
2:42
In place of rosy brown,
we can enter the hash symbol,
2:46
followed by the hexadecimal value, e8dbd3.
2:51
Save and refresh the page.
2:56
We can see that the body now has
the same color as the background
3:00
color shown in the mockup.
3:04
Let's do the same thing for
our anchor tags.
3:06
Our anchor tag should be the hex
color code named medium-brown.
3:10
Pause this video,
refer to the provided hex colors, and
3:15
try to change the color
of the anchor tags.
3:19
Here's what I did,
3:25
I changed the brown value to #aa7d7a.
3:28
Next, let's give our meat-related parts
their signature dark brown text color.
3:33
Pause this video and give it a go.
3:39
How did it go?
3:44
Over in the meat class selector,
I gave it the property color and
3:45
set the value to #75474a.
3:52
We'll use the remaining hex values as
we continue to style our web page.
3:55
As you can imagine, you now have a huge
range of colors at your disposal.
4:02
You simply have to determine the
corresponding hex value using one of many
4:07
online tools, and you'll have full
control over the colors on your website.
4:12
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