Build Your Own Business Website header image

Introduction to HTML for WordPress & Genesis 2 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.

So we’ve created these testimonial boxes using structural HTML and we’ve discuss some issues that arose like clearing floats. But now we need to work on styling these testimonial boxes with CSS.

I’m going to get rid of that blue text in the first place by deleting this .entry-content color:blue. Save that custom CSS.

Add Styles to the Box

Then what I’m going to do here is I’m going to put a border around the box, I’m going to put some padding around the box, I’m going to put a background color around the box and then we’ll mess around with the heading and the text.

Background Color, Border and Padding

Here we are in our testimonial and I think we’ll say background-color:#efefef and then border, I’m going to say 2px solid and #666 as the color and I’m going to say padding:20px. In this case, what that means is the padding is going all the way around the inside of the box.

Let’s go ahead and just take a look at that and see what it looks right now. Obviously, we also want some space between these testimonial boxes and it also looks like we’re getting a little bit more bottom margin here than we’d like. We’ve got this bottom margin on the image that’s pushing this down a little further than I want it pushed and then I want some space there.

Let’s come back over here to this and we’ll say, margin-bottom:36px, that should move it down enough. I think I’m going to give it some rounded corners so we’ll say border-radius:10px. Save the custom CSS, reload the page and let’s take a look at that. There we go, our testimonial boxes now have styling added to them.

0 Comments… add one
0 comments… add one

Leave a Comment