1
00:00:00,390 --> 00:00:06,690
So the next thing they might want to focus on is thinking about her aged him a little bit more.

2
00:00:07,080 --> 00:00:16,110
So what I'm going to want to do here is go ahead and add the date in this paragraph here this quote

3
00:00:16,350 --> 00:00:23,220
paragraph and then we might also want to group our elements or our posts together so that we have one

4
00:00:23,220 --> 00:00:26,510
post as an element and to do that.

5
00:00:26,790 --> 00:00:32,590
Just going to use a div here so I'm going to make a new div class equals post.

6
00:00:32,700 --> 00:00:36,070
So I'm just giving it a class just to make it clear what this is.

7
00:00:36,080 --> 00:00:39,240
Because just by saying div it's not very clear what it's doing.

8
00:00:39,450 --> 00:00:46,610
And this will be one post and then we'll have another div class post for the second one down here.

9
00:00:46,980 --> 00:00:50,430
So let's go ahead and add in a date as well.

10
00:00:50,760 --> 00:00:54,010
And for that date that could really be anything.

11
00:00:54,300 --> 00:00:59,800
I'm going to make it another div class equals date but that could be a paragraph as well if you wanted

12
00:00:59,820 --> 00:01:00,600
to be.

13
00:01:00,600 --> 00:01:02,790
It doesn't really matter in this case.

14
00:01:03,390 --> 00:01:08,520
And then another thing we want to do is add in this quote and I'm just going to make that a paragraph

15
00:01:09,450 --> 00:01:15,240
down here but I'm going to make it slightly different of course because I need to style it differently

16
00:01:15,240 --> 00:01:16,350
than these paragraphs

17
00:01:18,840 --> 00:01:23,190
so I'm going to say let's go give it a class called quote.

18
00:01:25,110 --> 00:01:27,740
And then while we're here let's add in our date here.

19
00:01:27,900 --> 00:01:32,400
November 23rd 2015 and safe.

20
00:01:32,400 --> 00:01:36,620
So if you are fresh right now it's going to look really close to what we're looking for.

21
00:01:36,630 --> 00:01:38,640
We have to change the date quite a bit.

22
00:01:39,000 --> 00:01:44,020
When you change the font size of this H-1 Here let me make them side by side.

23
00:01:44,280 --> 00:01:47,260
We need to add in this left border here on the quote.

24
00:01:47,610 --> 00:01:53,310
When you change the color if this the spacing if this is then we need to add this h r in.

25
00:01:53,850 --> 00:02:00,140
So let's go ahead and start by styling.

26
00:02:00,420 --> 00:02:02,170
This left Forder here.

27
00:02:02,280 --> 00:02:08,640
So remember we have the class which we called quote right here.

28
00:02:09,150 --> 00:02:10,730
We're going to want to go back to RC ss.

29
00:02:10,740 --> 00:02:13,960
It's a like quote.

30
00:02:16,800 --> 00:02:20,730
And then all we need to do is add in order left

31
00:02:24,600 --> 00:02:28,470
5 pixels and the color is the same as this one.

32
00:02:28,470 --> 00:02:34,180
So five pixels solid gray that shade of gray.

33
00:02:34,560 --> 00:02:35,590
And that's it.

34
00:02:36,000 --> 00:02:37,200
And we take a look.

35
00:02:37,530 --> 00:02:38,040
OK.

36
00:02:38,040 --> 00:02:39,510
So that's looking close.

37
00:02:39,510 --> 00:02:43,140
The only thing you'll notice is that there's some spacing here.

38
00:02:43,140 --> 00:02:48,300
And of course that spacing is between the border the left border and the element.

39
00:02:48,450 --> 00:02:50,970
So that would be padding that we need to change.

40
00:02:51,360 --> 00:02:59,550
So to change that padding I'm just going to do padding left five pixels to refresh and that looks pretty

41
00:02:59,550 --> 00:03:00,610
good.

42
00:03:00,630 --> 00:03:05,190
You can see these look identical Now the two quote paragraphs.

43
00:03:05,190 --> 00:03:08,460
So next up we have a few choices.

44
00:03:08,760 --> 00:03:12,410
Let's go ahead and tackle the date.

45
00:03:12,480 --> 00:03:15,060
So there's a few things we want to make it all uppercase.

46
00:03:15,140 --> 00:03:20,720
I want to change the color and we want to add this line spacing or the letter spacing.

47
00:03:21,120 --> 00:03:26,370
So I'm going to move this over to the left select the date class.

48
00:03:26,370 --> 00:03:30,880
That's what we call it day of class date.

49
00:03:32,370 --> 00:03:34,300
So Dot date.

50
00:03:34,890 --> 00:03:40,100
And while I'm here let's grab the color which is this particular shade of blue.

51
00:03:40,290 --> 00:03:47,480
And let's just assign color to be that blue and refresh you can see where part of the way there.

52
00:03:47,970 --> 00:03:59,110
So to make it all upper case using CSSA you might remember from the Selecta video text transform uppercase

53
00:03:59,140 --> 00:04:00,290
.

54
00:04:00,330 --> 00:04:01,470
And if we were fresh.

55
00:04:01,800 --> 00:04:04,600
OK that's looking pretty close.

