1
00:00:00,870 --> 00:00:03,770
Hello everyone and welcome back.

2
00:00:03,790 --> 00:00:10,460
In today's video we will learn about different ways we can style on extremist elements using C Ss.

3
00:00:10,500 --> 00:00:12,340
So let us begin.

4
00:00:12,360 --> 00:00:19,950
There are three ways you can add styles to the exterior elements which are inline CSX internal CSX and

5
00:00:20,070 --> 00:00:21,720
external scissors.

6
00:00:21,750 --> 00:00:25,190
Let's try it out first one which is in line scissors.

7
00:00:25,230 --> 00:00:28,750
So this is when you are a style property to the extreme element.

8
00:00:28,770 --> 00:00:30,240
So let's write an example.

9
00:00:31,140 --> 00:00:34,460
So let's bring about good editor.

10
00:00:34,490 --> 00:00:37,460
So this is the demo document that you've got.

11
00:00:37,850 --> 00:00:40,680
Let's try adding some in length standards.

12
00:00:40,970 --> 00:00:44,920
So let's say it's going to be ordered just by using the style of property.

13
00:00:45,080 --> 00:00:46,730
So style.

14
00:00:46,970 --> 00:01:02,100
Let's give it a within height C with 100 percent on height or do let's say that it's as you can see

15
00:01:02,130 --> 00:01:08,190
now that I just didn't rid of the screen but there is a little margin in the body so let's remove that.

16
00:01:08,190 --> 00:01:10,300
So again let's use in line styles.

17
00:01:10,320 --> 00:01:13,890
So style on margins say 0.

18
00:01:14,230 --> 00:01:14,970
Let's save it.

19
00:01:15,480 --> 00:01:19,370
And as you can see that margin is gone now.

20
00:01:19,380 --> 00:01:22,030
All right let's item signs for this heading.

21
00:01:22,110 --> 00:01:31,120
See starting form size say 48 pixels let's say it.

22
00:01:31,260 --> 00:01:32,730
Let's bring it in the center.

23
00:01:33,540 --> 00:01:37,420
So text align center.

24
00:01:37,640 --> 00:01:49,790
David now you can see text in the center similarly let's add some sites for these paragraphs so style.

25
00:01:49,960 --> 00:01:55,090
C font size same 24 pixels.

26
00:01:55,360 --> 00:01:56,120
Let's save it.

27
00:01:57,360 --> 00:02:10,160
Let's give it a line height say one point for let's say a on text line.

28
00:02:10,220 --> 00:02:11,990
Let's bring everything to the center.

29
00:02:12,900 --> 00:02:15,010
Let's save it.

30
00:02:15,060 --> 00:02:18,120
And as you can see no I got a graph.

31
00:02:18,120 --> 00:02:22,620
Text is in the center and the font is a bit bigger with the line height a bit bigger.

32
00:02:22,950 --> 00:02:25,390
Other do more.

33
00:02:25,390 --> 00:02:27,820
All right let's have some more stylings.

34
00:02:27,880 --> 00:02:31,660
So let's just copy the study for the next paragraph as well.

35
00:02:32,350 --> 00:02:33,270
Let's see that here.

36
00:02:35,590 --> 00:02:40,340
And as you can see both of our graphs have the same styling let's add a bit of spotting on both inside.

37
00:02:41,060 --> 00:02:51,650
So I mean my cue let's give it a parting sea bottom left 32 pixels.

38
00:02:51,860 --> 00:02:52,800
Let's save it.

39
00:02:54,770 --> 00:02:56,370
Let's give it a bottom right.

40
00:02:56,390 --> 00:02:57,680
Say 32 pixels

41
00:03:02,480 --> 00:03:09,720
let's add this fighting to the next paragraph as well let's say with so as you can see now the are some

42
00:03:09,720 --> 00:03:16,150
custom styles and change of on size 9 height alignment et cetera et cetera.

43
00:03:16,440 --> 00:03:21,150
Don't worry even if you don't know about these properties at the moment we will be gathering all of

44
00:03:21,150 --> 00:03:23,140
this in the coming videos.

45
00:03:23,190 --> 00:03:29,070
The purpose of this video was to show you different ways we can add sites to each demon element.

46
00:03:29,160 --> 00:03:32,560
So the first one was in nine states on Dragon land science.

47
00:03:32,560 --> 00:03:36,830
We just use this same property on the final stage here.

48
00:03:37,080 --> 00:03:40,190
So the next method is internal sciences.

49
00:03:40,200 --> 00:03:45,430
So this is when we use the style element inside the hashtag of which team beach.

50
00:03:45,450 --> 00:03:49,080
So let's of the statement here.

51
00:03:49,380 --> 00:03:52,290
It requires a clothing dog as well.

52
00:03:52,310 --> 00:03:54,620
Now we can move our sights here.

