Build Your Own Business Website header image

Customizing the Content with HTML and CSS – Part 2 – Style A Text Block With CSS

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.

Code Used in This Lesson

/***********************************************************************************************
/* Standard Content Styles
/* ****************************************************************************************** */

.info
{
   background-color:#f8f8f8;
   padding:10px;
   margin-bottom:1.57em;
   color:#666;
   font-size:90%;
}

Style a Text Block with CSS

Welcome back to Part 2 of this lesson on how to stylize text blocks within the WordPress content area. In this part of the lesson we are going to add CSS styles to the text blocks we created with HTML in the first part of the lesson.

To begin, open up the website in Firefox. We are going to be using two tools to style the text with CSS, one of those is Firebug and the other is Web Developer. If you are not familiar with these tools feel free to watch along but I strongly encourage you to review our videos on how to use Firebug and Web Developer under Customize Thesis Like a Pro, Lesson 3.

Styling Individual Classes of Text

We’ll start off by inspecting this paragraph in Firebug. Select Inspect Element and you can see that we are inside of the format_text div which is the standard Thesis content div and then inside of that div we have a div class=’info’, a div class=’note’, a div class=’important’, and a div class=’warning’. First, we’ll apply CSS styles to the div class=’info’.

We begin by opening up Web Developer and then select Edit CSS and the appropriate CSS file which in this case is the custom.css file which is the CSS file we’ll edit in Thesis. You may be watching this and using a different theme than Thesis and in that case you would use style.css or whatever CSS file your theme requires you to edit.

We’re going to copy that block of CSS code, actually go above Footer because logically this stuff falls in front of the Footer, and paste it. I’m going to call this Standard Content Styles and we’ll get rid of this stuff in between and then we’re going to take this class and instead of that we’re going to use .info. So that relates to this class here – we are styling .info, and we are going to put a background color around this and then we’ll add a different font size and some padding and margin.

CSS Background Property

Let’s start off with the background color. On this lesson page there are links to w3Schools articles about each of these different CSS elements and first we’ll take a look at the background property. Let’s go to w3schools, then in the CSS section we are going to look at Backgrounds. Scroll down here and you can see the syntax for background color – background-color: color number.

Background has two different ways of designating the background; first is to use the specific CSS elements such as background-color, background-image, background-repeat, background attachment, and background-position. The second way is to use the shorthand version of this command – the Shorthand property and in that case you would specify just background: followed by color, space, and if it had an image it would have that url, space, and then whatever repeating and whatever position there is.

So it goes in this order, color, image, repeat, attachment and position. In this case we’re only doing background color. Sometimes you find that there are odd little conflicts when you are trying to restyle something that already has the shorthand background property. So generally speaking I suggest that we use the specific properties and in this case it’s going to be background-color.

Add a Background Color to the Text Class

Copy that, come back over to our Firefox site and let’s paste it. Now that turns everything into this color of blue as you can see here. We don’t really want the info box to be blue, we want it to be a light gray so I’m going to say #f8f8f8 for the color. I want to add some padding and margin. That background color is the boundary of the div. Padding gives space inside of that boundary and margin gives space outside of that boundary. So in this case we’re going to start off with padding:10px, and you can see now that it has given space all the way around this box so the text isn’t right up against it.

Add Padding to the Text Class

Padding also has two sets of properties, its Shorthand property and its Specific property. You could say padding-top, padding-bottom, padding-left, padding-right to specify each of those individually or you could do it in the Shorthand property by designating each of those in counter-clockwise order starting at the top.

So if there’s only one entry here it happens on all four sides. If there are two entries the first one is the top and bottom and the second one is left and right. Next you go in a clockwise order from the top. So in that case it would be 10 pixels for the top, 20 pixels for the right, and then we’ll say 5px for the bottom and 1px for the left and you can see here this is padding top, right, left, and bottom. We’re just going to use the same padding all the way around.

Add Margin to the Text Class

You can see that we don’t have any space between these blocks of text. In the standard p tag you can see that we have a margin bottom of 1.571, but in here it doesn’t have a margin bottom. We could add the same margin as this one has and in that case it would be margin-bottom: 1.57em;. That adds this margin, that yellow line down there to the bottom of this, and you can see that it is actually outside of the box.

So margin is outside of the box, padding is inside of the box, and the margin has the same kind of notation as padding. So we could do margin like that at 1.57em and now it would put that margin all the way around all four sides. We could do top and bottom margin separately from left and right margins or we could do all four of them differently, again following in clockwise order from the top to all the way around. But we’re just going to make this margin-bottom.

Add a Color to the Text and Change the Text Size

Next we want to add the color property to our text. So that is color: and we’re going to make it a dark gray so that will be #666 and then semi-colon. Then finally we want to make the font size a little bit smaller here, we’re going to say font size, and let’s just make it say 90% – font-size: 90%;. We have now styled a block of text, we have changed some of its properties and it sits there inside of that content.

Now we copy this stuff from Web Developer because it’s not enough just to make the change here. Web Developer is just a place for you to test your changes. We’re going to open up our text editor and in this case that’s NetBeans, which is what I most frequently use for these tutorials. Go up to the top of this and paste that. So now we’ve placed our Standard Content Styles here inside of our CSS file. We’ll save this CSS file and then open up our ftp client and upload custom.css to our website.

If you’re not familiar with what this is, go take a look at my tutorials on Start Building Your Website Here, Lesson 4 where we have a whole bunch of tutorials about how to set up your ftp client and how to synchronize it with your website and that’s what’s going on here.

Anyway we’ve uploaded this so if we come back to our website now and refresh it, you can see the changes we made. Next we want to do that same thing for note, important, and warning.

That wraps up Part 2 of this lesson on How to stylize a block of text in the content with CSS.

0 Comments… add one
0 comments… add one

Leave a Comment