1
00:00:00,200 --> 00:00:02,540
All right so it's time for another exercise here.

2
00:00:02,820 --> 00:00:08,430
So this exercise is going to cover everything that we've talked about as far as SS selectors.

3
00:00:08,520 --> 00:00:14,700
So we're not going to actually build any sort of complete cohesive Web site that's coming next.

4
00:00:14,700 --> 00:00:17,930
We're going to make a little blog in the next exercise.

5
00:00:17,970 --> 00:00:23,460
This one is more of a traditional exercise with a bunch of problems very short problems.

6
00:00:23,460 --> 00:00:28,150
Basically I'm giving you a bunch of HMO it looks like this.

7
00:00:28,200 --> 00:00:29,900
It doesn't really mean anything.

8
00:00:29,910 --> 00:00:33,640
In fact all the text here is from a Web site called hipster ipsum.

9
00:00:33,650 --> 00:00:41,280
It's it's just like a dorm ipsum except it's using hipster words like farm to table and locavore and

10
00:00:41,280 --> 00:00:44,170
Portland and Williamsburg.

11
00:00:44,340 --> 00:00:45,940
So it's just a bunch of words.

12
00:00:46,260 --> 00:00:51,500
So the point is it doesn't matter what's here what does matter though is this file.

13
00:00:51,570 --> 00:00:54,700
The CSSA file that I also gave you and it's empty.

14
00:00:54,810 --> 00:01:00,250
Aside from a bunch of comments and these comments give you instructions for what you need to do.

15
00:01:00,360 --> 00:01:06,030
So up top is the most important line style the age HTML elements according to the following instructions

16
00:01:06,240 --> 00:01:09,250
do not alter the existing HVM else to do this right.

17
00:01:09,270 --> 00:01:11,020
Only CSI s.

18
00:01:11,130 --> 00:01:14,120
So that means don't touch this file.

19
00:01:14,190 --> 00:01:16,430
This is here just as starter code for you.

20
00:01:16,440 --> 00:01:17,690
This is the HVM.

21
00:01:17,970 --> 00:01:24,450
You're going to do everything in C SS So you cannot go in here and add new ideas or add new classes

22
00:01:24,750 --> 00:01:25,710
or add new elements.

23
00:01:25,710 --> 00:01:28,350
Just keep it exactly how it is.

24
00:01:28,580 --> 00:01:32,120
So the way that it works there are different problems.

25
00:01:32,190 --> 00:01:37,310
So the first one gives the body element a background of this color.

26
00:01:37,440 --> 00:01:45,210
We would just write the code into select the body and then give it a color like this.

27
00:01:45,210 --> 00:01:48,690
So I'll give you that one for free.

28
00:01:49,050 --> 00:01:51,200
I'm sure most of you could have done that.

29
00:01:51,300 --> 00:01:57,720
Same goes for all of these so make all h ones make all age to do something make all ally elements one

30
00:01:57,720 --> 00:01:58,350
note.

31
00:01:58,350 --> 00:02:04,020
Some of these will ask you to use a property that we haven't actually covered yet and that's deliberate

32
00:02:04,230 --> 00:02:04,510
.

33
00:02:04,590 --> 00:02:08,760
I just want you to have some experience for some properties that we haven't explicitly talked about

34
00:02:08,760 --> 00:02:09,750
in videos yet.

35
00:02:10,080 --> 00:02:11,960
So in that case here's one.

36
00:02:12,030 --> 00:02:18,600
Make all the paragraphs that are nested inside of divs 25 pixel fun and then in parentheses I give you

37
00:02:18,600 --> 00:02:22,700
the code that you need so font size 25 x.

38
00:02:23,070 --> 00:02:24,490
So there's a few more of those.

39
00:02:24,720 --> 00:02:32,160
Here's one and here's one more make all checked checkboxes have a left margin of 50 pixels so you need

40
00:02:32,160 --> 00:02:37,650
to use margin left 50 pixels and it's OK that you don't know exactly what it does that's coming in the

41
00:02:37,650 --> 00:02:39,330
next few videos.

42
00:02:39,450 --> 00:02:40,900
So one other note here.

43
00:02:41,040 --> 00:02:44,080
These get a little bit harder as they go along.

44
00:02:44,190 --> 00:02:52,020
So up top they start with just an element selector and then we talk about classes and ideas and then

45
00:02:52,020 --> 00:02:56,270
we start to talk about some of those other selectors that we mentioned in the last video.

46
00:02:56,430 --> 00:03:03,960
So make all of the paragraphs that are nested inside of divs make only inputs with type text.

47
00:03:03,960 --> 00:03:11,910
Have a great background and then things like give the second paragraph inside the third div 5 pixel

48
00:03:11,910 --> 00:03:13,160
white border.

49
00:03:13,710 --> 00:03:20,040
So the good news is that all of the selectors that you need to use here can be found in the 30s CSSA

50
00:03:20,090 --> 00:03:20,640
selectors.

51
00:03:20,640 --> 00:03:25,890
You must memorize article and you can easily find them on line and we've covered most of them.

52
00:03:26,130 --> 00:03:31,620
There are a few though that we didn't cover in the last video and those are under the bonus challenges

53
00:03:31,620 --> 00:03:32,410
section.

54
00:03:32,580 --> 00:03:39,870
So that includes things like making all checked checkboxes have a left margin so there's a way to select

55
00:03:39,990 --> 00:03:42,780
the checked checkboxes.

56
00:03:42,780 --> 00:03:44,050
Or here's another one.

57
00:03:44,110 --> 00:03:49,750
Make the first letter of the element with special green and 100 pixel font size.

58
00:03:49,950 --> 00:03:54,100
So there's a way to select just the first letter.

59
00:03:54,570 --> 00:04:00,150
Make the H-1 elements color change to blue when hovered over and make a tag elements that have been

60
00:04:00,150 --> 00:04:01,340
visited grey.

61
00:04:01,350 --> 00:04:05,070
So remember a tag is a link and you've probably seen this before.

62
00:04:05,190 --> 00:04:09,420
You can change or sites will change the color of a link that you've been to compared to a link that

63
00:04:09,420 --> 00:04:10,730
you haven't been to before.

64
00:04:11,100 --> 00:04:14,120
So there's a way of writing that would see assess.

65
00:04:14,310 --> 00:04:17,450
So as always in the next video we're going to go over a solution.

66
00:04:17,460 --> 00:04:23,880
Can it go bit by bit but I recommend you give this a shot go as far as you can try all of these bonuses

67
00:04:23,880 --> 00:04:24,660
.

68
00:04:24,660 --> 00:04:28,430
One thing I didn't mention here this one is slightly different.

69
00:04:28,500 --> 00:04:34,970
Make the label elements all uppercase without changing the h t m l so the selector here is actually

70
00:04:35,340 --> 00:04:41,430
simple we're just selecting all label elements but the property is a little challenging.

71
00:04:41,430 --> 00:04:47,250
There is a way using C Ss to make something all uppercase without actually changing the text in the

72
00:04:47,450 --> 00:04:47,870
HTML.

73
00:04:47,880 --> 00:04:51,720
You can do it through C Ss just like you would change the color or the border.

74
00:04:51,720 --> 00:04:55,320
You can change a property that will make it uppercase or lowercase.

75
00:04:55,560 --> 00:04:56,690
All right so see in the next video