Step 3 - How To Change Box Color in HTML

It is super easy to change colors of boxes and text within HTML.

Let's say you want a light gray box with black text.

The HTML code for this box below is a black box with white text.

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

Here is the box code breakdown:

  • background-color: = is the background color of your box
  • color: = is the text color inside your box
  • #000000 = is the HEX color code for Black
  • #FFFFFF = is the HEX color code for White

So, this grouping of the the HTML code below makes your box black with white text:

  • background-color: #000000; = makes your box color black
  • color: #FFFFFF; = makes your text color white inside the box

To change the colors, you just need to replace the black and white HEX color codes to different colors. Yes, it is that easy!

For this example, we are going to take a black box with white text and change it to a light gray box with black text.

1. Access Text Editor Tab


The code in the image and below is the html code for a black box with white text.

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

2. Copy & Paste Code For Gray Box

Inside the Text Editor view, copy and paste this code below where you want the gray box to appear.

<div style="background-color: #dbdbdb; color: #000000; padding: 10px;">THIS IS YOUR GRAY BOX. JUST ADD YOUR OWN TEXT HERE :)</div>

3. Click on Visual Tab

Now, you want to confirm what the code looks like. Click on the Visual tab.

You should see a gray box with black text.


Now, you want to make your box your own content. So replace the text with your own text.

Just replace:

THIS IS YOUR GRAY BOX. JUST ADD YOUR OWN TEXT HERE :)

with:

Whatever you want to say inside that box!

You can edit the text here in the Visual editor tab so easily.

There is no need to edit text in the Text editor, unless you really want to.

You can toggle between the two editors, Visual and Text, as much as you want.

Black Box vs. Gray Box Code Comparison

I want you to see how easy it is to have a box and change the box style. All in HTML.

Although I had you copy and paste HTML codes for each box, the code for each box is VERY similar.

If you compare the code for the black box vs. the gray box, the only thing that changed are the HEX color codes.

Gray Box with Black Text Code

<div style="background-color: #dbdbdb; color: #000000; padding: 10px;">THIS IS THE BOX FOR YOUR TEXT. INSERT YOUR TEXT HERE.</div>
  • background-color: #dbdbdb; = makes your box color gray
  • color: #000000; = makes your text color black inside the box

Black Box with White Text Code

<div style="background-color: #000000; color: #FFFFFF; padding: 10px;">THIS IS THE BOX FOR YOUR TEXT. INSERT YOUR TEXT HERE.</div>
  • background-color: #000000; = makes your box color black
  • color: #FFFFFF; = makes your text color white inside the box

Want A Red Box? Or Blue, Yellow, etc...?

You can change the box color to any color you want. You can also change the text color inside the box to any color you want.

You simply need to replace the HEX color code, e.g. #000000 or #FFFFFF, to another color you want.

AND, YOU CAN find new colors without leaving your WordPress back office area.

To find different colors for your content box, continue to follow these steps below.

4. Access Visual Editor Tab

5. Find The Text Color Tool


You want to find the Text color option that lives in the Visual Editor view.

Don't see this option?

If you do not see the Text color option, your toolbar may default to hide this option.

To show this option, simply click on the Toolbar Toggle.


This will display a second row of tools that includes more options.

6. Click Text Color Down Arrow

Click the down arrow next to the A with underline color bar.

You just want to find the HEX code for the color you want to use. So you will access the custom color picker, to find codes for different colors.

7. Choose Custom...

The Custom... is your custom color picker. This view will show you the HEX codes for colors.

To navigate the color picker, simply:

  1. Drag the bar on the right side over the color range you want.
  2. Drag the circle in the box on the left side to get various versions of that color range.

Once you have found the color you want, you copy the letters and digits found after the #, number sign.

In this case, we wanted a gray box. So the HEX color code here is #dbdbdb.

But you can choose any colors you want.

Just Change Colors with HEX Codes

For a different color background, replace the black background-color: #000000 code with:

  • Red = #ff2e2e
  • Blue = #202ae6
  • Orange = #e69320

7. Switch To Text Editor Tab

You need to be in the Text editor view in order to see your box code. And to easily change the colors of your box code.

This HTML code below is a red box with white text.

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

This HTML code below is a orange box with black text.

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

And that is how easy it is to change colors of your content box.

Now, learn how to add a box border.

Next Page -> How To Create A Border 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