1
00:00:00,000 --> 00:00:03,990
Whenever I'm learning a new language or new forms of syntax, there always seems

2
00:00:04,000 --> 00:00:08,990
to be something that everyone just takes for granted that you already know.

3
00:00:09,000 --> 00:00:12,990
In the years that I've spent teaching CSS, it seems like no one ever really

4
00:00:13,000 --> 00:00:17,990
concentrates on how color works and how the syntax is used to define it.

5
00:00:18,000 --> 00:00:22,990
There are three primary properties that you'll use when defining color in CSS.

6
00:00:23,000 --> 00:00:26,990
Two of them, border-color and background-color, we've already discussed.

7
00:00:27,000 --> 00:00:31,990
The third property is the color property, and it's used to define the color for

8
00:00:32,000 --> 00:00:32,990
the content of an element.

9
00:00:33,000 --> 00:00:37,990
Many people often refer to this as foreground color, and in terms of elements

10
00:00:38,000 --> 00:00:42,990
like paragraphs, headings, and lists, it refers to the color of the text.

11
00:00:43,000 --> 00:00:46,990
Whether you're defining color on borders, backgrounds, or element content, you

12
00:00:47,000 --> 00:00:50,990
have a number of options in terms of how you want to define in the color.

13
00:00:51,000 --> 00:00:57,990
First, you can choose from one of more than one hundred and fifty color keywords supported by CSS.

14
00:00:58,000 --> 00:01:04,990
In older versions of CSS, you were limited to the sixteen color keywords, but in CSS3

15
00:01:05,000 --> 00:01:10,990
support has been added for the SVG 1.0 color keyword names, greatly expanding

16
00:01:11,000 --> 00:01:12,990
the range of available keywords.

17
00:01:13,000 --> 00:01:17,990
These keywords mapped to a predetermined set of RGB values the browsers will use

18
00:01:18,000 --> 00:01:19,990
to display the color.

19
00:01:20,000 --> 00:01:22,990
In the place of keywords, you can also use hexadecimal notation to

20
00:01:23,000 --> 00:01:25,990
represent color values.

21
00:01:26,000 --> 00:01:30,990
Essentially, hexadecimal notation is another way of representing RGB color by

22
00:01:31,000 --> 00:01:36,990
using three hex pairs to represent the red, green, and blue values of a color.

23
00:01:37,000 --> 00:01:41,990
The easiest way to visualize hexadecimal notation is to examine this table.

24
00:01:42,000 --> 00:01:45,990
When you have a hex value like this one, you match up the first pair of

25
00:01:46,000 --> 00:01:52,990
values for red, the second pair of values for green, and the final pair of values for blue.

26
00:01:53,000 --> 00:01:56,990
Now, I'm not going to lie to you and say that I can spout hexadecimal notation

27
00:01:57,000 --> 00:02:03,990
off the top of my head, but over time you'll memorize the ones that you use most frequently.

28
00:02:04,000 --> 00:02:08,990
You'll also want to become familiar with using shorthand hex values for web-safe colors.

29
00:02:09,000 --> 00:02:12,990
If the hex values are made up of pairs, you can shorten them to three

30
00:02:13,000 --> 00:02:14,990
characters instead of six.

31
00:02:15,000 --> 00:02:27,990
FFF would represent FFFFFF, or white, while 000 would represent 000000, or black.

32
00:02:28,000 --> 00:02:30,990
Keep in mind that all three values need to be matching pairs,

33
00:02:31,000 --> 00:02:36,990
so FF33AB couldn't be represented using shorthand.

34
00:02:37,000 --> 00:02:41,990
If you don't want to use hexadecimal values, you can stick with using RGB color values.

35
00:02:42,000 --> 00:02:46,990
To use actual RGB values, you'll simply declare RGB for the color value and then

36
00:02:47,000 --> 00:02:52,990
pass either numeric values for the red, green, and blue values, or you can use

37
00:02:53,000 --> 00:02:53,990
percentages if you'd like.

38
00:02:54,000 --> 00:02:59,990
CSS3 introduces a new method of defining color as well, and that is the HSL model.

