Hello, and welcome to this scary title video. It's all about Clearfixes and Pseudo Classes. It sounds scary, it's not that hard. We are doing it, for what reason? It's because I want to add a little bit of Padding between this Box here, which is called. Image Group, this Div Tag, and my Footer, but I can't, because these guys are all Floated left and it causes problems when there is Boxes underneath Float, like this Footer here. But if we use a Pseudo Class I can add Padding to the bottom of my Image group and it actually starts moving. So if you're following along in the tutorial, you can't do that. Let's learn how to do that in this tutorial.

We have to do it because these guys are floating to the left. And, we know from an earlier tutorial, that if we float anything to the left, the very next Div Tag needs to have Clear Float applied. And we did that with our special little Class. The only trouble here is the structure. This is my last Div, my last little Column. The Div Tag underneath should have Clear Float. But I don't have a Div Tag underneath, I close out Image Group, then I close out Main, and then Footer starts way down here. Problem with adding Clear Float to a Footer, it just doesn't work, it's too far out of the stream here. So, the trick is, I could click in here, in this Insert, a Div Tag, give it no name. Remove the place holder text, and just give a Clear Float, and it will totally work. And that's what I did for years, and that's what lots of people still do. That's totally fine, you can go do that, because that's easy but we're kind of further on in this course, and you came here to learn. And it's time to learn some cool stuff.

Set of Classes are particularly hard to make, or use. So I'm going to do that. So what we need do to is, we're going to do it over here, in our CSS Designer. Click somewhere in here, 'css.styles', we'll do it Globally. And we've got one in here called Image-- where are you? find him. Image Group. What we need is another one that still says Image Grid, but before you close it out we're going to add a colon ':' in there. That colon indicates that it's a Pseudo Class. It's kind of like that Class, but a little bit different. And our Pseudo Class is going to say 'after'. So we're going to add some attributes that only get applied after Image Grid. That is a Pseudo Class, super easy. And the main ones are, the main one is Clear Float. Some of the time you can get away just with Clear Float, but we're going to do something called Clearfix. It's a name given to a slightly more complicated not complicated, but a slightly more robust way of Clearing the Float.

Clearing Float by itself works most of the time but not on all browsers all of the time. So, to make it more robust all we need to do is click 'display', change it to 'block'. And we need to add something called Content. There is actually no content here in the CSS Designer panel but the helpful people at Dreamweaver said there is a little extra kind of more add your own one down the bottom here. So I'm going to add Content, there it is. And pretty much I want nothing for the Content, so it's two quotation marks with nothing in the middle. Don't ask why, but that helps us across lots of browsers. So that is replacement for just putting in an empty Div underneath, with that Clear Float applied, and if I'm all honest, it's not that hard. We'll do this, a colon, and an after ':after' and it makes us feel like super-duper developers when we're doing Clearfix Pseudo classes. Sounds like we're talking in another language. At least I feel like that when I'm talking about it. So let's go and do the thing we wanted to do, which was, where was it? It was Image Grid, I wanted to add some Padding afterwards. Kind of jumps around, but there you go, Padding Image, nice!

Before we go, just a little bit of housekeeping. When I go from Desktop down to Tablet, the Padding at the top here isn't good. So it's nice at Desktop, and okay at Mobile. We'll do that one as well. But it's pretty bad at Tablet. So, to do that, what we're going to do is, we're going to make our styles.css in Tablet. And we want to call that Image Grid. We don't have Image Grid in here currently. So we're going to say, when Image Grid appears in Tablet it has-- I'm going to click on this. Scroll down. Just needs more. Margin up. This thing keeps jumping around. Because we're overriding it now, you can see how it jumped up. Remember, we had it lower, so we're not adding it on top of Desktop, we're replacing it. So we're saying, instead of that, do this. Now there's just a little bit of testing between here, looks good. Also looks good here, so a little bit of playing around.

One thing we might have to do is, can you see here, this word breaks onto these different lines, and it kind of messes with this. It is just really hard to work with so many different sizes. Say there's a point, when you're a Web Designer, you're going to have to live with some views that aren't perfect. I guess it doesn't have to be perfect. It has to be usable, but doesn't have to be perfect. What you do, you aim for the main devices and if somebody comes up with a crazy size, you might have to go back and adjust it. You don't want to be caught in creating like 10 different Media Queries. Just so you know, three is the minimum, so Desktop, Tablet, and Mobile, that's what we've got. But a lot of more sophisticated sites will have five.

So they'll have like a really small one, like we've got, that have a Phablet size, that kind of iPhone Plus size. They'll also look at landscape and horizontal Tablets, and then the bigger Desktop, so I have five. I've seen sites with seven. So you can keep making these Media queries, and making adjustments. Depends on how much control you want over every single view. But know that, the more Media Queries you have the more work that needs to be done. You might be okay with that. For this site here, I'm keeping it simple, mainly for Class size. And if I'm honest, I need to do three Media Queries for my sites personally. All right, so should we do Mobile? You can create one for Mobile actually when it gets down to Mobile, I'm happy with the Padding but you just go to max-width here for Mobile and add our Class for Image Grid, and change the Padding but you could do that, I think. All right, next tutorial.