How To Create A Colored Box With Text

We all want a website that is beautiful and looks professional. For some people, hiring a web designer is in their budget. For those who are work at home moms, just starting on their blogging journey, or on a tight budget, money might be scarce.

Do you want a beautiful and professional looking website without worrying about your CSS or HTML? In less than 5 steps I will show you how to create a professional looking colored box with text. All you need to do is copy and paste. Click to read! Brought to you by the Easy DIY Website Tutorial Series.

So countless hours are spent searching the internet for easy tutorials and usually you find yourself still scratching your head. Where do I even start?

Although this post is not an all-inclusive “how to design your website” post, the purpose of the Easy DIY Website Tutorial Series is to help you with the creation process.

One of my goals in my personal blogging journey is to make the Home Faith Family Community Library page look professional and stand out. It’s constantly being added to and changing, but it’s a labor of love.

A new addition to the page is the colored box with text. (“EBOOKS” text).

This alone has made my “Shop” page look more organized, professional, and more fun. I am going to show you step-by-step how to you can create a colored box with text without going anywhere near your CSS.

Yes, there is HTML involved, but the hardest part for you to do is copy and paste. Are you ready?

How To Create A Colored Box With Text – Easy DIY Website Tutorial Series

Step 1:

The first thing I need you to do is to find your websites HTML color codes. You can do so HERE or do a Google search if you don’t see your color listed on the linked website.

What is an HTML color code? It’s your website’s colors but in hashtag form (i.e. #3090C7 – is a beautiful shade of blue.)

If you haven’t decided on your website’s colors, take the time to do so. This is one of the best steps to having a professional looking website.

Once you have your HTML color code chosen, move on to step 2.

Step 2:

The following is the code for a very simple colored box with basic text inside. Don’t worry if this looks Greek to you. All you will have to do is copy and paste.


<h1 style=”background-color: #f18d9e; margin-left: 20px; margin-right: 20px; padding: 8px; text-align: center;”><span style=”font-size: 30px;”><span style=”color: white;”>TYPE YOUR WORDS HERE</span></span></h1>


The red text is where you will put your own HTML color code in just a moment.

So, I want you to highlight and right click with your mouse (or laptop) and “copy” the code above this text. The code is in italics for convenience purposes.

Step 3:

Click on the “text” tab of your page or post.

Find where you would like your banner to go and right click then “paste” the code right there.

Don’t forget to change the HTML color code (hashtag) to the color YOU want!

Something that helps me when I want to create a colored box with text is to paste the codes first before I start writing my content or adding pictures.

This way there is not a bunch of jumble I have to worry about messing around with. Once you have the code pasted in the “text” box, your box will look like this:

This is a colored box

Step 4:

You can change the text “This is a colored box” back on the “visual” tab. This is one of the reasons why I love this particular code.

Your Text Goes Here (Header 1 size)

Highlight the “This is a colored box” and add your word(s) that YOU want in the box. For example, I changed mine to “Your Text Goes Here.”

Use your options above (paragraph indents, paragraph/headers, etc.) to play around with the style, size, position, and color of the text.


Step 5:

Celebrate! You took the time to create a colored box with text that won’t slow down your website speed, doesn’t risk your CSS, and you did it in less than 15 minutes!

You are one step closer to having a more professional looking website.

As you take the time to work smart, as well as hard, you will have a gorgeous and professional looking website in no time.

Do you need clarification about this tutorial? Or are there other design questions you have? Ask in the comments below. We would love to hear from you!

P.S. Don’t forget to sign-up for our weekly newsletter where you’ll receive practical tips, inspiration, and a friend in your inbox saying hello! I’ll even send you the password to our amazing library where you can have access to cookbooks, marriage helps, a planner, and more FREE!

Home Faith Family Planner


Sign-up for our weekly newsletter to get access to our entire Home Faith Family library for FREE.

You will also be sent our latest freebie, "Home Faith Family Weekly Planner."


We hate spam. Your email is safe with us. Powered by ConvertKit

Leave a Comment

Your email address will not be published. Required fields are marked *