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



Join the Discussion
Write something…
Recent messages
Jadatherapy Premium
Thank you for this training

Really appreciate this training because I always wanted to know how to create boxes and then you came along.

Much appreciated

Jennifer
Reply
kimwolfe Premium
Yay Jennifer :) Hit me up if you have any questions.

Hopefully, you will be surprised at how easy it is. Especially for buttons. No plugins or images needed.

Keep me posted how this goes!

Kim
Reply
Jadatherapy Premium
Thank you will do when I get round to it. lol

But I think I will need your help so thank you for the offer.

Jennifer
Reply
kimwolfe Premium
Just don't fear it. It really is easier than you think. Especially, since you can just copy my codes and then edit them in visual editor view of WordPress.
Reply
Jadatherapy Premium
Thank you I will not leave it too long because I want to add to new articles.

Jennifer
Reply
Claudiojuan Premium
Thank you very much very interesting training I am always looking to place the least amount of plugins on my sites. Everything that is HTML and CSS codes seems great to me. Regards!
Reply
kimwolfe Premium
Yes, it is easier than you make think. And there are tons of free resources online to continue your training. Let me know if you have any questions.
Reply
Claudiojuan Premium
OK Kim All questions about HTML and CSS codes you will be my teacher. Thank you!
Reply
kimwolfe Premium
Awesome. I am here for ya :)
Reply
Chrissies Premium
Many thanks Kim :)
Reply
kimwolfe Premium
Thanks Chrissies! Hope this helps.
Reply
Triblu Premium
An EXCELLENT tutorial Kim, Thank YOU!
Reply
kimwolfe Premium
Hey Trish. HUGE THANKS! Appreciate you chiming in and stopping by here.
Reply
merlynmac Premium
Great how-to! I do have on issue. Lesson 4 isn't loading for me. That's the lesson on "How To Change Box Color in HTML". If I'm on Lesson 3 and click on Next Page -> it doesn't work. If I use the menu to get to lesson 4 it doesn't work and if I jump to Lesson 5 and try to go back to lesson 4 using the <- Previous Page button it doesn't work. Everything else is golden!
Reply
merlynmac Premium
Lesson's 6 and 7 are also broken.
Reply
kimwolfe Premium
Hey thanks for the heads up here. I will see if I can figure out how to fix. Thanks again.
Reply
merlynmac Premium
It may not be your training...It looks like the WA servers are having issues....Reach out to support to see if that's the issue. If so, you might not have to do anything but wait.
Reply
kimwolfe Premium
I’ll wait it out then and go from there. Thanks again.
Reply
kimwolfe Premium
Can you confirm you access lessons 4 - 7? I think the issue should be fixed now.
Reply
merlynmac Premium
Confirmed..I can now access all lessons.
Reply
kimwolfe Premium
Thank you :)
Reply
Top