1
00:00:00,150 --> 00:00:03,480
Instructor: Now we've already used some CSS properties

2
00:00:03,480 --> 00:00:08,070
in order to apply CSS to our different HTML elements.

3
00:00:08,070 --> 00:00:10,260
But in this section, we're gonna do a deep dive

4
00:00:10,260 --> 00:00:12,870
into some of the most important CSS properties

5
00:00:12,870 --> 00:00:15,030
that you'll see and use.

6
00:00:15,030 --> 00:00:18,030
And we're gonna start with CSS color properties.

7
00:00:18,030 --> 00:00:21,720
Some of the color properties you've already seen previously.

8
00:00:21,720 --> 00:00:24,517
I've shown you how you can set the background color

9
00:00:24,517 --> 00:00:27,300
of a particular HTML element

10
00:00:27,300 --> 00:00:31,140
by using the background-color property.

11
00:00:31,140 --> 00:00:32,580
And previously, we've been setting it

12
00:00:32,580 --> 00:00:37,500
to basic colors like red or blue or green.

13
00:00:37,500 --> 00:00:41,040
And remember that the way that the CSS rules work

14
00:00:41,040 --> 00:00:45,033
is the first part is the property,

15
00:00:46,650 --> 00:00:49,620
and the part that comes after the colon

16
00:00:49,620 --> 00:00:53,010
is the value that you wanna set that property to.

17
00:00:53,010 --> 00:00:56,190
So in this case, we're setting the background color

18
00:00:56,190 --> 00:00:58,440
of the HTML element, which remember,

19
00:00:58,440 --> 00:01:00,720
contains everything on our website.

20
00:01:00,720 --> 00:01:04,890
So the entire webpage to a color of red.

21
00:01:04,890 --> 00:01:06,930
That's what that rule does.

22
00:01:06,930 --> 00:01:10,170
Now, there are different types of color properties.

23
00:01:10,170 --> 00:01:11,880
There's the background color,

24
00:01:11,880 --> 00:01:15,240
but you can also simply use the color property.

25
00:01:15,240 --> 00:01:19,200
And what this does is it sets the text color.

26
00:01:19,200 --> 00:01:22,020
So always check the MDN docs

27
00:01:22,020 --> 00:01:25,053
if you're not sure which property does what.

28
00:01:26,430 --> 00:01:29,520
Notice that in this case, we've got two colors

29
00:01:29,520 --> 00:01:32,760
which we've named red and blue.

30
00:01:32,760 --> 00:01:35,700
Well, how do we know that we can use these colors?

31
00:01:35,700 --> 00:01:37,800
And what exactly are they?

32
00:01:37,800 --> 00:01:40,050
Well, they're called named colors.

33
00:01:40,050 --> 00:01:42,600
And there's a whole bunch of them out there

34
00:01:42,600 --> 00:01:47,370
with poetic names like CornflowerBlue or CadetBlue

35
00:01:47,370 --> 00:01:51,660
or DimGray, OliveDrab, et cetera.

36
00:01:51,660 --> 00:01:53,880
And you can find all of them by, of course,

37
00:01:53,880 --> 00:01:56,700
going to the developer documentation.

38
00:01:56,700 --> 00:02:00,450
If you Google for MDN docs named-color,

39
00:02:00,450 --> 00:02:03,300
the first link should take you to this webpage.

40
00:02:03,300 --> 00:02:06,480
Alternatively, you can use this URL as well.

41
00:02:06,480 --> 00:02:08,610
And the syntax is pretty simple.

42
00:02:08,610 --> 00:02:12,360
You simply use the name of the color,

43
00:02:12,360 --> 00:02:14,310
and if you scroll through this table,

44
00:02:14,310 --> 00:02:16,980
you'll see all the different colors.

45
00:02:16,980 --> 00:02:19,500
And don't worry too much about the CSS level one

46
00:02:19,500 --> 00:02:21,150
or level two or level three,

47
00:02:21,150 --> 00:02:23,310
it just describes historically

48
00:02:23,310 --> 00:02:24,990
when each color was introduced.

