Create a Colored Background to Text Using a HTML/CSS Block

If you want to create a colored background in a block of text, or blocks of text, currently there is no check box to dothat. The easiest way to do that is to use a HTML/CSS block, and not a Text Block. Text Blocks are just that, text. If you want more control, you need to use a HTML/CSS Block.

In this example I added two paragraphs, on in red and one in blue:

Red Box

Sed mattis, quam tempus venenatis mattis, nisi eros vulputate ex, Bold Here. Donec facilisis iaculis mauris sit amet hendrerit. Sed quis bibendum dui, Italic Here lorem. Curabitur luctus justo arcu, in interdum nulla egestas eu. Sed suscipit nisl vitae mollis accumsan. Proin suscipit diam et consequat molestie. Pellentesque nec odio commodo, condimentum risus eget, malesuada urna. Vestibulum fermentum pharetra orci. Donec elementum viverra lacus et consequat. Cras sit amet gravida diam. Duis semper diam quam, non pretium tortor imperdiet quis. Curabitur a nulla tellus. Nulla diam libero, tristique vel lacinia eget, molestie ultrices lorem. Donec enim diam, dignissim a faucibus eu, mollis a massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Blue Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam velit est, Italic Here, aliquet nec elit. Quisque fringilla purus non facilisis iaculis. Etiam vel lectus arcu. Nam Bold Here enim vitae venenatis. Suspendisse nibh ante, scelerisque eu pellentesque eget, commodo at enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam felis justo, interdum congue odio ac, dapibus euismod elit.

Just add the following code to a HTML/CSS Block and you're done! Obviously, you can change the class name (class="blue" & .blue, class="red" & .red) to suit. I included code if you want a different color for your text and hyperlinks, so feel free to remove it if you don't need it.

HTML


<div class="red">
  <h2>Red Box<h2/>	
  <p>Sed mattis, <a href="#">quam tempus venenatis</a> mattis, nisi eros vulputate ex, <strong>Bold Text Here</strong>. Donec facilisis iaculis mauris sit amet hendrerit. Sed quis bibendum dui, <em>in blandit</em> lorem. Curabitur luctus justo arcu, in interdum nulla egestas eu. Sed suscipit nisl vitae mollis accumsan. Proin suscipit diam et consequat molestie. Pellentesque nec odio commodo, condimentum risus eget, malesuada urna. Vestibulum fermentum pharetra orci. Donec elementum viverra lacus et consequat. Cras sit amet gravida diam. Duis semper diam quam, non pretium tortor imperdiet quis. Curabitur a nulla tellus. Nulla diam libero, tristique vel lacinia eget, molestie ultrices lorem. Donec enim diam, dignissim a faucibus eu, mollis a massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

<div class="blue">
  <h2>Blue Box<h2/>	
  <p><a href="#">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit. Aliquam velit est, <em>Italic Here</em>, aliquet nec elit. Quisque fringilla purus non facilisis iaculis. Etiam vel lectus arcu. Nam <strong>varius ut</strong> enim vitae venenatis. Suspendisse nibh ante, scelerisque eu pellentesque eget, commodo at enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam felis justo, interdum congue odio ac, dapibus euismod elit.</p>
</div>



CSS


/**
* Adds Colored Background to Text Using a HTML/CSS Block
*********************************************************/
.red,
.blue {
  padding: 1rem;
  margin: 0 auto 2rem;
  color: white;
}

.red {background: #cc6666;}

.blue {background: #6699cc;}

.red h2,
.blue h2 {color: yellow;}

div a {color: black;}

  div a:hover {color: yellow;}

div em {font-style: italic;}

div strong {font-weight: bold;}
/* End */