1
00:00:01,300 --> 00:00:04,270
OK so it's time that we actually write some C S S.

2
00:00:04,290 --> 00:00:05,400
Very exciting.

3
00:00:05,400 --> 00:00:09,000
Before we do that though we need to have some aged him Al that we can style.

4
00:00:09,180 --> 00:00:16,470
So I'm going to go ahead and in sublime make a new file save it just put on my desk top for now and

5
00:00:16,470 --> 00:00:18,140
I'm going to call it about me.

6
00:00:18,220 --> 00:00:21,180
HMO.

7
00:00:22,470 --> 00:00:30,400
Use that little trick get the skeleton the boiler plate and this is going to be a very simple page.

8
00:00:30,600 --> 00:00:34,500
I'm telling you now is not going to be beautiful when we're done here.

9
00:00:34,590 --> 00:00:36,110
We're just going to change some colors.

10
00:00:36,210 --> 00:00:38,950
We're just going over the basics of how all of this works together.

11
00:00:39,240 --> 00:00:44,820
So I'm just going and each one about me and then let's say an itch for

12
00:00:48,450 --> 00:00:52,430
my hobbies.

13
00:00:52,740 --> 00:00:55,150
Feel free to adapt this to yourself.

14
00:00:55,530 --> 00:01:12,730
Let's add a list and a few allies and let's do flying tar cooking and origami and save that file.

15
00:01:13,110 --> 00:01:14,180
Let's just double check.

16
00:01:14,280 --> 00:01:16,870
Let's open it up.

17
00:01:16,920 --> 00:01:17,480
Great.

18
00:01:17,550 --> 00:01:19,970
Here's our wonderful site that we're going to style.

19
00:01:20,580 --> 00:01:26,650
So before we start actually writing success we have to decide where to put the success.

20
00:01:26,820 --> 00:01:28,520
And there are actually a few choices.

21
00:01:28,860 --> 00:01:34,800
So in the notes there are two that I'm referencing on this page and the first one I'll tell you right

22
00:01:34,800 --> 00:01:36,840
now is not a good idea.

23
00:01:36,840 --> 00:01:41,100
I'm showing it to you just so that you are aware to for two reasons.

24
00:01:41,100 --> 00:01:47,430
One this is the only way that used to be able to style elements before separate style sheet and before

25
00:01:47,490 --> 00:01:51,390
CSSA you actually did this in every single element.

26
00:01:51,660 --> 00:01:55,380
So let me show an example.

27
00:01:55,830 --> 00:01:59,140
I want to make this first lie purple.

28
00:01:59,340 --> 00:02:08,000
I would say style and then in the quote say Color Purple and that will work.

29
00:02:08,580 --> 00:02:10,800
And this changes to be purple.

30
00:02:11,490 --> 00:02:18,780
So there is a problem though which is if I want all three of these to be purple I need to go ahead and

31
00:02:18,780 --> 00:02:20,880
duplicate this every time.

32
00:02:20,880 --> 00:02:21,910
Which is a lot of work.

33
00:02:21,990 --> 00:02:27,300
And then if I decide oh no I want them to be green then I need to go and change three different places

34
00:02:27,870 --> 00:02:28,570
to be green.

35
00:02:28,770 --> 00:02:33,960
And obviously that problem is much worse when you have hundreds of the same element with the same style

36
00:02:34,170 --> 00:02:35,940
on a given page.

37
00:02:35,940 --> 00:02:37,200
So this is a bad idea.

38
00:02:37,470 --> 00:02:43,220
And the other reason this is not a great idea is that we want to separate our h tim L from RCA.

39
00:02:43,380 --> 00:02:46,050
It's this idea of the separation of concerns.

40
00:02:46,200 --> 00:02:50,030
We want our CSSA to be self-contained in its own file.

41
00:02:50,040 --> 00:02:53,270
We want to age him to be its own file with just the structure.

42
00:02:53,290 --> 00:02:55,130
C Ss is just the style.

43
00:02:55,230 --> 00:02:58,490
So right now this is kind of a weird blend of the two.

44
00:02:58,710 --> 00:03:07,010
So I'm gonna get rid of that and the other way in the notes is something called a style attack.

45
00:03:07,360 --> 00:03:13,740
So a style tag lets us write C Ss syntax where we actually select things and we have the curly braces

46
00:03:14,040 --> 00:03:15,580
which we couldn't do here.

47
00:03:16,230 --> 00:03:20,590
But what we can do is do this inside of an h t m l document.

48
00:03:20,700 --> 00:03:25,530
So up in the head if we go ahead and just create the tag called style

