1
00:00:00,600 --> 00:00:02,110
Hello and welcome.

2
00:00:02,130 --> 00:00:10,830
In this video I will be including new to some basic CNS Selig talks.

3
00:00:10,830 --> 00:00:15,110
There are different types of celek talks in CFS.

4
00:00:15,270 --> 00:00:25,870
We've already used the element selektah and also the campaign selector bar just runs through these busy

5
00:00:26,010 --> 00:00:27,700
selector's on the screen.

6
00:00:27,930 --> 00:00:30,600
So we've got the element selector.

7
00:00:30,930 --> 00:00:40,200
Basically it refers to the outroar his team element for example the paragraph element which is the element

8
00:00:40,470 --> 00:00:49,440
that is known as an element to select the heading or one that could be another element selector.

9
00:00:49,620 --> 00:00:51,800
So there are different elements selectors.

10
00:00:52,170 --> 00:01:01,330
You specify an elemental leg Tau base on the hastier male element you're trying to apply the thesis

11
00:01:01,660 --> 00:01:03,340
to next.

12
00:01:03,450 --> 00:01:13,380
We've got the idea select the it is selected basically he is used to select an element on the piece

13
00:01:14,130 --> 00:01:17,140
that has a specific idea.

14
00:01:17,320 --> 00:01:19,050
The These are unique.

15
00:01:19,050 --> 00:01:24,300
You can only have one element part on the page.

16
00:01:24,300 --> 00:01:30,610
You can't use the same idea for more to pull elements on the page.

17
00:01:30,660 --> 00:01:39,850
So these select tools are unique and they are represented in the Seer says by the hash symbol.

18
00:01:39,990 --> 00:01:48,260
So in a way you see how symbol in his thesis sheet you know that's referring to an IED top necks were

19
00:01:48,330 --> 00:01:51,930
class select which is similar to the idea.

20
00:01:51,930 --> 00:01:57,510
But the key difference with the club selector is that you can reference it multiple times.

21
00:01:57,630 --> 00:02:06,270
You can declare the class selector on a page and use it on several elements on that page in comparison

22
00:02:06,270 --> 00:02:15,630
to idees select or that is unique pair element on a page and you characterize that class selector with

23
00:02:15,630 --> 00:02:17,550
a period of a dot.

24
00:02:17,550 --> 00:02:25,890
So in a way you see a period of a dot in this SS style sheet you know you are referring to a class for

25
00:02:26,010 --> 00:02:27,120
the group in Selecter.

26
00:02:27,150 --> 00:02:34,080
We've used the group in select us so far in this course where we selected multiple elements and group

27
00:02:34,080 --> 00:02:36,630
them together to apply styling.

28
00:02:36,630 --> 00:02:38,010
Just like I've done here.

29
00:02:38,190 --> 00:02:41,990
So that is known as a grouping selector.

30
00:02:42,390 --> 00:02:46,560
There's also another selector here which is represented by the Asterix symbol.

31
00:02:46,560 --> 00:02:53,670
What that does is used to select all the elements you want to apply set installed to all the elements

32
00:02:53,670 --> 00:02:54,550
on the page.

33
00:02:54,780 --> 00:03:04,020
Then you can use the esoterics solectron and that will apply the stylin to all the elements in the piece.

34
00:03:04,590 --> 00:03:06,960
So this is my hastier mail.

35
00:03:06,980 --> 00:03:09,060
I click on my thesis far here.

36
00:03:09,420 --> 00:03:13,150
We can see an example of the krupin selector here.

37
00:03:13,150 --> 00:03:21,360
This is a group in Selecter way you use group in more than one element and apply in this stylin to that

38
00:03:21,550 --> 00:03:23,610
to those elements here.

39
00:03:23,620 --> 00:03:27,240
This is an element select all of us use one element.

40
00:03:27,240 --> 00:03:34,410
So I'm going to do I'm going to define an idea selector and also a class select so I can show you how

41
00:03:34,530 --> 00:03:35,660
they are used.

42
00:03:35,680 --> 00:03:41,970
So I'm going to go back to my hasty email documents click on the index storage Tim hell and I'm going

43
00:03:41,970 --> 00:03:44,130
to the way you had.

44
00:03:44,220 --> 00:03:46,660
You have to had an idea.

45
00:03:46,830 --> 00:03:51,210
You do that using the attribute the ADA is an attribute.

46
00:03:51,450 --> 00:03:58,350
So what you do here for example I want to make this paragraph 1 make the content in italics.

47
00:03:58,350 --> 00:04:07,130
So what I do which is this content here is the paragraph tag is where I need to specify a space and

48
00:04:07,510 --> 00:04:16,290
type in idea which is the idea attributes you give it an in name of value you surround the value in

49
00:04:16,650 --> 00:04:17,770
quotes.

50
00:04:17,860 --> 00:04:20,160
So I'm going to call this quote.

51
00:04:20,650 --> 00:04:21,390
All right.

52
00:04:21,570 --> 00:04:25,500
So I give in this paragraph an idea now which is unique.

53
00:04:25,650 --> 00:04:28,400
I can not now that I use this here.

54
00:04:28,620 --> 00:04:33,410
Ah can't you use the same I.D. anywhere else in the page.

