Step 2 - How To Create A Box Around Text in HTML

Within Text Editor view:

1. Copy & Paste this code

Wherever you to create a box around text, copy and paste this code below within Text Editor view.

<div style="background-color: #000000; color: #FFFFFF; padding: 10px;">THIS IS THE BOX FOR YOUR TEXT. INSERT YOUR TEXT HERE.</div>

You just added a black box with white text to your content.

2. Click on Visual Editor tab

To confirm the box is there, click on the Visual Editor tab.

You will now see the black box within your text.

Stay within the Visual editor.

3. Change the Text Inside The Box

Just replace all of the text inside the box with whatever you want to say.

THIS IS THE BOX FOR YOUR TEXT. INSERT YOUR TEXT HERE.

You do not need to be in Text editor to change the text. Text changes are easier to do in the Visual editor.

In the example above, I changed the text to be relevant to my post I also used Bold white text to make it stand out in the black box.

4. Click Preview or Publish

To view your content as a web page, preview or publish the page to see what it really looks like on your site.

And that is how to create a content box in html. Pretty easy, huh?

Code Breakout So You Understand

To break out the code, so you understand what it means:

<div style="background-color: #000000; color: #FFFFFF; padding: 10px;">THIS IS THE BOX FOR YOUR TEXT. INSERT YOUR TEXT HERE.</div>

• <div> = starts your box
• </div> = ends your box
• <div style=" "> = adds style to your box
• background-color: #000000; = is the background color of your box
• color: #FFFFFF; = is the text color of your box
• padding: 10px; = is the space between your text and the edge of your box
• #000000 = is the HEX color code for Black
• #FFFFFF = is the HEX color code for White
• THIS IS THE BOX FOR YOUR TEXT. INSERT YOUR TEXT HERE = This is where you replace this text with the text you want in your box.

Padding is important.

The padding will keep your text away from the edge of the box. This makes your text within the box, easier to read. Everything is measured within pixels in HTML.

So 10px just places your text 10 pixels away from the edge of your black box.

It is ok if you do not understand the code breakout above.

This will make more sense when we start changing colors and adding borders.

Next Page -> How To Change Box Color in HTML