49
00:03:29,940 --> 00:03:40,620
and we can give it this attribute type equals text slash C Ss we can now write some C Ss tags and selectors

50
00:03:40,890 --> 00:03:43,260
inside of here.

51
00:03:43,470 --> 00:03:52,620
So remember we have this is the general rule selector and then we have property inside the curly braces

52
00:03:52,650 --> 00:03:55,240
and then value and then a semi-colon.

53
00:03:55,920 --> 00:03:58,990
So I'm going to comment this out by the way to do comments.

54
00:03:59,040 --> 00:04:03,870
SS use slash and the asterisk and then asterisk and slash.

55
00:04:04,230 --> 00:04:06,060
So I mean I'll leave this here.

56
00:04:06,270 --> 00:04:12,990
And let's start by changing the H-1 to be purple.

57
00:04:13,020 --> 00:04:16,810
So the way that we write that if we follow this pattern we select it.

58
00:04:17,070 --> 00:04:23,670
So we're going to write each one and again and we will be spending a lot of time on different types

59
00:04:23,670 --> 00:04:24,680
of selectors.

60
00:04:24,690 --> 00:04:29,640
So right now we're learning about one called the elements selector which led to select based off of

61
00:04:29,760 --> 00:04:32,860
an element type which is H-1.

62
00:04:33,300 --> 00:04:38,550
So now we're going to add a property in here and in this video we're just going to keep it extremely

63
00:04:38,550 --> 00:04:40,220
simple and use color.

64
00:04:40,740 --> 00:04:54,490
So I'll say color and then purple and save this reload or page back up and we get a purple H-1 So the

65
00:04:54,490 --> 00:05:03,430
next thing that we can do is change all allies to be orange and to do that we select with an element

66
00:05:03,430 --> 00:05:06,510
selector again and we can just do this right after.

67
00:05:06,520 --> 00:05:10,660
We don't need any commas or any other punctuation.

68
00:05:10,660 --> 00:05:19,390
We just do another rule here apply curly braces and this time we're going to say color is orange.

69
00:05:19,390 --> 00:05:25,780
So the reason we're doing this is I want to show you that this Elyse selector it doesn't just select

70
00:05:25,780 --> 00:05:28,500
one selects all lies.

71
00:05:28,600 --> 00:05:33,340
So we refresh all three of them are now orange.

72
00:05:33,340 --> 00:05:36,220
Likewise with the H-1 if we had multiple h ones.

73
00:05:36,310 --> 00:05:38,190
So I'll just add three.

74
00:05:38,260 --> 00:05:42,210
They would all be purple.

75
00:05:42,220 --> 00:05:48,850
One other thing I'll show you over here is if I need to find another style for each afterwards and I

76
00:05:48,850 --> 00:05:50,380
say it should be blue

77
00:05:54,130 --> 00:05:54,860
it turns blue.

78
00:05:54,910 --> 00:05:56,020
All of them turn blue.

79
00:05:56,080 --> 00:06:00,400
And so this gets at something that we'll learn a lot more about which is what happens when there is

80
00:06:00,400 --> 00:06:02,680
conflicting style information.

81
00:06:02,680 --> 00:06:05,200
And in this case we changed them all to be purple.

82
00:06:05,410 --> 00:06:07,870
And then afterwards we change them all to be blue.

83
00:06:07,870 --> 00:06:12,510
So the one that came later won the battle I guess.

84
00:06:13,560 --> 00:06:14,040
OK.

85
00:06:14,050 --> 00:06:21,520
So the problem with what we've just been doing though looks fine but unfortunately it's still in our

86
00:06:21,520 --> 00:06:22,550
HMO.

87
00:06:22,690 --> 00:06:27,940
And I just got done saying a few minutes ago we want to separate or h him out and R C S us we don't

88
00:06:27,940 --> 00:06:30,210
want them to be connected.

89
00:06:30,320 --> 00:06:35,000
Well we want them to be connected we don't want the CCs to be nested inside her HMO.

90
00:06:35,440 --> 00:06:38,630
So functionally it works exactly the same way.

91
00:06:38,800 --> 00:06:46,880
We don't see any visual difference but well what we actually want to do is use a link tag.

92
00:06:47,290 --> 00:06:53,810
So what a link tag lets us do is write or see SS in a totally separate file and then connected with

93
00:06:53,810 --> 00:06:59,830
the link tag instead of our head which will basically go get the contents of that file and soul and

94
00:07:00,190 --> 00:07:01,580
style everything in our age.

95
00:07:01,580 --> 00:07:05,090
Tim L. given the contents of that file.

