Focus video player for keyboard shortcuts
Auto
  • 720p
  • 540p
  • 360p
1.00x
  • 0.50x
  • 0.75x
  • 1.00x
  • 1.25x
  • 1.50x
  • 1.75x
  • 2.00x
cc

We hope you enjoyed this lesson.

Get the Introduction to CSS course for more great video tutorials.

Start free trial

Cool lesson, huh? Share it with your friends

About this lesson

How to add and change the colors of elements.

Exercise files

Download this lesson’s exercise file.

Colors
58.7 KB

Quick reference

Colors

There are three main ways to use color in CSS.

When to use

Any time you want to use colors in your CSS, you'll use one of these three ways.

Instructions

The first way to use color in CSS is to just name the color. Like red. Or blue. Or whatever.

That's not a very good way because you can't really use different shades of colors.

Instead, use either hex color codes, or RGB color codes (hint: use hex).

Hex color codes look like this:

#cccccc;

You can find the codes for the color you want by using a hex color code picker website.

RGB color codes look like this:

rgb(255,0,0)

The first number is your red number, the second number is your green number, and the third number is your blue number.

Like hex color codes, find RGB codes with a color picker website.

You'll always want to use Hex codes over RGB codes.

Hints & tips

  • There are 3 ways to use color in CSS.

1. Name the color, like red.

2. Use RGB values, like rgb(255,0,0).

3. Use hex color codes like #cccccc.

  • Always use hex, it's the standard method
Login to download
  • 00:05 Okay, now it's time to dive in and just start learning CSS.
  • 00:08 Before now, we've talked about sort of introductory things, syntax and
  • 00:11 how to use CSS, and those sorts of things.
  • 00:13 Now we're just gonna start learning CSS from here on out.
  • 00:16 So in this video, I wanna talk about colors.
  • 00:18 And if we go back to our style sheet we've already started to use colors.
  • 00:22 We changed the color of this h1 tag, that stands for header; header 1.
  • 00:26 Now I just typed in red,
  • 00:28 and that's not the best thing to do when it comes to CSS colors.
  • 00:31 It worked, it changed our thing to all red, and
  • 00:34 then we also changed it to blue and green, but that's not the best way.
  • 00:37 There's actually three ways to use colors, and
  • 00:39 this is way number one, you just write out the color.
  • 00:42 So red, green, whatever.
  • 00:45 But you can imagine that's not a great way, because what if you want light blue?
  • 00:49 What if you want a specific shade of red?
  • 00:52 How do you do that?
  • 00:53 Well, you can't just write the name because it doesn't have a name.
  • 00:56 In that case you would use something called hexadecimal value, we call it hex value,
  • 01:00 H-E-X.
  • 01:01 And that starts with a number sign, a hashtag and then it's six numbers.
  • 01:06 So it could be 123456, it could be six zeros.
  • 01:10 Let's take a look at that.
  • 01:11 If we save this and hit reload, boom, it turns black, cuz black is 000000.
  • 01:18 It can also be letters, #cccccc.
  • 01:22 We save this, come back, this becomes light gray.
  • 01:25 So this is a much better way to do it because you can get the exact shade that
  • 01:29 you want.
  • 01:30 And I'm not gonna tell you that the math that goes into this.
  • 01:32 You don't need to memorize any weird formulas to come up with these letters and
  • 01:36 numbers.
  • 01:36 What you do whenever you want a color is you just go to either if you have
  • 01:40 Photoshop, you can use that, or just go to Google and type in hex color codes.
  • 01:44 And you can find a color picker, and it really doesn't matter,
  • 01:47 any of these will work.
  • 01:49 And if you kind of look here, you can just, say we want blue,
  • 01:53 we can just drag this around til we get the color blue that we want.
  • 01:56 And if we want red, we drag this thing up to red.
  • 01:59 And you just sorta move it around until you get the exact shade that you want.
  • 02:03 So let's find a purple.
  • 02:07 And see right here is the hex code.
  • 02:09 See there's that little hashtag guy.
  • 02:11 So if we just copy this it's 90269E.
  • 02:14 I don't know what that is but that's why we use a color picker.
  • 02:17 So if we come up here and just paste this in, save it,
  • 02:21 come back here, boom, we got purple.
  • 02:24 So that is the best way to pick colors.
  • 02:27 Now, there's another way to use colors, I'll tell you about quickly.
  • 02:29 It's called the RGB value, it's R-G-B and that stands for red, green, blue.
  • 02:36 And that looks like this.
  • 02:38 It's rgb, and then we do this, and
  • 02:42 then we put different numbers in here, 255.0.0.
  • 02:47 And now, the 255, that's your red value.
  • 02:50 This 0 is the green value, and this 0 is the blue value.
  • 02:54 So if we save this, come back here, boom, that's red.
  • 02:58 And just like HTML color codes, you can find an RGB color code website.
  • 03:06 And see here is R, G, and B.
  • 03:09 Actually, if we go back to that website we were just at, yeah,
  • 03:11 so this guy also has the RGB values right here.
  • 03:15 So let's try this.
  • 03:16 We go 58 and
  • 03:19 178 and 26.
  • 03:24 So 178 and 26, now if we save this, hopefully, boom, we get green.
  • 03:30 So that's a little bit more complicated.
  • 03:32 I don't know anybody that uses RGB values.
  • 03:34 If you look at CSS code for for websites, you're never really gonna see RGB.
  • 03:38 It's just not something people use.
  • 03:40 It's much easier just to use this hex code, and so
  • 03:43 that's sort of the convention.
  • 03:44 But this is an option.
  • 03:46 Some people may prefer it for some reason.
  • 03:48 But for the most part,
  • 03:50 you're just gonna use your hex codes with good old fashioned hashtag in front of it.
  • 03:55 So that's how to use colors with CSS, and that's all for this video.

Lesson notes are only available for subscribers.

Gift this course