49
00:02:24,990 --> 00:02:26,490
So these were introduced first

50
00:02:26,490 --> 00:02:28,470
'cause it's basically the rainbow.

51
00:02:28,470 --> 00:02:31,290
And then over time, we got some more fun colors

52
00:02:31,290 --> 00:02:35,820
like cyan and dark khaki and all of these different colors.

53
00:02:35,820 --> 00:02:38,337
So you can simply copy the name of the color

54
00:02:38,337 --> 00:02:41,430
and paste it into your code,

55
00:02:41,430 --> 00:02:44,550
and you'll be able to see that rendered in your website.

56
00:02:44,550 --> 00:02:47,370
Of course, even though there's many colors available

57
00:02:47,370 --> 00:02:50,040
in the default CSS named colors,

58
00:02:50,040 --> 00:02:51,600
but you still sometimes might

59
00:02:51,600 --> 00:02:54,660
want to have a more unique color palette.

60
00:02:54,660 --> 00:02:56,520
So what do you do in that case?

61
00:02:56,520 --> 00:03:01,520
Well, one of my favorite color palettes is colorhunt.co.

62
00:03:02,130 --> 00:03:07,130
It's a free tool that's created by designers for designers,

63
00:03:07,230 --> 00:03:09,300
and of course, for us as well.

64
00:03:09,300 --> 00:03:12,540
But here, you've got professionally designed color palettes.

65
00:03:12,540 --> 00:03:14,160
Four colors stacked together

66
00:03:14,160 --> 00:03:17,040
that would look perfect on any website.

67
00:03:17,040 --> 00:03:18,630
You can imagine that if you select

68
00:03:18,630 --> 00:03:20,910
any of these random websites,

69
00:03:20,910 --> 00:03:23,520
maybe this could be the background color of the website.

70
00:03:23,520 --> 00:03:25,440
This could be an H1 color,

71
00:03:25,440 --> 00:03:28,170
this could be a subtitle or H2 color.

72
00:03:28,170 --> 00:03:30,300
You have accent tone, you have main tones,

73
00:03:30,300 --> 00:03:33,510
and you can use all of these colors in your website.

74
00:03:33,510 --> 00:03:36,900
But how do we use them if we don't have a name

75
00:03:36,900 --> 00:03:38,220
that's attached to it?

76
00:03:38,220 --> 00:03:41,040
Instead, we've got all these numbers and letters.

77
00:03:41,040 --> 00:03:42,960
What exactly are these?

78
00:03:42,960 --> 00:03:45,150
Well, these are hex codes,

79
00:03:45,150 --> 00:03:50,150
and they are a way of representing a larger number code

80
00:03:50,730 --> 00:03:52,650
for that particular color.

81
00:03:52,650 --> 00:03:57,270
So for example, in this case, this is a color purple

82
00:03:57,270 --> 00:04:01,350
which is formed of three fractions, red, green, and blue.

83
00:04:01,350 --> 00:04:04,650
And these are colors out of 255.

84
00:04:04,650 --> 00:04:06,450
So if you imagine a fraction.

85
00:04:06,450 --> 00:04:08,850
93 out of 255, red,

86
00:04:08,850 --> 00:04:11,610
56 out of 255, green,

87
00:04:11,610 --> 00:04:15,330
and 145 out of 255 blue.

88
00:04:15,330 --> 00:04:18,480
And when you mix all three of these primary colors,

89
00:04:18,480 --> 00:04:21,390
you can get so many different types of shades.

90
00:04:21,390 --> 00:04:24,720
So in this case, we've got 93, 56, 145.

91
00:04:24,720 --> 00:04:29,700
So 93 out of 255.

92
00:04:29,700 --> 00:04:34,700
56 green out of 255, and 145.

93
00:04:37,230 --> 00:04:40,140
So a little bit more blue.

94
00:04:40,140 --> 00:04:42,295
And we end up with exactly the same shade

95
00:04:42,295 --> 00:04:45,420
as this purple you see right here.

96
00:04:45,420 --> 00:04:49,650
Converting that RGB into a hex code.

