Highlighted Text with Colored Background

When typing a Blog Post, the font colors can be changed using the tool provided in the rich-text Post Editor. Unfortunately, there is no icon or tool to add highlighting to the text. However, as we shall discuss, it is possible to add highlights to the text and choose a color to appear behind a word or lines of text. This tutorial will also explain how to enclose the text within a box with a colored background.

Text Highlighting

Create the post as you normally would using the “Compose” mode. If there are some words that you want to highlight, switch to the “Edit HTML” mode and insert the following tags before and after the TEXT TO BE HIGHLIGHTED. Here are some examples of common color highlights and codes to be inserted:-

1. Yellow highlight

<span style="background-color: rgb(255, 255, 0);">TEXT TO BE HIGHLIGHTED</span>

TEXT TO BE HIGHLIGHTED

2. Green highlight

<span style="background-color: rgb(51, 204, 0);">TEXT TO BE HIGHLIGHTED</span>

TEXT TO BE HIGHLIGHTED

3. Blue highlight

<span style="background-color: rgb(51, 204, 255);">TEXT TO BE HIGHLIGHTED</span>

TEXT TO BE HIGHLIGHTED

Note: You can insert other color codes to change the background color to something of your choice. How to do that is to type any word and change the font color. View it in “Edit HTML” mode to extract the color code.

Text in Box with Colored Background

We can place a group of text within a box by using the Table HTML codes. A simple Table code looks like this:-

<table border="1" cellpadding="1" width="200"><tbody><tr> <td bgcolor="#33ffcc">TEXT IN COLORED BOX </td></tr></tbody></table>

The above code will give you a box of 200px width, a border of 1px and a background color:-

TEXT IN COLORED BOX

You can do away with the border by changing border value to "0". Change the background to a different color by inserting the relevant color code from our Color Code Chart. Instead of having a color, you can have a background image in the box. For more details on this and the various Table HTML attributes, refer to Tables – HTML Basics and Tutorial.

© Tricks for New Bloggers