53
00:03:54,640 --> 00:03:56,850
So this would be internal status.

54
00:03:56,880 --> 00:03:57,220
Okay.

55
00:03:57,240 --> 00:04:04,000
So we've got some sites for the image so let's remove these from here.

56
00:04:04,130 --> 00:04:04,920
Do move it up there.

57
00:04:04,920 --> 00:04:06,900
We need a selector for that image.

58
00:04:07,180 --> 00:04:11,400
So it's demoed provides I.D. and class for that purpose.

59
00:04:11,400 --> 00:04:15,330
So we use I.D. for uniquely identifying extreme elements.

60
00:04:15,330 --> 00:04:26,300
So this is just one element so we just use I.D. here say galloping and to use a glass views dark and

61
00:04:26,300 --> 00:04:38,990
class names so in our case which is color make let's face the states who let's say it okay so the states

62
00:04:39,020 --> 00:04:48,230
aren't looking so the problem is we've added I.D. here but we've used the glass selector to use I use

63
00:04:48,320 --> 00:04:53,990
hash so let's say that and not as you can see on images back to normal.

64
00:04:54,470 --> 00:04:56,930
Similarly you've added some science for this headache.

65
00:04:57,440 --> 00:04:59,360
So let's just remove these from here.

66
00:04:59,720 --> 00:05:04,130
Let's give it an identifier so let's say containing

67
00:05:07,640 --> 00:05:10,580
coming up here because this is an I.D. So hash

68
00:05:15,300 --> 00:05:16,860
on let's face those lines here.

69
00:05:17,950 --> 00:05:23,010
Let's say that now we've got both the fact that a graphs.

70
00:05:23,300 --> 00:05:27,430
So as I mentioned earlier there are two ways to select each team element.

71
00:05:27,440 --> 00:05:30,320
One was I.D. and another was plus.

72
00:05:30,320 --> 00:05:34,820
So we use glass when you want to add the same style to multiple extreme elements.

73
00:05:34,820 --> 00:05:37,690
So in our case both the four paragraphs have the same style.

74
00:05:38,180 --> 00:05:43,780
So we can use glass you select all this.

75
00:05:43,850 --> 00:05:44,990
Let's give it a glass.

76
00:05:45,050 --> 00:05:45,740
Say

77
00:05:48,400 --> 00:05:53,680
country description let's save it.

78
00:05:54,450 --> 00:05:56,090
And as you can see the states have one.

79
00:05:56,970 --> 00:06:00,310
So to use glasses we use dark colored by last name.

80
00:06:00,330 --> 00:06:06,320
So dark and then the plus name was country description let's face the science.

81
00:06:07,170 --> 00:06:08,010
Let's save it.

82
00:06:08,360 --> 00:06:10,250
And as you can see the Stones are back

83
00:06:12,970 --> 00:06:13,880
similarly.

84
00:06:13,930 --> 00:06:18,110
The other paragraph if you just remove these stains from view if you save it.

85
00:06:18,550 --> 00:06:20,860
So as you can see the states are gone.

86
00:06:21,120 --> 00:06:28,000
But now I've seen signs that we added to the above paragraph you can just use plus the last name was

87
00:06:29,200 --> 00:06:30,760
country description.

88
00:06:30,760 --> 00:06:36,620
Let's say that and as you can see all states are back.

89
00:06:36,640 --> 00:06:39,000
So this is how we are in the United States.

90
00:06:39,010 --> 00:06:46,690
So we are all are CSF inside this state element in extreme heat down now moving on to the third method

91
00:06:46,720 --> 00:06:48,940
which is external statements.

92
00:06:49,000 --> 00:06:59,040
So for that we need to create a new finds and we will do that so Explorer file index doctor.

93
00:06:59,320 --> 00:07:03,230
So these see as a science have extension dots yes yes.

94
00:07:03,280 --> 00:07:06,670
So let's create this new file.

95
00:07:06,870 --> 00:07:11,400
Now if you see here these are all the states that we've used for the beach.

96
00:07:11,490 --> 00:07:18,490
So just cut all these states from Europe and based it you.

97
00:07:18,810 --> 00:07:19,140
All right.

98
00:07:19,170 --> 00:07:20,040
Let's save it.

99
00:07:20,760 --> 00:07:30,090
Let's remove this empty state element let's see what so coming back here.

100
00:07:30,270 --> 00:07:33,400
And now as you can see all the states are gone.

101
00:07:33,560 --> 00:07:35,990
They may just be going to the next islands.

102
00:07:35,990 --> 00:07:40,900
Everything is gone waste like so we did create a new.

103
00:07:41,210 --> 00:07:41,940
Yes that's fine.

104
00:07:41,960 --> 00:07:44,890
But we did not link it to that extreme beach.

105
00:07:44,990 --> 00:07:49,790
So for that so delaying external finance means the link element.

