Creating Info Boxes With CSS

A great feedback for online forms is the info box. There can be several kinds. The green success box lets you know the form was successfully submitted. There are other kinds of info boxes as well, that indicate, variously, warnings, information, or errors.

Create your own custom info boxes using CSS.

Here’s the CSS:

.info, .success, .warning, .error {
	border: 1px solid;
	margin: 10px 0px;
	padding:15px 10px;
}

.info {
	color: #00529b;
	background-color: #bde5f8;
}

.success {
	color: #4f8a10;
	background-color: #dff2bf;
}

.warning {
	color: #9f6000;
	background-color: #FEEFB3;
}

.error {
	color: #D8000C;
	background-color: #FFBABA;
}

Here is the HTML:

<p class="info">Here is an info box.</p>

<p class="success">Here is a success box.</p>

<p class="warning">Here is a warning box.</p>

<p class="error">Here is an error box.</p>

And here is the live demo:

Here is an info box.

Here is a success box.

Here is a warning box.

Here is an error box.

You can get creative designing your boxes but keep in mind that generally, green implies success, yellow a warning, and red an error. Other than that, have fun with it!

Joni

Joni Mueller has been designing web sites for hire since 2003, when she first blew up her web host’s server by insisting on running Greymatter. Since then, Joni has designed for Blogger and Movable Type, TextPattern, WordPress and CMS Made Simple. She lives with her cat and shoe collection in a bucolic old section of Houston called Idylwood. For some strange reason, Joni likes to refer to herself in the third person. When she’s not working on web design, she’s ordering lawyers around. And blogging about it. Or both.

www.jonimueller.com