55
00:04:33,420 --> 00:04:35,290
This is unique to the AP.

56
00:04:35,550 --> 00:04:41,300
So now I go into my sixth sense and way to use the.

57
00:04:41,340 --> 00:04:48,810
You indicate a pound sign which indicates that you are referencing an I.D. form or by the name of the

58
00:04:48,810 --> 00:04:49,340
idea.

59
00:04:49,370 --> 00:04:55,990
I called mine quote let me go back just to make sure you don't get it right.

60
00:04:56,130 --> 00:04:58,850
It will not apply this year Seth.

61
00:04:58,890 --> 00:04:59,630
So that's smart.

62
00:04:59,850 --> 00:05:01,770
The court quote.

63
00:05:02,230 --> 00:05:07,640
And next I do the curly braces opening and closing higher.

64
00:05:07,810 --> 00:05:14,100
All I want to do here is make the font the style of the font.

65
00:05:16,240 --> 00:05:19,290
I want to make it italics.

66
00:05:20,890 --> 00:05:22,800
And just end that with a semi.

67
00:05:22,840 --> 00:05:24,390
You can see it is already reflected.

68
00:05:24,400 --> 00:05:25,810
Look at this here.

69
00:05:25,870 --> 00:05:28,340
You see that already in italics.

70
00:05:28,760 --> 00:05:37,210
So I just click say well to this as an example of use in páidí attribute where you use the attribute

71
00:05:37,570 --> 00:05:39,290
inside the mean element.

72
00:05:39,280 --> 00:05:44,660
Like I've done here so you can only have one idea.

73
00:05:44,760 --> 00:05:51,240
Pipi so I cannot use this idea quote any more on this page on any other element.

74
00:05:51,250 --> 00:05:58,070
Next I want to add a star class a class attribute lady.

75
00:05:58,240 --> 00:06:03,760
So I want to this paragraph you quote Today's a new day which is this one here.

76
00:06:03,960 --> 00:06:08,000
And also this here which is this here.

77
00:06:08,350 --> 00:06:15,980
I want to use class selector's to apply C says to all our do.

78
00:06:16,060 --> 00:06:17,790
Inside here.

79
00:06:18,000 --> 00:06:22,810
The class electo you can use it multiple times in a page while I slept.

80
00:06:22,840 --> 00:06:24,940
You can only use it once.

81
00:06:24,940 --> 00:06:27,820
So here I am going to define the class.

82
00:06:28,040 --> 00:06:31,340
You define it inside the opening elements.

83
00:06:31,450 --> 00:06:34,840
So when a typing class as attribute.

84
00:06:35,170 --> 00:06:47,540
And then give it value when called it is call it para k. and I can use it again here.

85
00:06:47,710 --> 00:07:00,250
And when I use it again here typing class I give it a value of power so you can see here I am using

86
00:07:00,310 --> 00:07:05,280
the same class twice so you can use it any number of times.

87
00:07:05,470 --> 00:07:07,350
Any element on your page.

88
00:07:07,720 --> 00:07:10,860
Whereas the idea is unique.

89
00:07:11,080 --> 00:07:14,860
So I can use this called quote anymore on this p.

90
00:07:15,100 --> 00:07:25,560
So now I have defined this here the class inside the H2 element I need to go to my csx and add the styling

91
00:07:25,570 --> 00:07:27,790
for that is called Para.

92
00:07:27,790 --> 00:07:43,960
So I come here to my CFS and appear at a dot followed by the name of the class and then my curly braces.

93
00:07:43,990 --> 00:07:46,980
Now separately calibrate is in between equilibrates.

94
00:07:46,990 --> 00:07:50,990
I will now indicate the style rules I want.

95
00:07:51,350 --> 00:07:56,680
So watch out for this paragraph here and this one here.

96
00:07:56,710 --> 00:07:59,620
As I begin to type in this time it should change.

97
00:07:59,950 --> 00:08:09,600
I'll see font size on to change the font size and make that 25 pixel.

98
00:08:09,600 --> 00:08:18,090
If you notice is changing now makes I want to change the colour make this blue.

99
00:08:20,650 --> 00:08:25,600
I forgot to separate you.

100
00:08:25,830 --> 00:08:27,320
You say that.

101
00:08:27,370 --> 00:08:29,080
So now I have used the class.

102
00:08:29,080 --> 00:08:32,700
You can see as reflected in this two paragraph.

103
00:08:32,890 --> 00:08:37,670
So that's physically how you use a class select.

104
00:08:37,910 --> 00:08:47,110
And I select to so always note that the key difference between a class selector and an idea select is

105
00:08:47,110 --> 00:08:53,600
that class select can be used multiple times or in any element on the page.

106
00:08:53,810 --> 00:08:58,870
An I.D. soluto is unique to the element here of course it's equal.

107
00:08:58,900 --> 00:09:05,650
Quote I can use this quote anywhere else on the page or any other element.

108
00:09:05,830 --> 00:09:10,180
Whereas this class I've got power I can use it any way I want.

109
00:09:10,420 --> 00:09:16,530
So that's it for this basic introduction to see SS select books.

110
00:09:16,690 --> 00:09:18,130
Thank you for watching.

111
00:09:18,130 --> 00:09:19,070
Bye for now.