Whether you blog or have a static website, there are plenty of reasons to bring special attention to certain elements within your page.

In my last post, I showed you an easy way to wrap text in a box using CSS by placing the CSS/HTML code directly in your post. That can come in extremely handy in the right situation. But what if you put this block of info in every post, or every other post, or once a week? Even though it’s not difficult, re-typing that code every time could become a chore. In this post, we’ll look at how to get the same effect by adding the CSS in your stylesheet once, and assigning a class to the div we wrap around the text.

The first step, is to place the code in your stylesheet that will form the appearance of the box. In WordPress, the file is called style.css. In CSS, an element that is assigned an id is marked with a #, and an element that’s assigned a class is marked with a .(period). Here we will use the latter. For this example, we’ll name the class, “special”. Here’s an example of the CSS that was used for the box at the top of this post. You can use something similar in your stylesheet. Of course, you can edit and adjust it any way you want.

That was easy enough, huh? Now those of you who are not at all familiar with a stylesheet, I can assume you are wondering where in the stylesheet this code would go. Truth is, it doesn’t really matter. I placed mine around the other post-related styles, just to make it easier to go back and find if I want to.

Now all that’s left, is to place that div around our text. Here I’ll use the same text from the example at the top of this post.

You can also set up different colors pre-loaded in your theme. Just give each one a different class name. Now the great thing about this, is the next time you want the same box to wrap around a block of text, the div and class is all you have to add to the post. The style is already in your stylesheet!