39
00:03:00,000 --> 00:03:04,990
If you're familiar with Photoshop or other photo editing software, you've

40
00:03:05,000 --> 00:03:07,990
probably used HSL at least once or twice.

41
00:03:08,000 --> 00:03:14,990
It stands for Hue, Saturation, and Lightness, and gives us a more intuitive way

42
00:03:15,000 --> 00:03:15,990
of defining color.

43
00:03:16,000 --> 00:03:20,990
RGB is an additive mixture of red, green, and blue colors that range in

44
00:03:21,000 --> 00:03:24,990
values between 0-255.

45
00:03:25,000 --> 00:03:29,990
Now if all three of them are set to 255, you get white; if all the colors are

46
00:03:30,000 --> 00:03:32,990
removed or set to zero, you get black.

47
00:03:33,000 --> 00:03:37,990
It can become very difficult to try to mix RGB colors without a color picker or

48
00:03:38,000 --> 00:03:39,990
some sort of other aid.

49
00:03:40,000 --> 00:03:46,990
Now HSL, on the other hand, is a mixture of a color's hue, saturation, and lightness.

50
00:03:47,000 --> 00:03:53,990
A color's hue is represented as an angle on a color wheel, with ranges from 0 to 360.

51
00:03:54,000 --> 00:03:59,990
Red is 360; green is 120; blue is 240; and other colors such as yellow, orange,

52
00:04:00,000 --> 00:04:02,990
and violet are found in between those values.

53
00:04:03,000 --> 00:04:07,990
Saturation represents the amount of color, with 100% being fully saturated and

54
00:04:08,000 --> 00:04:09,990
0% being grayscale.

55
00:04:10,000 --> 00:04:13,990
Lightness is how bright or dark the color is and just like saturation, it's

56
00:04:14,000 --> 00:04:19,990
defined as a percentage, with 100% being a bright white, 0% being black.

57
00:04:20,000 --> 00:04:24,990
Now, while this declaration is relatively new to CSS, it already enjoys widespread

58
00:04:25,000 --> 00:04:27,990
support among modern browsers.

59
00:04:28,000 --> 00:04:31,990
In addition to color, CSS also allows us to define transparency for elements,

60
00:04:32,000 --> 00:04:34,990
and it gives us a couple of different ways to do this.

61
00:04:35,000 --> 00:04:38,990
Now first, we're able to use the opacity property.

62
00:04:39,000 --> 00:04:44,990
Opacity can be defined using a value from zero to one. So to make an element 50%

63
00:04:45,000 --> 00:04:47,990
transparent, for example, you'd use 0.5 for the value.

64
00:04:48,000 --> 00:04:52,990
Now the thing about opacity is that it defines the opacity for the entire element:

65
00:04:53,000 --> 00:04:55,990
borders, backgrounds, and all.

66
00:04:56,000 --> 00:05:00,990
In order to give you some additional flexibility when defining opacity, CSS3

67
00:05:01,000 --> 00:05:05,990
introduced the concept of RGB and HSL alpha.

68
00:05:06,000 --> 00:05:12,990
Essentially, you can add a fourth value to RGB and HSL definitions in the form of a range of 0-1.

69
00:05:13,000 --> 00:05:16,990
This allows you to have individual transparency settings for backgrounds,

70
00:05:17,000 --> 00:05:19,990
borders, and foreground colors.

71
00:05:20,000 --> 00:05:26,990
Like HSL itself, RGBA and HSLA enjoy a widespread support among modern browsers.

72
00:05:27,000 --> 00:05:30,990
I know this movie has probably been a little bit more technical in terms of the

73
00:05:31,000 --> 00:05:35,990
syntax and how deep we've dived into it than some of our other movies, but when

74
00:05:36,000 --> 00:05:40,990
learning, I think you'll find the color values are often given with little to no

75
00:05:41,000 --> 00:05:42,990
explanation as to what they mean,

76
00:05:43,000 --> 00:05:45,990
and I wanted to make sure that you have an understanding of why certain

77
00:05:46,000 --> 00:05:50,990
values are used and what they refer to when specifying the colors involved in

78
00:05:51,000 --> 00:06:01,000
your design.