How to create CSS banners

.rec-hh-property-blog .icon { 
background-image: url(images/icon-sprites.png) !important;
}
.rec-hh-property-blog .status-sticker,
.rec-hh-property-blog .status-sticker.new { display: block; color: #fff; font-size: 1.5em; font-weight: 600; text-align: center; -webkit-transform: rotate(-40deg); -moz-transform:    rotate(-40deg); -ms-transform:     rotate(-40deg); -o-transform:      rotate(-40deg); position: relative; padding: 7px 0; left: -30px; top: 20px; width: 160px; background-color: #BFDC7A; background-image: 
 -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); background-image: 
 -webkit-linear-gradient(top, #BFDC7A, #8EBF45); background-image:    
 -moz-linear-gradient(top, #BFDC7A, #8EBF45); background-image:     
 -ms-linear-gradient(top, #BFDC7A, #8EBF45); background-image:      
 -o-linear-gradient(top, #BFDC7A, #8EBF45); -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow:    0px 0px 3px rgba(0, 0, 0, 0.3); box-shadow:         0px 0px 3px rgba(0, 0, 0, 0.3); }
.rec-hh-property-blog .status-sticker:before,
.rec-hh-property-blog .status-sticker:after { content: ""; border-top:   3px solid #6e8900; border-left:  3px solid transparent; border-right: 3px solid transparent; position:absolute; bottom: -3px; }
.rec-hh-property-blog .status-sticker.sold { background-color: #ea373a; background-image: 
 -webkit-gradient(linear, left top, left bottom, from(#ea373a), to(#ea3b36)); background-image: 
 -webkit-linear-gradient(top, #ea373a, #ea3b36); background-image:    
 -moz-linear-gradient(top, #ea373a, #ea3b36); background-image:     
 -ms-linear-gradient(top, #ea373a, #ea3b36); background-image:      
 -o-linear-gradient(top, #ea373a, #ea3b36); }