106
00:07:49,790 --> 00:07:53,690
So let's adopt.

107
00:07:53,880 --> 00:07:59,430
So this is a sense using other means we don't need a global dog you know it requires a property to define

108
00:07:59,430 --> 00:08:01,100
the location of next a most vital.

109
00:08:01,260 --> 00:08:07,060
So it's left on because this is the local finance so we be using the relative but so forward slash.

110
00:08:07,330 --> 00:08:10,140
And as you can see with brother and Nick's I see as a slight.

111
00:08:10,230 --> 00:08:12,810
So let's send it back now.

112
00:08:12,840 --> 00:08:13,380
Thank you guys.

113
00:08:13,380 --> 00:08:22,260
Another property good value in relation to this property is used to define the relationship between

114
00:08:22,260 --> 00:08:27,500
this you know document and text a file in our case it is time sheet.

115
00:08:28,150 --> 00:08:34,670
So let's write that but saved some houses also required a file type suit.

116
00:08:34,780 --> 00:08:36,070
For now let's just add it.

117
00:08:36,400 --> 00:08:40,910
So type text slash uses.

118
00:08:41,170 --> 00:08:41,900
Let's save it.

119
00:08:42,370 --> 00:08:44,100
Let's bring it up here.

120
00:08:44,200 --> 00:08:50,200
As you can see both sides are back so that's how you got external to see those files.

121
00:08:50,210 --> 00:08:53,680
Do you know each All right.

122
00:08:54,380 --> 00:08:59,840
Now let's say you have a defined status what an age gender element using all three methods.

123
00:08:59,840 --> 00:09:03,660
So the question arises which style will be used.

124
00:09:03,680 --> 00:09:08,890
So in that case the priority goes something like this in line status.

125
00:09:08,890 --> 00:09:12,390
Well what I am doing those statements internal.

126
00:09:12,420 --> 00:09:14,090
Over right next to an old style.

127
00:09:14,620 --> 00:09:24,070
Let's write an example to understand this better so let's just bring this up here so if you see this

128
00:09:24,070 --> 00:09:32,700
country name this heading has a font size of 48 pixels and next alignment of center so if we use the

129
00:09:32,700 --> 00:09:37,090
same I mean and adding more styles internally.

130
00:09:37,200 --> 00:09:40,910
So let's create a style element here

131
00:09:43,840 --> 00:09:45,250
and let's use that idea here.

132
00:09:46,210 --> 00:09:52,190
So let's say font size the 60 pixels.

133
00:09:52,190 --> 00:09:55,810
Let's say that as you can see the font size is bigger.

134
00:09:56,230 --> 00:09:58,670
Or let's say you want a smaller size say 20.

135
00:09:59,070 --> 00:10:02,340
Let's save it on as you can see it's just bigger.

136
00:10:02,690 --> 00:10:08,780
But still if you look at your next item find the font size is what you want internally on the page.

137
00:10:08,840 --> 00:10:10,810
We have you in the font size that's 20.

138
00:10:10,880 --> 00:10:13,100
So this 20 overrides the 48.

139
00:10:13,850 --> 00:10:18,820
Similarly as I mention the inland stands all right then Donald states.

140
00:10:18,830 --> 00:10:21,860
So this is the country name heading.

141
00:10:22,490 --> 00:10:23,920
So let's add some states.

142
00:10:24,710 --> 00:10:30,220
Let's say you want a bigger font size so font size the police sticks pixels.

143
00:10:30,260 --> 00:10:30,920
Let's save it.

144
00:10:31,610 --> 00:10:36,240
And as you can see the font size increased by heading so let's compare.

145
00:10:36,820 --> 00:10:43,610
So next only five the I just want you pixels for they internal assessment but the font size adds to

146
00:10:43,700 --> 00:10:44,550
the pixels.

147
00:10:45,110 --> 00:10:49,960
But for the nine states we've got the fun saves us 36 pixels.

148
00:10:50,010 --> 00:10:53,100
So as you can see the line stylistic the priority over.

149
00:10:53,380 --> 00:11:01,510
But the other options now another thing to remember say you are the more science for the same plus.

150
00:11:01,570 --> 00:11:07,710
So you can do description and use the same property and you update developments in sort of center.

151
00:11:07,710 --> 00:11:13,920
Now you see that if you say it you can see all your description is left alone.

152
00:11:14,220 --> 00:11:16,590
So even the sequence matters.

153
00:11:16,590 --> 00:11:23,480
So what they will sign is that you've defined the last is what is going to be Linda on next you know

154
00:11:23,490 --> 00:11:26,240
beach that's all for today guys.

155
00:11:26,260 --> 00:11:30,640
If there's something that you do not understand will you drop a comment and we will discuss it see you

156
00:11:30,760 --> 00:11:32,510
in the next video by anti-gay.