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