HTML Code to Add Box to Text

Last week, I wanted to find HTML Code to Add Box to Text when I was sharing my Marsala Social Media Icons. I wanted to find a way to “jazz” up the code to use for the icons, but didn’t want to mess with some big long, set-up-a-box-css-thing when I just wanted a quick fix while I was typing. And, I hate plugin bloat – even though I am sure there is some awesome plugin that could be used. But, I don’t use stylized boxes like what I wanted enough to justify another plugin.

Note: This tutorial is for a beginning blogger who just wants one or two boxes every once in awhile in a post. If you are looking for something other than that, please find a CSS tutorial on how to create custom boxes.

I figured there had to be some easy HTML coding that I could do in the text editor that could easily and simply do what I wanted:

SOMETHING LIKE THIS

It took a lot of trial and error, but I figured out the HTML code to make this happen!

Since, chances are, you are like me and not a coder… I always say, I am an accountant not a coder… you need something simple that can be popped into your text editor and can provide you the type of box styling you want. With options… without CSS coding.

Ready? Let’s go.

Here’s the basic code:

Okay, but now what do you do with that?

First, we need to break out the code…

Decide what width of border you want. The one I am using above is 1 pixel (1px). Here are some examples to get you started:

2 pixels (2px)

5 pixels (5px)

10 pixels (10px)

As you can see, as you increase the number of the pixels, the border increases. Makes sense, right?

But, solid is so boring…

The second part of the code indicates if the box is solid, dotted, or dashed. For example:

Solid

Dashed

Dotted

Double

Awesome, right?

But, I want some pretty colors!

Next up, is the hex color code of your border. Basically, any hex color code can be used (i.e. match your blog scheme or make it stand out!). You can get hex color codes here. (FYI: Marsala’s hex color code is #955251, if you are wanting to match my icons from last week!)

Some primary colors include:

(Black) #000000

(Red) #FF0000

(Blue) #0000FF

(Yellow) #FFFF00

White space sells, don’t you know?

Okay, now for the padding part of the code. Padding indicates how much white space is between your box border and your words. For the ones above, I used 20px because I like how the white space makes the text stick out. But, experiment with this one to see what you like and what looks good with your post. For example,

2 pixels (2px)

5 pixels (5px)

10 pixels (10px)

You can also tweak the code for make the text alignment to be centered, left, or right.

What do you want to say?

Now, the fun part! Adding your text! Just type in what you want to say between the > and the closing </p> tag! And, you are done!

Being able to do this simple tweaking will allow you to have several different boxes in your post to call attention to certain things.

But what do I do with the code?

In WordPress, in the add new post screen, in the upper right you will see two tabs – one says Visual and one says Text. Visual is probably the tab you usually compose your posts in. (Its the one with all the “normal” looking options and text – similar to a word processing document.) If you click the Text tab, it will flip you into the “background” of your post. This is where you will see the nuts and bolts of your post – the HTML coding. On this tab is where you will put your code at whatever spot you want your fancy box. As soon as you copy and paste the code, you can flip right back into the Visual tab and continue working. For more information, check out the WordPress Codex.