So the next thing they might want to focus on is thinking about her aged him a little bit more.
So what I'm going to want to do here is go ahead and add the date in this paragraph here this quote
paragraph and then we might also want to group our elements or our posts together so that we have one
post as an element and to do that.
Just going to use a div here so I'm going to make a new div class equals post.
So I'm just giving it a class just to make it clear what this is.
Because just by saying div it's not very clear what it's doing.
And this will be one post and then we'll have another div class post for the second one down here.
So let's go ahead and add in a date as well.
And for that date that could really be anything.
I'm going to make it another div class equals date but that could be a paragraph as well if you wanted
to be.
It doesn't really matter in this case.
And then another thing we want to do is add in this quote and I'm just going to make that a paragraph
down here but I'm going to make it slightly different of course because I need to style it differently
than these paragraphs
so I'm going to say let's go give it a class called quote.
And then while we're here let's add in our date here.
November 23rd 2015 and safe.
So if you are fresh right now it's going to look really close to what we're looking for.
We have to change the date quite a bit.
When you change the font size of this H-1 Here let me make them side by side.
We need to add in this left border here on the quote.
When you change the color if this the spacing if this is then we need to add this h r in.
So let's go ahead and start by styling.
This left Forder here.
So remember we have the class which we called quote right here.
We're going to want to go back to RC ss.
It's a like quote.
And then all we need to do is add in order left
5 pixels and the color is the same as this one.
So five pixels solid gray that shade of gray.
And that's it.
And we take a look.
OK.
So that's looking close.
The only thing you'll notice is that there's some spacing here.
And of course that spacing is between the border the left border and the element.
So that would be padding that we need to change.
So to change that padding I'm just going to do padding left five pixels to refresh and that looks pretty
good.
You can see these look identical Now the two quote paragraphs.
So next up we have a few choices.
Let's go ahead and tackle the date.
So there's a few things we want to make it all uppercase.
I want to change the color and we want to add this line spacing or the letter spacing.
So I'm going to move this over to the left select the date class.
That's what we call it day of class date.
So Dot date.
And while I'm here let's grab the color which is this particular shade of blue.
And let's just assign color to be that blue and refresh you can see where part of the way there.
So to make it all upper case using CSSA you might remember from the Selecta video text transform uppercase
.
And if we were fresh.
OK that's looking pretty close.
Pretty much the only thing we have left to do is the letter spacing.
So we have a bunch of options for letter spacing.
As far as the size and the units we use but the the property is called letter spacing.
And then we can give it a number.
So I'm using to 10 pixels first to show you.
And that gives us 10 pixels between numbers which is quite a bit and much more than we need.
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
relative to the element that they're nested inside of.
Except that RPMs are not set by the parent element.
They're actually set by the root element on the page.
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.
and I do that instead of quote as well they're actually referring to the same font size versus if this
was E-M it would be setting the body to be twice as big as the parent element and then the quote which
is inside the body would be twice as big as this one here.
So it's relative.
When we add in R.E.M. though it's referring to the root element.
So this is a nice way to basically do proportional fonts without having to worry about what's nested
inside of what.
So I'm not going to change font size and the body but for our date what we wanted to.
I'm going to use zero point to RLM.
So that's just going to take the normal font size and add a little bit extra spacing between the letters
point to of the font size so you'll see here we end up with that which looks just right.
It's Point 2 and I'm not expecting you just to know that I know that it was point 2 because I wrote
it but if I was doing this from scratch I would have played around a little bit and I would have tried
point five first see what that looks like.
OK that's too big.
And you know it's not it it's not an exact science.
It just is in this case because I was the one who wrote it.
OK.
So we have that done that looks pretty good.
Let's compare these now really all that were missing it looks like.
Aside from the extra content done here is making this H2 bigger and slightly changing the color.
So let's do the color first.
We're going to select all age twos and the color I have right here just a dark blue going to set the
color if we are fresh.
It's really hard to see but it changed ever so slightly.
And then there are two other things.
Well there's one main thing that we want to do which is changing the font size.
And I happen to know that this is twice the font size as everything else.
So that would be 2.0 rpms.
So we just are going to set font size 2.0 R.E.M. save refresh and we end up with this.
So let's compare that now and everything looks exactly the same.
Up until this paragraph that we're missing here then everything below.
So let's go ahead and add in this paragraph.
I'm just going to copy the text.
But feel free to use whatever text your lordship some that you like and then we'll add in another blog
post and see how that looks.
So back to the h t m l and I'm just going to add another paragraph at the bottom and paste that in.
OK so that is our first blog post.
We compare them.
They look identical except for this H.R..
So that is one thing that we're going to want to add in there is H R which will leave until the end