97
00:04:49,650 --> 00:04:52,740
So a different way of representing that number,

98
00:04:52,740 --> 00:04:55,410
we get this particular hex code.

99
00:04:55,410 --> 00:04:56,790
What does this mean for you?

100
00:04:56,790 --> 00:04:59,550
Well, when you are using something like Color Hunt,

101
00:04:59,550 --> 00:05:02,670
and you wanna apply these different colors to your website,

102
00:05:02,670 --> 00:05:05,400
you can simply copy the hex code

103
00:05:05,400 --> 00:05:08,250
and use it instead of the name.

104
00:05:08,250 --> 00:05:11,220
And even on the MDN docs for the name colors,

105
00:05:11,220 --> 00:05:15,060
you can see their hex codes lined up next to the names.

106
00:05:15,060 --> 00:05:18,300
And in code, it looks pretty much exactly the same.

107
00:05:18,300 --> 00:05:20,703
Instead of the name, you just put the hex code.

108
00:05:21,570 --> 00:05:23,700
So now it's time to try an exercise.

109
00:05:23,700 --> 00:05:26,010
Go ahead and download this zip file

110
00:05:26,010 --> 00:05:28,380
from this current lesson, extract it,

111
00:05:28,380 --> 00:05:31,080
and open it inside VS code.

112
00:05:31,080 --> 00:05:31,913
Once you're here,

113
00:05:31,913 --> 00:05:34,110
you should see it's a pretty simple website

114
00:05:34,110 --> 00:05:37,170
with just two elements inside the body,

115
00:05:37,170 --> 00:05:39,150
an H1 and an H2.

116
00:05:39,150 --> 00:05:40,950
And if we look at the preview,

117
00:05:40,950 --> 00:05:45,000
then you can see it's clearly a drab black and white world.

118
00:05:45,000 --> 00:05:48,540
We're gonna change all of that by adding in CSS colors.

119
00:05:48,540 --> 00:05:51,900
So you've got five steps that you need to complete here,

120
00:05:51,900 --> 00:05:54,060
and you should follow them one by one.

121
00:05:54,060 --> 00:05:56,250
And by the end of all five steps,

122
00:05:56,250 --> 00:05:59,100
you should have a website that looks something like this,

123
00:05:59,100 --> 00:06:00,510
with lots of different colors

124
00:06:00,510 --> 00:06:03,330
and different background colors as well.

125
00:06:03,330 --> 00:06:05,883
Pause the video now and give this challenge a go.

126
00:06:09,660 --> 00:06:12,990
All right, so let's walk through the solution together.

127
00:06:12,990 --> 00:06:15,870
We've got the background color of the body,

128
00:06:15,870 --> 00:06:19,110
which is set to antique white,

129
00:06:19,110 --> 00:06:21,330
which is this color right here.

130
00:06:21,330 --> 00:06:25,800
And we've got the text color of the H1 set to white smoke,

131
00:06:25,800 --> 00:06:29,640
but you can also set the background color of the H1.

132
00:06:29,640 --> 00:06:32,580
It's a property that's available on any of the elements

133
00:06:32,580 --> 00:06:35,190
and it's simply takes the existing area

134
00:06:35,190 --> 00:06:38,190
of that element and colors the background.

135
00:06:38,190 --> 00:06:39,240
Now, that might have required

136
00:06:39,240 --> 00:06:40,620
a little bit of lateral thinking,

137
00:06:40,620 --> 00:06:42,720
but hopefully, you got there in the end.

138
00:06:42,720 --> 00:06:47,190
And notice how in the H1, we've got all named colors.

139
00:06:47,190 --> 00:06:51,030
And in the H2, I've asked you to use hex colors.

140
00:06:51,030 --> 00:06:52,920
And this is just so that you have practice

141
00:06:52,920 --> 00:06:55,773
adding colors using the two different methods.

142
00:06:56,700 --> 00:06:58,320
Hopefully, you got there in the end.

143
00:06:58,320 --> 00:07:00,690
Once you're ready, head over to the next lesson

144
00:07:00,690 --> 00:07:05,073
and let's learn more about formatting fonts using CSS.