96
00:07:07,270 --> 00:07:13,780
So to write that we can either start by making a new file and we're going to put RC SS in here so we're

97
00:07:13,780 --> 00:07:17,630
going to save it and I'm just going to call it up.

98
00:07:17,690 --> 00:07:25,420
C Ss you call it whatever you want but needs to be dot C Ss and I'm putting it in the same directory

99
00:07:26,230 --> 00:07:28,960
as my HDMI file.

100
00:07:29,050 --> 00:07:37,360
The next thing I'm going to do is just define a few styles and here so H-1 let's say color is red and

101
00:07:37,400 --> 00:07:42,630
lies color is green.

102
00:07:43,240 --> 00:07:46,870
And while we're here let's change it for as well.

103
00:07:46,870 --> 00:07:49,330
Color Purple.

104
00:07:49,870 --> 00:07:50,830
Great.

105
00:07:50,980 --> 00:07:58,180
So we have CSSA defined here of course and I'm going to comment out this for now.

106
00:07:58,180 --> 00:08:00,750
Of course though they're not connected right now.

107
00:08:01,120 --> 00:08:04,030
So we made a file but it's not connected.

108
00:08:04,180 --> 00:08:06,550
So to do that we need to use the link tag.

109
00:08:06,880 --> 00:08:13,810
So I'd like to just type link and then hit tab and you can see that there's this important attribute

110
00:08:14,210 --> 00:08:19,570
that sublime text wants us to fill out which is called A-Trak and it works just like the trough on an

111
00:08:19,570 --> 00:08:22,110
anchor tag and that would give it a arrival.

112
00:08:22,140 --> 00:08:24,900
We give it a place to find the file.

113
00:08:24,940 --> 00:08:35,140
So in this case this file is just called apt us so we just write abducts yes us save and refresh.

114
00:08:35,140 --> 00:08:42,540
Now you can see we have read H-1 a purple page 4 and green allies so let's all we're going to do.

115
00:08:42,540 --> 00:08:43,920
As far as styling for now.

116
00:08:44,110 --> 00:08:50,440
So to recap here the first thing that we discussed is using the style attribute to add style in line

117
00:08:50,620 --> 00:08:57,070
which looks like this style equals and then give it a property and this is a bad idea for two reasons

118
00:08:57,070 --> 00:08:57,140
.

119
00:08:57,160 --> 00:09:01,420
The first of which is that we don't want to clutter or H Tim L with a bunch of styles.

120
00:09:01,480 --> 00:09:02,890
We want them to be separate.

121
00:09:03,160 --> 00:09:06,860
And the second reason is that it's a pain if we want to change things.

122
00:09:07,150 --> 00:09:11,500
It's a lot of duplication if we want to make all 3H one thread.

123
00:09:11,530 --> 00:09:14,850
We have to copy that code to three different places.

124
00:09:15,340 --> 00:09:21,550
The next thing that we learned about was using the style tag and the style tag lets us write C S us

125
00:09:21,640 --> 00:09:23,110
inside of our h Timo.

126
00:09:23,410 --> 00:09:24,940
And it works well.

127
00:09:24,940 --> 00:09:30,010
It does let us use the CSSA syntax where we can select all each one at once.

128
00:09:30,010 --> 00:09:34,710
The problem with it is just that we don't want to put R C S S directly enraged him.

129
00:09:35,230 --> 00:09:39,940
But you will use this occasionally if you're just debugging something you want to quickly add some styles

130
00:09:40,180 --> 00:09:42,880
you don't want to make a new file and then connected.

131
00:09:42,920 --> 00:09:44,480
You're just going to delete it afterwards.

132
00:09:44,590 --> 00:09:46,100
So that's really the time where I use it.

133
00:09:46,100 --> 00:09:48,530
It's just for quick demonstration purposes.

134
00:09:48,730 --> 00:09:53,670
But what we actually want to use is the link tag the link tag.

135
00:09:53,860 --> 00:09:55,810
It's just a reference to another file.

136
00:09:55,960 --> 00:10:02,020
So we need a file filled with styles needs to end with Dotsie assess save it and then connect it with

137
00:10:02,020 --> 00:10:05,800
the H ref attribute and that's all we need to do.

138
00:10:05,800 --> 00:10:12,550
One thing I forgot to mention is that you definitely want to put link tags and styles in your head.

139
00:10:12,790 --> 00:10:17,110
That's really the point of the head it's where you put the stuff that isn't actually on the page not

140
00:10:17,110 --> 00:10:22,600
the elements but things that have to do with those elements so fonts that you're including style sheets

141
00:10:22,900 --> 00:10:24,190
and then eventually javascript's