1
00:00:05,190 --> 00:00:10,160
We're taking a look at a whole bunch of cool animation cool things you can do with a queer.

2
00:00:10,310 --> 00:00:15,520
Before we get to further let's go ahead and make sure that we have a good understanding of selectors

3
00:00:15,520 --> 00:00:17,580
because it's such a key thing with a query.

4
00:00:17,590 --> 00:00:22,180
Let's talk more about these selectors and what we do with them.

5
00:00:22,180 --> 00:00:28,790
So what we've got here is just a regular paragraph and I've got a class of text right there.

6
00:00:29,080 --> 00:00:32,170
McAbee then we create a couple different versions of it.

7
00:00:33,300 --> 00:00:36,340
We can clean up my formatting there.

8
00:00:36,480 --> 00:00:37,150
All right.

9
00:00:37,490 --> 00:00:38,000
So

10
00:00:40,860 --> 00:00:46,560
what I want to do is I want to create a couple of different sectors within my coworker at the top.

11
00:00:46,650 --> 00:00:54,180
So as we start everything out as always I'm wanting to do one that is just for the P-TECH the paragraph

12
00:00:54,390 --> 00:01:00,720
tag and what I want to do is because I want to slight the end and define that with some CSSA and learn

13
00:01:00,720 --> 00:01:02,450
to use the option I'm stuck.

14
00:01:02,460 --> 00:01:05,540
See us there as part of Jake Weary.

15
00:01:06,030 --> 00:01:11,400
And now I can apply any kind of style that I want to with it but it's just really a little bit differently

16
00:01:11,400 --> 00:01:12,460
than you would normally see.

17
00:01:12,480 --> 00:01:16,830
SS But think along those same lines some say open coats.

18
00:01:18,350 --> 00:01:27,030
I would say in order for this one after the quote mark I'm gonna hit it a column and I'll do a new quote.

19
00:01:27,120 --> 00:01:29,220
So it's kind of same border colon.

20
00:01:29,250 --> 00:01:34,850
You know what you're using C Ss but instead you do in a common with code surrounding the two.

21
00:01:35,130 --> 00:01:44,850
I'm going to give the actual value to what this border is saying a one pixel red dotted border and the

22
00:01:44,990 --> 00:01:51,220
three just you can see and we'll close it out with a semi-colon right there and that's going to give

23
00:01:51,280 --> 00:01:55,220
anything that is a paragraph that option.

24
00:01:55,630 --> 00:02:03,940
So I can do it again in a new class basically down new class and I'll say this time I'm going to do

25
00:02:04,000 --> 00:02:06,640
a shady area.

26
00:02:07,240 --> 00:02:13,510
So I say I don't like doing it doesn't matter.

27
00:02:13,910 --> 00:02:16,450
Top of maybe is something like that.

28
00:02:16,690 --> 00:02:18,740
And it's just like a bomb.

29
00:02:18,750 --> 00:02:21,130
And I wanted to do to see a sense.

30
00:02:21,130 --> 00:02:23,600
And I can give this one a little bit difference.

31
00:02:23,620 --> 00:02:27,430
Couldn't you use the same basic option just for kindness bead here.

32
00:02:27,430 --> 00:02:37,580
So see the border of one pixel blue solid line just kind of comparing apples to apples here.

33
00:02:38,500 --> 00:02:44,840
And let's do one more and this time I quit school and just cut this whole thing's running three times

34
00:02:44,880 --> 00:02:52,360
in the summer I do a class and will say that green corner.

35
00:02:52,590 --> 00:02:53,130
I right.

36
00:02:53,150 --> 00:02:53,590
No

37
00:02:57,390 --> 00:02:58,420
green border.

38
00:02:58,460 --> 00:03:06,800
See that's another border right there and this one will be a two pixel green.

39
00:03:06,970 --> 00:03:10,790
You must do a dash all right.

40
00:03:10,790 --> 00:03:18,040
So now I can kind of target each of these paragraphs down here with what I just created up here.

41
00:03:18,070 --> 00:03:23,400
So of course I've got the paragraph tag right there which will attach to anything.

42
00:03:23,500 --> 00:03:25,330
Let's say this paragraph

43
00:03:28,260 --> 00:03:31,050
ID equals.

44
00:03:33,040 --> 00:03:35,420
And their top is what I created there it looks like.

45
00:03:35,420 --> 00:03:35,780
Yes.

46
00:03:35,800 --> 00:03:37,010
OK Heidi.

47
00:03:37,050 --> 00:03:40,580
And and this one was a class and that will be green

48
00:03:44,670 --> 00:03:45,600
green borders.

49
00:03:45,600 --> 00:03:53,850
Now if I save my document and bring that into or was this one of the letters to get into a browser so

50
00:03:53,850 --> 00:03:59,440
you can see that I'm able to slight each one of those paragraphs separately through either a class an

51
00:03:59,490 --> 00:04:02,320
ID or just the regular paragraph tag.

52
00:04:02,970 --> 00:04:08,400
And just because it has a paragraph tag these other ones will overwrite it because they are just the

53
00:04:08,400 --> 00:04:10,160
way that the hierarchy goes.

54
00:04:10,210 --> 00:04:14,160
And with that fact that they'd had a ID or class added to it.

55
00:04:14,310 --> 00:04:18,740
So they understand selectors if not go back and check out the first video that we did.

56
00:04:19,110 --> 00:04:24,030
If not going back check out the first video that we did on selectors I'm doing an advanced class here

57
00:04:24,030 --> 00:04:24,800
shortly.

58
00:04:24,810 --> 00:04:26,950
So make sure you do understand this before we move on.