* @group Special Styles */
/* This is based on styles from the Sawchuk scheme for K2 */
/* http://www.deanjrobinson.com/wordpress/redoable */
.download, .code, .note,
.alert, .new, .construction,
.information {
	background-position: 15px 10px;
	background-repeat: no-repeat;
	font-size: 1.2em !important;
	line-height: 115%;
	margin: 10px auto;
	padding: 10px 10px 10px 50px;
	text-align: left;
}

ul.download, ul.code, ul.note,
ul.alert, ul.new, ul.construction,
ul.information {
	font-size: 1em !important;
	line-height: 115%;
	list-style-type: disc;
	list-style-position: inside;
	padding: 10px 10px 10px 50px;
}

ol.download, ol.code, ol.note,
ol.alert, ol.new, ol.construction,
ol.information {
	font-size: 1em !important;
	line-height: 115%;
	list-style-type: decimal;
	list-style-position: inside;
	padding: 10px 10px 10px 65px;
}

dl.download, dl.code, dl.note,
dl.alert, dl.new, dl.construction,
dl.information {
	font-size: 1em !important;
	line-height: 115%;
	padding: 10px 10px 10px 50px;
}

dl.download dt, dl.code dt, dl.note dt,
dl.alert dt, dl.new dt, dl.construction dt,
dl.information dt {
	font-size: 1.2em !important;
	font-weight: bold;
	line-height: 115%;
}

dl.download dd, dl.code dd, dl.note dd,
dl.alert dd, dl.new dd, dl.construction dd,
dl.information dd {
	line-height: 115%;
	list-style-type: disc;
}

.download {
	background-color: #353;
	background-image: url('images/package_go.png');
	border-bottom: 2px solid #383;
	border-top: 2px solid #383;
}

.download a, .download a:visited {
	border-bottom: 2px dotted #3F3;
	color: #3F3;
	text-decoration: none !important;
}

.download a:hover {
	border-bottom: 2px dotted #3C3;
	color: #3C3;
	text-decoration: none !important;
}

.code { /* use p class=code when you want to fake it, sometimes handy */
	background-color: #444;
	background-image: url('images/application_osx_terminal.png');
	border-bottom: 2px solid #AAA;
	border-top: 2px solid #AAA;
	font-family: 'Courier New', Courier, Fixed;
}

.alert {
	background-color: #533;
	background-image: url('images/exclamation.png');
	border-bottom: 2px solid #F33;
	border-top: 2px solid #F33;
}

.new {
	background-color: #643;
	background-image: url('images/new.png');
	border-bottom: 2px solid #F93;
	border-top: 2px solid #F93;
}

.construction {
	background-color: #553;
	background-image: url('images/error.png');
	border-bottom: 2px solid #FF3;
	border-top: 2px solid #FF3;
}

.information {
	background-color: #335;
	background-image: url('images/information.png');
	border-bottom: 2px solid #33F;
	border-top: 2px solid #33F;
}

.note {
	background-color: #444;
	background-image: url('images/page_white_text.png');
	border-bottom: 2px solid #AAA;
	border-top: 2px solid #AAA;
}

.callout {
	border-bottom: 2px solid #CCC;
	border-top: 2px solid #CCC;
	color: #CCC;
	font-size: 1.4em !important;
	margin: 10px auto;
	padding: 10px;
	text-align: justify;
}
/* @end */

/* based on xTypo for joomla: http://extensions.joomla.org/component/option,com_mtree/task,viewlink/link_id,2087/Itemid,35/ */

.info {
background: url(icon/info.gif) center no-repeat;
background-color:#F8FAFC ;
background-position: 15px 50%;
text-align: left;
padding: 5px 20px 5px 45px;
color:#5E6273;
border-top: 2px solid #B5D4FE ;
border-bottom: 2px solid #B5D4FE;
}

.warning {
background: url(icon/warning.gif) center no-repeat;
background-color: #FBEEF1;
background-position: 15px 50%;
text-align: left;
padding: 5px 20px 5px 45px;
color:#8E6A64;
border-top: 2px solid #FEABB9;
border-bottom: 2px solid #FEABB9;
}

.sticky {
background: url(icon/sun.gif) center no-repeat;
background-color: #E6FFE1;
background-position: 15px 50%;
text-align: left;
padding: 5px 20px 5px 45px;
color:#48793F;
border-top: 2px solid #FEABB9 ;
border-bottom: 2px solid #FEABB9;
}

.feed {
background: url(icon/feed.gif) center no-repeat;
background-color: #E0E0E8;	
background-position: 15px 50%;
text-align: left;
padding: 5px 20px 5px 45px;
color:#333333;
border-top: 2px solid #85BBDB ;
border-bottom: 2px solid #85BBDB;
}

.donwload {
background: url(icon/download.gif) center no-repeat;
background-color: #F0F0F0;	
background-position: 15px 50%;
text-align: left;
padding: 5px 20px 5px 45px;
color:#666666;
border-top: 2px solid #c0c0c0 ;
border-bottom: 2px solid #c0c0c0;
}

.code {	
background: #F0F0F0 url(icon/_no-image.gif) 10px 5px no-repeat;
padding:5px 20px 5px 10px;
font-family: Courier New, Courier, mono, times new roman;
line-height:150%;
border-left: 5px solid #C3D7EA;	 
color:#666666;
}

