40. Using a new pseudo class to wrap up the homepage - Responsive CSS Tutorial

styling the titles they need to be adjusted a little bit so let's go and do that and let's go and look at our index first and what do we call them we called that widget title so this is where we have an h2 that it's really useful to have a class on because pretty much all the styling on our other h2s we didn't need to do very much on these right because when we look back at our Styles and we go all the way back up in our file here a lot of it is handled right here on this h2 we set up the font family we set up that we set up the color we set up the margin we did everything here but we're still dealing with in h2 this one just happens to visually look completely different so this is where it's really really handy to have this so we have all of our article stuff let's come right here a widget title and let's give this one a font size of 1 Ram the color is probably alright but we need to change the font family over to a bun too just there we go and we also want to make the font weight to be 700 because we want it to be not 7700 we want it to be bold I don't even wanna know how bold 7000 might be so there we go that's looking not too bad let's just go look back at the original design maybe the font size can be slightly bigger but I'm gonna stick with that I'm pretty happy with it actually I'm just based on looking at it visually we want to style these now and actually change the order of things over here so how can we do that let's go and take a look back at our markup and see how we did it so we had a div of widget recent post and then we have the order of our widget recent title you know what I actually think these widget recent title so that's looking good now these are too big and I think these are actually supposed to be the same size as this so let's come back up to our CSS file here and widget title I think what we could do is keep my widget title but also have my post title don't forget the dot and give those the font saw font size of one room here so we don't need to have it necessarily on that one so that it helps shrink down those a little bit just so visually they're not as in our face and what you need to do is change the order of them because this should be underneath the image and not on top of the image it doesn't look great like now the spacing is all off so we've already get how we can do that when we did all those other order things give it a try I hope you got it to work if you didn't let's go and look at our markup the one reason you might not have is we have this widget recent post so this widget recent post needs to have the display of flex on it so we can change the order of things that are inside of it so I'm gonna come here I'm just going to go all the way down where we have our widgets because now I am looking at layout don't forget the dot at the front and we can give this a display of flex and when we do that it will make columns we don't want columns so flex direction will become column so the things inside our rows and they're stacking on top of each other so it was sort of back to how they were but now we have the advantage of having the order on these now realistically I might not actually switch the order on them like I did here I might have just put image and then title I think it's fine in the markup to do it that way I just wanted you to practice a little bit more and play with the order a little bit more since it was a new concept coming into this project so here we can say that my widget image has an order of negative one and that should have jumped it over to the top there we go so we have that we have that now we're just missing one thing so we can see those here there's these little little thin lines that are coming in between on those since we need a division here in a division here there is a trick though because this one we don't want to do it that's okay though for now add one here add one here I'm gonna show you a trick to get rid of that last one going to add those in I'm gonna do it like I did before where I'm just gonna add a border it's going to say border one pixel solid and for the color we'll go with that dark gray that we've already been using if we go and look at it now we have a line oh no it's on all four sides I only want it to be on the bottom so let's fix that right away and go look again that's looking nice but I need a little bit of space underneath and I want some space in here so we can write away at a margin bottom and we'll just go with one M you see I use a lot of trend round numbers 1 M 1 and 1/2 I'm to Ram it helps with the consistency along the way and doesn't that just we go that looks pretty good I think except we don't want this one here this one is going to cause us some problems so instead of styling it like this so I'm going to show you a trick something we haven't looked at before I'm gonna do a widget recent post last child so this is another pseudo class this is like hover and active and visited but it's saying if it's the last child inside of something I'm gonna say border:0 and I'm gonna say margin of zero because we want to take that margin bottom off so it doesn't add extra space so I'll explain this in a second but let's go and look and there we go now everything is getting balanced out we have a line here we have a line here but we don't have a line coming on this one at the bottom so to explain what this is and a little bit more detail let's go and look in my index so we have our widget our widget here and our widget here and this is the last child inside of this parent if I were to come and add a paragraph here example and we were to come back now that we have another item in there this is no longer the last child so this now has a border on it that's pretty fun right I think that's pretty cool so it's always about the state is this if there is a widget recent post that happens to be the last child somewhere we're gonna turn off that border in that margin that we just added here but otherwise they should always have it just like when we're hovering on something so we have a normal style in a certain state and when our mouse is hovering on top of a link we're changing the state this instead of looking at from Mouse it's looking at its relationship to its parent and to its siblings so it's a really really fun and cool pseudo class that can come up on something so let's go and take out that extra paragraph that's on here and I'm not gonna save the I'm gonna do the footer now I said we're gonna wrap up the whole thing and then the footer is so nice and easy I never even put the text in there so there we go we have our paragraphs inside the footer and if we go and look it's just has that text the first one is bold the second one isn't so let's wrap this one up in a strong tag and close strong right there and we can come into our styles I'm gonna come up a little bit here all the way to here where I was doing like my header my containers all of that I'm actually gonna put the footer here because the footer is this really generic item that's just everywhere so we're gonna give this one the background of that dark blue we're gonna give it a color in this case I'm gonna give it white for now I'm gonna come back to this color later on when we're coming back in in the next module of this course stepping our birth style because we're gonna show you a cool trick if you set another color on it or want to actually you know use a color picker getting a specific value just to match that that would be cool when we do stepping up our style I'm gonna dive a little bit deeper into this a text-align:center on there and some padding we'll go with the 3m and a zero because the padding looks pretty big on the top and bottom and there we go it is looking pretty good the homepage is all wrapped up and we're ready to move on to the other two pages which are going to just