Simple Traffic Light CSS Highlight Boxes

It is sometimes necessary to draw a readers eye to certain text on a web page, this may be a warning, important information or something else that just needs highlighting. It's easy to do with a little CSS, just apply a style to your important paragraph and voilà highlighted text.

My traffic light boxes are simple CSS in green, yellow and red that may be useful in your projects to highlight a line of text on a page. It is simple to do and you can choose any colour combination you like but here is the CSS code and examples as a quick place to grab it from next time you need to add some highlighted text to your designs.

To use these boxes just add the class of your choice to your paragraph tag.

<p class=“highlite-colour”>Your text goes in here</p>

Then add one or more of the below style rules to your style sheet:

Note: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a suscipit metus. Integer tincidunt augue non nisi bibendum nec varius diam eleifend. Fusce iaculis erat viverra diam aliquam sollicitudin vel non sapien. Donec ornare turpis vitae erat vestibulum pretium.

.highlite-green { background: #e3f5d7; border: 1px solid #7c947a; padding: 0.6em; }

.highlite-yellow { background: #fffabc; border: 1px solid #e9e5ac; padding: 0.6em; }

.highlite-red { background: #fbe6f2; border: 1px solid #d893a1; padding: 0.6em; }

Not in the traffic light scheme but another sometimes seen blue/purple box.

.highlite-blue { background: #efeff4; border: 1px solid #6363a0; padding: 0.6em; }

Hopefully you have found this code useful. If you do happen to use it on any of your projects leave a comment below as we would love to see it in use.

This article was posted on 29 May 2009 in CSS

That's the end of this article. I hope you found it useful. If you're enjoyed this article why don't you have a look around the archives, where you can find some more tutorials, tips and general ramblings.