Build Your Own Business Website header image

Introduction to HTML for WordPress & Thesis 2.1 Users – Part 15 – Using Structural CSS to Style Structural HTML Elements

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Now that we’ve discussed what structural HTML is and we’ve created these Testimonial boxes using structural HTML, this gives us something to style and we’re going to start off by styling the box itself.

Add CSS to the Testimonial Boxes

We come along here and we’ll say .testimonial and we’ll say background-color. Let’s give it that light grey, #efefef color, background color. We’re going to put padding all the way around the inside of it. When you write padding like that, that means it’s going to put padding on all 4 sides inside of the box. And we’re going to say border: solid 1px and #888; so a darker grey for the border. Let’s give it a border radius of 10px and we’ll call that good.

So this is going to now set that box aside. Almost, so somethings not quite right. So why isn’t that getting our little circle? Right, so it’s not properly interpreting the border radius and if we go to the console for just a moment and it’s an unknown property.

Let’s just come back over here and do what I do every time I need to check my syntax. I come over to CSS3 which is what I really want. So I must have spelled border radius incorrectly because it says that Firefox takes border radius just fine. Oh no, that’s not it, I forget the colon, thank you, Darla.

Then we want to add a margin and I’m going to use the margin that Chris created, $s_x_single, not spacing that’s not really what I wanted. That’s what I wanted, that $x_single and now I’ve got these things separated. Obviously there’s way too much space up here and so I’m going to get rid of the padding at the top.

But what else is happening there? We also have an h2 that must have quite a bit of top margin there so we are going to get rid of the h2 top margin and actually, we’re just going to say .testimonial h2, margin-top:0px; okay.

Let’s get rid of this top space. Let’s edit this page and get rid of that top space wherever that happens to be. It must be this right here, it’s interpreting that as wanting a line break, that’s it.

Review the Responsiveness

And let’s look at how this behaves responsively. Because we haven’t given it a height or width, it is flexing to match the width of the column that we’ve given it so we have this thing going on nicely which is what we want.

Floated Images and Clearing Floats

I want to show you something that is not immediately evident from this and that is what happens when there’s a lot less text next to those floated images. Note now that as soon as we reduced the amount of text, this bottom padding doesn’t obey the image. It tries to come up.

The reason that is the case is because this image has been floated, that is we made the image align to the left and when we did that it took it out of the normal flow of HTML. So this CSS rule requiring a padding is not kicking in, it’s being ignored because we told this thing to float.

So what we have to do is we have to clear the float and actually, what I’m really going to do is get rid of even this. Now, this thing is essentially respecting the boundaries of this text but not of the image and this is of course popping up beside the image because we told the image to float left. When we told it to do that, we are telling everything else just to float up beside it so what we have to do is clear the float of this image.

Clearing Floats in Thesis Skins

Presumably you’re either working in one of my skins or you’re working in one of the Thesis skins and in that case, you have this thing called $z_clearfix that you can use. The way we do that is to come down here and to put the clearing in the pseudo class of “after” for the testimonial.

So .testimonial:after and then take the $z_clearfix. You don’t have to understand how this $z_clearfix works, all you really need to know is what it does as long as you are using it on the after pseudo class. So that :after using on the after pseudo class of the container itself and so the container is “testiomonial”, that’s what we’re using. Let’s save that, reload it and now this is clearing all of the floats inside of it before it closes.

Remove Margin from the Image

Now the only other thing we want to do is get rid of some bottom margin because this has a bunch of extra bottom margin assigned to that image. If we click on this image here, you can see it’s got a bunch of bottom margin that if we get rid of it’ll drop down to the nice 20 pixels. If we leave it in place it’s going to be bigger.

So if you look at this it says, .post_box .alignleft and because our testimonials is in between .post_box and .alignleft. We’re actually going to have to modify this selector a bit so we’re going to say, .post_box space .testimonial space .alignleft, margin-bottom:0.

We’ll just refresh this and now if you look at this image, you can see that .post_box .testimonial .alignleft has got a bottom margin of 0 pixels. That allows this image to do what we want it to do here.

Style the Text

I also want to style the text. We’ve got our heading, we’ve got our float cleared so let’s style our text. Let’s inspect the element there. Recall that our color is coming from body so what we’re going to do is just add color to testimonial which will override color for body. So color:#c1c1c1. Well, I was trying for something darker than that. Let’s see, hex grey scale, I used to be able to say, shades of grey but not anymore if you want a family-friendly search result. So here we go, #404040 that’s better.

Geoffrey asks, “Is it accurate to say that div always creates an HTML container?”. Yes it is even if it’s an empty container. That’s what it is, an HTML container.

0 Comments… add one
0 comments… add one