.quote {
margin: 15px 10px;
background:#FFFFFF  url(icon/quote1.gif) top left no-repeat;
padding:10px 20px 10px 60px;
border-top: 2px dotted #cccccc;
border-bottom: 2px dotted #cccccc;
background: url(icon/quote2.gif) bottom right no-repeat;
padding:10px 30px 15px 0px;
font-size:110%;
line-height:120%;	
color:#999999;
font-style:italic;
}

.quote_left {
float:left;
width: 200px;;
margin: 15px 10px;
background:#FFFFFF  url(icon/quote1.gif) top left no-repeat;
padding:10px 20px 10px 60px;
border-top: 2px dotted #cccccc;
border-bottom: 2px dotted #cccccc;
background: url(icon/quote2.gif) bottom right no-repeat;
padding:10px 30px 15px 0px;
font-size:110%;
line-height:120%;	
color:#999999;
font-style:italic;
}

.quote_right {
float:right;
width: 200px;
margin: 15px 10px;
background:#FFFFFF  url(icon/quote1.gif) top left no-repeat;
padding:10px 20px 10px 60px;
border-top: 2px dotted #cccccc;
border-bottom: 2px dotted #cccccc;
background: url(icon/quote2.gif) bottom right no-repeat;
padding:10px 30px 15px 0px;font-size:110%;
line-height:120%;	
color:#999999;
font-style:italic;
}

.dropcap{
float: left;
text-transform:uppercase;
line-height:80%;
padding:0px 8px 4px 0px;
display: block;
color:#333333;
font-size: 70px;
font-family: Georgia, Times New Roman, Trebuchet MS;
}

* @group Special Styles */
/* This is based on styles from the Sawchuk scheme for K2 */
/* http://www.deanjrobinson.com/wordpress/redoable */
.download, .code, .note,
.alert, .new, .construction,
.information {
	background-position: 15px 10px;
	background-repeat: no-repeat;
	font-size: 1.2em !important;
	line-height: 115%;
	margin: 10px auto;
	padding: 10px 10px 10px 50px;
	text-align: left;
}

ul.download, ul.code, ul.note,
ul.alert, ul.new, ul.construction,
ul.information {
	font-size: 1em !important;
	line-height: 115%;
	list-style-type: disc;
	list-style-position: inside;
	padding: 10px 10px 10px 50px;
}

ol.download, ol.code, ol.note,
ol.alert, ol.new, ol.construction,
ol.information {
	font-size: 1em !important;
	line-height: 115%;
	list-style-type: decimal;
	list-style-position: inside;
	padding: 10px 10px 10px 65px;
}

dl.download, dl.code, dl.note,
dl.alert, dl.new, dl.construction,
dl.information {
	font-size: 1em !important;
	line-height: 115%;
	padding: 10px 10px 10px 50px;
}

dl.download dt, dl.code dt, dl.note dt,
dl.alert dt, dl.new dt, dl.construction dt,
dl.information dt {
	font-size: 1.2em !important;
	font-weight: bold;
	line-height: 115%;
}

dl.download dd, dl.code dd, dl.note dd,
dl.alert dd, dl.new dd, dl.construction dd,
dl.information dd {
	line-height: 115%;
	list-style-type: disc;
}

.download {
	background-color: #353;
	background-image: url('images/package_go.png');
	border-bottom: 2px solid #383;
	border-top: 2px solid #383;
}

.download a, .download a:visited {
	border-bottom: 2px dotted #3F3;
	color: #3F3;
	text-decoration: none !important;
}

.download a:hover {
	border-bottom: 2px dotted #3C3;
	color: #3C3;
	text-decoration: none !important;
}

.code { /* use p class=code when you want to fake it, sometimes handy */
	background-color: #444;
	background-image: url('images/application_osx_terminal.png');
	border-bottom: 2px solid #AAA;
	border-top: 2px solid #AAA;
	font-family: 'Courier New', Courier, Fixed;
}
	
.alert {
	background-color: #533;
	background-image: url('images/exclamation.png');
	border-bottom: 2px solid #F33;
	border-top: 2px solid #F33;
}

.new {
	background-color: #643;
	background-image: url('images/new.png');
	border-bottom: 2px solid #F93;
	border-top: 2px solid #F93;
}

.construction {
	background-color: #553;
	background-image: url('images/error.png');
	border-bottom: 2px solid #FF3;
	border-top: 2px solid #FF3;
}

.information {
	background-color: #335;
	background-image: url('images/information.png');
	border-bottom: 2px solid #33F;
	border-top: 2px solid #33F;
}

.note {
	background-color: #444;
	background-image: url('images/page_white_text.png');
	border-bottom: 2px solid #AAA;
	border-top: 2px solid #AAA;
}

.callout {
	border-bottom: 2px solid #CCC;
	border-top: 2px solid #CCC;
	color: #CCC;
	font-size: 1.4em !important;
	margin: 10px auto;
	padding: 10px;
	text-align: justify;
}
/* @end */

http://www.deanjrobinson.com/wordpress/redoable

This is based on styles from the Sawchuk scheme for K2 to create, alert, download, code, construction, new, information, note and callout boxes.

Complemented with xtypo joomla extension.

Alert messages with CSS

PHP