56
00:04:04,620 --> 00:04:09,190
Pretty much the only thing we have left to do is the letter spacing.

57
00:04:09,570 --> 00:04:12,040
So we have a bunch of options for letter spacing.

58
00:04:12,510 --> 00:04:18,840
As far as the size and the units we use but the the property is called letter spacing.

59
00:04:19,350 --> 00:04:20,400
And then we can give it a number.

60
00:04:20,400 --> 00:04:23,490
So I'm using to 10 pixels first to show you.

61
00:04:23,490 --> 00:04:28,560
And that gives us 10 pixels between numbers which is quite a bit and much more than we need.

62
00:04:28,560 --> 00:04:37,560
So what I'm actually going to use is another unit called r e m and R.E.M. is just like IEMs which are

63
00:04:37,560 --> 00:04:41,000
relative to the element that they're nested inside of.

64
00:04:41,100 --> 00:04:44,550
Except that RPMs are not set by the parent element.

65
00:04:44,550 --> 00:04:47,170
They're actually set by the root element on the page.

66
00:04:47,370 --> 00:04:59,100
So what that means is if I access inside the body 2.00 R.E.M. and I set font size to be 2.00 R.E.M.

67
00:04:59,580 --> 00:05:06,240
and I do that instead of quote as well they're actually referring to the same font size versus if this

68
00:05:06,240 --> 00:05:13,970
was E-M it would be setting the body to be twice as big as the parent element and then the quote which

69
00:05:13,980 --> 00:05:17,760
is inside the body would be twice as big as this one here.

70
00:05:17,760 --> 00:05:19,220
So it's relative.

71
00:05:19,290 --> 00:05:22,860
When we add in R.E.M. though it's referring to the root element.

72
00:05:22,860 --> 00:05:28,110
So this is a nice way to basically do proportional fonts without having to worry about what's nested

73
00:05:28,110 --> 00:05:29,740
inside of what.

74
00:05:29,850 --> 00:05:38,110
So I'm not going to change font size and the body but for our date what we wanted to.

75
00:05:38,760 --> 00:05:44,710
I'm going to use zero point to RLM.

76
00:05:44,760 --> 00:05:50,820
So that's just going to take the normal font size and add a little bit extra spacing between the letters

77
00:05:50,940 --> 00:05:56,640
point to of the font size so you'll see here we end up with that which looks just right.

78
00:05:56,700 --> 00:06:03,120
It's Point 2 and I'm not expecting you just to know that I know that it was point 2 because I wrote

79
00:06:03,120 --> 00:06:08,180
it but if I was doing this from scratch I would have played around a little bit and I would have tried

80
00:06:09,630 --> 00:06:11,910
point five first see what that looks like.

81
00:06:11,910 --> 00:06:13,510
OK that's too big.

82
00:06:13,890 --> 00:06:16,720
And you know it's not it it's not an exact science.

83
00:06:16,860 --> 00:06:20,110
It just is in this case because I was the one who wrote it.

84
00:06:20,910 --> 00:06:21,570
OK.

85
00:06:22,110 --> 00:06:24,620
So we have that done that looks pretty good.

86
00:06:24,990 --> 00:06:31,410
Let's compare these now really all that were missing it looks like.

87
00:06:31,410 --> 00:06:39,620
Aside from the extra content done here is making this H2 bigger and slightly changing the color.

88
00:06:40,260 --> 00:06:41,800
So let's do the color first.

89
00:06:41,820 --> 00:06:50,820
We're going to select all age twos and the color I have right here just a dark blue going to set the

90
00:06:50,820 --> 00:06:53,670
color if we are fresh.

91
00:06:53,670 --> 00:06:57,560
It's really hard to see but it changed ever so slightly.

92
00:06:58,260 --> 00:06:59,900
And then there are two other things.

93
00:06:59,940 --> 00:07:03,700
Well there's one main thing that we want to do which is changing the font size.

94
00:07:04,410 --> 00:07:09,840
And I happen to know that this is twice the font size as everything else.

95
00:07:09,840 --> 00:07:13,360
So that would be 2.0 rpms.

96
00:07:13,470 --> 00:07:22,970
So we just are going to set font size 2.0 R.E.M. save refresh and we end up with this.

97
00:07:22,980 --> 00:07:28,650
So let's compare that now and everything looks exactly the same.

98
00:07:28,650 --> 00:07:32,780
Up until this paragraph that we're missing here then everything below.

99
00:07:33,480 --> 00:07:36,660
So let's go ahead and add in this paragraph.

100
00:07:36,720 --> 00:07:38,290
I'm just going to copy the text.

101
00:07:38,610 --> 00:07:43,470
But feel free to use whatever text your lordship some that you like and then we'll add in another blog

102
00:07:43,470 --> 00:07:45,450
post and see how that looks.

103
00:07:46,110 --> 00:07:53,000
So back to the h t m l and I'm just going to add another paragraph at the bottom and paste that in.

104
00:07:54,420 --> 00:08:01,520
OK so that is our first blog post.

105
00:08:01,540 --> 00:08:03,360
We compare them.

106
00:08:03,360 --> 00:08:06,190
They look identical except for this H.R..

107
00:08:06,210 --> 00:08:11,350
So that is one thing that we're going to want to add in there is H R which will leave until the end