Build Your Own Business Website header image

Customizing the Content with HTML and CSS – Part 3 – Add CSS Styles to Text

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

.note
{
   background-color:#efe;
   padding:10px;
   margin-bottom:1.57em;
   color:#440;
   border:2px solid #484;
}
.important
{
   background-color:#ffffcc;
   padding:10px;
   margin-bottom:1.57em;
   color:#040;
   border:2px solid #ffc652;
}
.warning
{
   background-color:#fee;
   padding:10px;
   margin-bottom:1.57em;
   color:#400;
   border:2px solid #844;
}
 

Add CSS Styles to Text

Welcome back to Part 3 of this lesson on stylizing blocks of text in the WordPress content area. In this part of the lesson we are going to stylize the other blocks of text with CSS –  with some similar and some different styling than we did in Part 2.

The styling is completed for the text block .info and now we’re going to do .note, .important and .warning. Let’s go back to Firefox and refresh our site so the CSS that we wrote earlier, saved and uploaded now shows up in this custom.css file. Now we’re going to copy all of that block and we’re going to paste it. But instead of .info we’re going to make it .note.

Styling a Text Block

It doesn’t make any sense to have two different blocks of text with a different class name but in the same style so we are going to change this background-color to a light green which in this case is efe. We’ll make the font color a dark green, color number 440. We’re going to leave padding at 10 pixels and leave our margin-bottom at 1.57 pixels. But we’re going to get rid of the font-size and just let it be a normal font size.

CSS Border Property

We also want to add a border to this. Let’s go back over to the w3Schools and look at the border property which has a whole bunch of different parts. Scroll down here and you can see that the CSS border property has a style, color, a width and then it also has that for border-bottom, border-left, border-right and border-top. So there are a lot of different ways in which you can reference this and it also has the same kind of shorthand property. So if you were to do this with a shorthand property it has the border-width, the border-style and the border-color.

We are going to use this shorthand property, copy that, and we’re going to come back to Firefox and paste it right there. Of course we’re not going to use red; we are going to use a green color so #484 and rather than being 5pixels wide we’re going to make it 2 pixels. So there we have our .note text block styling completed in a way that makes this stand out and is different than the .info.

Styling another Text Block

Now we’re going to take our .note, paste that and instead of .note, we’re going to say .important. Let’s go look at our .important one. Again we don’t want the same background-color. This time it’s going to be a gold background-color, #ffffcc. We’ll leave the padding and the margin-bottom the same but the text color is going to be #040, and the border is going to be a dark yellow, #ffc652.

Styling a Final Text Block

Finally we’re going to do our .warning. So we’ll copy that .important, drop it down and place it in there and type .warning. The .warning color is going to have a bit of a red color, so #fee. I’ll leave the padding and the margin the same but we’ll change the font color to a dark red, #400. Then instead of the border color here being that gold we are going to make the border color # 844, which is a strong reddish-brown.

So now we have four different blocks of text. Any time you want to use any of these all you have to do is open up your page in your editor, go to the HTML view and put a div class with the class name and close it with a div, then that paragraph will be styled with that class.

Let’s go back to Firefox, capture this entire Standard Content Style section all the way down to the Footer, copy it, open up our text editor again and replace that whole section with this. So now we have all of these styles in our text editor. We’ll go ahead and save custom.css, open up FileZilla and upload that to our website, come back over to our website and refresh it. Now there are all four of our different color styles there on our website and that wraps up Part 3 of this lesson on How to stylize a block of text in the content with CSS.

0 Comments… add one
0 comments… add one