CSS Color Text Box Widgets

Many people think, it is complex to create text boxes with background colors. It is very easy and you can simply use paragraph element with custom CSS to add background colors. Here are some of the color text box widgets as a demo.

CSS Color Text Box

There are three styles of the color text box widgets we show here.

Using inline CSS
Hyperlinking inside box content
Blockquote style

Simple Inline CSS Color Text Box

This is a Sample Text box with background color 02f3e5.

This is a Sample Text box with background color silver.

This is a Sample Text box with background color pink.

This is a Sample Text box with background color red.

This is a Sample Text box with background color green with white text.

This is a Sample Text box with background color purple and white text.

Inline CSS Color Text Box with Link

Want to Customize Weebly Blog Sidebar?

Internal or Embedded CSS Color Text Box – Block Quote Style

“Here is a text block for block quote content. The block quote style may differ based on the default style of your site’s theme which you can overwrite with your custom code.”

How to Add This Widget to Your Site?

It depends on the website builder or content management system you use for publishing your content.

If you are using Weebly, we have a separate article explaining how to use these widgets. You can follow the same instructions for other similar site builders like Wix.
Content management systems like WordPress offers “Color Settings” option to add background to blocks. You have to use the latest Gutenberg block editor in order to use this feature which is not available with old Classic Editor. Since this website uses WordPress, below is an example of a paragraph block with background color.

This is a paragraph block created in WordPress Gutenberg editor with black background and white text color.

For plain HTML frameworks like Bootstrap, you can use the alert component. It is also possible to use these widgets by simply embedding the below code.

For Plain Box

<p style="background-color: purple; color: #ffffff; border-radius: 4px; font-size: 16px; padding: 20px; margin: 5px;" align="justify"><b>This is a Sample Text box with background color purple and white text.</b></p>

Box with Link

Replace # with your link and add proper anchor text accordingly.

<p style="background-color: #ededde; border-radius: 4px; font-size: 16px; padding: 15px; margin: 5px;" align="justify"><a href="#"><b>Anchor text</b></a></p>

Blockquote Style

<style>
.webnots_quote {
    background: #c97e69 none repeat scroll 0 0;
    border-color: #808080;
    border-style: inset;
    border-width: 0px 0px 0px 15px;
    color: #ffffff;
    font-size: 20px;
    padding: 5px;
    font-family: monospace;
}
</style>

<blockquote class="webnots_quote"><em>"Add your blockquote content here..."</em></blockquote>

You can change the background, text color and adjust padding/margin for all the above widgets as per your need. If you like the blockquote style, check out Bootstrap style blockquote widgets.

CSS Color Text Box Widgets