Reviews & Images Styles

[00:00:00]
>> The next thing we're going to take a look at is, in our practical.css.education website we're on chapter three, and we are looking at 3C, reviews and images. So, this is the next part of the page that we're going to style. And I am going to open up the screenshot that we have here.

[00:00:20]
And let's focus in down here at the bottom, so you can see what's going on. So, there's all of our tour dates, we just styled those. Then we have our images, there it is. And then we have our quote, and our stars, and the person who said it, all stacked nicely on top of each other like this, okay?

[00:00:44]
So let's go back and compare that with what we have in our CodePen so far. And as always, you can get the beginning CodePen and the ending CodePen, they're right here inside of the website. So let's take a look at what we have here. This is what ours looks like right now.

[00:01:05]
Okay, so can anyone make some suggestions. What is it that we need to fix? What is it that we need to change in order to set this page up? What do we need to do?
>> Horizontally align our stars.
>> Horizontally align our stars. They are kind of, a little much.

[00:01:27]
[LAUGH] So yeah, absolutely, we need to do that. What else?
>> Scale them.
>> Definitely scale them down. Yep, what else? Remember, just compare back and forth here. Maybe a little spacing, we've got a spacing issue going on here, maybe above the image, yeah? And down here, our text.

[00:01:57]
Because of the way the cite CSS element is styled by default, it gives you an italic. And our designer says it should not be italic, okay? So, it's always good just to make that list of things. Just looking, comparing where you are and where you're going, and just write the things down in regular old plain English.

[00:02:21]
That will help organize you as to like what the next step is here, right? That's always a really important thing to do. All right, so let us set up then our layer, @layer reviews (, cuz that's what we're gonna put in here. And, we'll remind ourselves of what our HTML looks like for this.

[00:02:47]
So if we scroll down here to line, what do we have? 39 to 40, we have our image, right? Our <div class="imggroup"> that goes around the whole entire picture plus the review underneath, right? So that's one thing. Inside of that we have the image itself, and those images are in pretty good shape.

[00:03:09]
There probably not a lot to do here, right? And then after that, we have our text, the blockquote, those images, and so forth, right? So always good to review your HTML so you remember what the structure is like, so you can remember how you're going to put this thing together.

[00:03:27]
All right, once you've got that, then we can start writing some styling. So I'm gonna start with our image group, .imggroup. And let's give it a little bit of space on the top, because right now, our image really smashes into our tour here. So, let's give this some margin on the top.

[00:03:51]
Let's call it 2rem. And that'll give us a little bit of spacing between things. 2rem is a pretty common thing, we're gonna use that for a lot of stuff today. Fortunately, our designer is very, very consistent in his spacing. Okay, and then as you know, it's really distracting to think about anything until we deal with these stars.

[00:04:13]
So let's deal with the stars. We have a class of star that we can work with, so let's use it. And we can set that width to something like 18 pixels. You can absolutely put that in rems instead, if you wish. Remember that those stars will scale with the size of your page.

[00:04:33]
So really the question is, do you want the stars to scale with the size of your page or not? If somebody blows up the text, you also want the stars to be blown up.
>> Probably not.
>> Right? So, you can sort of think about that in terms of how you choose your units for this.

[00:04:49]
I decided I didn't want that to happen, so I picked 18 pixels, but you absolutely could have done 1.125rem instead. Okay, so that right there solved so many of our problems. [LAUGH] Just by giving those stars a width. Thank goodness. And now, they show up next to each other.

[00:05:11]
Why? We didn't even have to do any kind of layout to get those stars next to each other. Why?
>> Images are inline.
>> Images are inline. Right on, Andrew, images are inline. And so by default, they just stack up next to each other horizontally, without having to do anything special.

[00:05:31]
So provided that our page is wider than 18 times 4, those stars are gonna show up next to each other just like that. Make sense? Okay, so then the next part of this. We need to put in some styling for our blockquote and our cite. And, I'm gonna go back up into my base styles to do this, because this is working with an HTML element.

[00:06:02]
So I'm gonna just put it up here for organization's sake. So just scroll to the bottom of that base layer. I'm around line 106 or so. And by default, you may know blockquote is indented slightly on the page. So, the centering here for these quotes is slightly off.

[00:06:22]
And if you're not a designer you might not notice that, but it is slightly off. So, if we say our blockquote will have a margin of 0 and a padding of 0, just in case we never know what the browser does with that default space, so we'll just set them both to 0.

[00:06:44]
And that gets us a little bit closer, yeah? All right, now the last thing we have to do is deal with this citation that's down here. So, let's add to this a cite. Now, by default, I told you the cite is displayed as a italic text there. So, how do we get the text to be not italic?

[00:07:14]
What is the property and value for that? Anybody know?
>> Font style?
>> Font style, exactly. And what's the value?
>> Normal?
>> Normal. Normal, okay? Cool, so there that is, okay? And again, if you're not a designer, you may think, okay, we're done, but see how that space there is slightly bigger than the space above it?

[00:07:47]
That also annoys designers. How to annoy your designer friends? Leave things like that. So, one of the things that we can do here is, you might say, well, how would you address that? Anybody have an idea of how you might address that?
>> Look in DevTools, see if there's margin or padding.

[00:08:05]
>> You could look in DevTools and see if there's margin or padding. Absolutely, we could also just set our margin to 0 and our padding to 0, right? That should take care of that even if we're not in DevTools, but that space is still a little bit wonky.

[00:08:24]
Anybody have any other idea how we might reduce that space? Remember our margin can go negative. We can do a negative margin thing. And it happens to be, if we say margin-top is -3 pixels, how did I arrive at this? Lots and lots of testing. [LAUGH] Nice guess.

[00:08:52]
You'll wind up with that space being a little bit closer here. Although, the ad actually hasn't applied yet, has it?
>> Nope.
>> Why didn't it apply?
>> Cuz you already set margin to 0.
>> I did set margin to 0. Margin-top comes later, but we could get rid of that if you want.

[00:09:16]
Well, I'll tell you, cite is an inline element. Cite is an inline element which means that negative margin, margin going up and down on the page, does not apply to inline elements. Who knew? So, if we change this to display: block. Now, that will apply. You can see that that space has, [SOUND] looks all pretty now.