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 blue and one in red:

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.

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.

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="blue">
  <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>

<div class="red">
  <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>

CSS


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

.blue {background: #6699cc;}

.red {background: #cc6666;}

div a {color: black;}

  div a:hover {color: yellow;}

div em {font-style: italic;}

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

Powered by SmugMug Owner Log In