Is there a way to streamline this CSS code by reducing its length, grouping properties together, removing unnecessary code, and so on?
/* cleaner version */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
:focus { outline: 0; } /* make sure to set focus styles! */
ins { text-decoration: none; } /* highlight inserts in some way */}
del { text-decoration: line-through; }
table {
border-collapse: collapse;
border-spacing: 0;
}
/* elements */
body {
background: #F9F9F9;
color: #888;
font-family: Arial, "微软雅黑", "MS Trebuchet", sans-serif;
font-size: 75%
}
h1 {
font-size: 32px;
}
h2 {
color: #999;
font-size: 14px;
margin: 0 0 20px 0;
}
p {
line-height: 160%;
}
a {
color: #69C;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* layout */
.container {
margin: 0 auto;
overflow: hidden;
padding: 0 15px;
width: 960px;
}
/* header */
#header {
background: #EEE;
}
#header h1 {
float: left;
}
#header h1 a {
background: url(../images/logo.png) no-repeat scroll 0 0;
float: left;
height: 30px;
text-indent: -9999px;
width: 500px;
}
/* banner */
#header-top {
border-bottom: 1px solid #DDD;
padding: 0 0 15px 0;
margin: 30px 0;
overflow: hidden;
width: 960px;
}
#lang {
float: right;
padding: 20px 0 0 0;
}
#lang li {
float: left;
}
#lang li a {
font-size: 10px;
float: left;
margin: 0 0 0 20px;
}
#lang li a.current {
color: #888;
}
/* introduction */
#header-bottom {
overflow: hidden;
padding: 0 0 30px;
}
#tagline {
float: left;
margin: 0 40px 0 ;
width: 540px;
}
#tagline h2 {
font-size: 24px;
}
#about {
float: right;
width: 380px;
}
/* work */
#content {
background-color: #F9F9F9;
}
.showcase {
border-bottom: 1px solid #DDD;
margin: 30px 0 0;
overflow: hidden;
padding: 0 0 30px;
width: 960px;
}
.showcase div.right {
display: inline;
float: left;
}
.showcase div.left {
display: inline;
float: left;
height: 211px;
margin: 0 20px 0 ;
position: relative;
width: 290px;
}
.showcase div img {
border: 2px solid #EEE;
width: 630px;
height: 190px;
padding: 8px;
}
.showcase div img:hover {
border: 2px solid #CDE;
}
.showcase div p {
margin: 0 0 20px 0;
}
.showcase div ul#sites {
position: absolute;
bottom: 0;
overflow: hidden;
line-height: 160%;
}
.showcase div ul#sites li {
float: left;
}
.showcase div ul#sites li a {
border: 1px solid #9CF;
color: #69C;
float: left;
padding: 0 5px;
margin: 0 20px 0 ;
text-decoration: none;
}
.showcase div ul#sites li a:hover {
border: 1px solid #69C;
}
.showcase div ul#details {
line-height: 160%;
}
/* footer */
#footer {
background-color: #333;
color: #BBB;
clear: both;
}
#footer h2 {
color: #EEE;
}
#footer p {
color: #BBB;
}
/* contact section */
#footer-top {
border-bottom: 1px solid #444;
line-height: 160%;
overflow: hidden;
padding: 30px 0;
width: 960px;
}
#footer-top div {
overflow: hidden;
}
#contact {
float: left;
margin: 0 40px 0 ;
overflow: hidden;
}
#contact form {
margin: 20px 0 ;
}
#sendmail label {
width: 250px;
margin: 0 0 10px ;
}
#sendmail label.error{
color: #FF4444;
margin: 0 0 20px ;
}
#sendmail label {
display: block;
vertical-align: top;
cursor: hand;
}
#name, #email, #message {
border: 0;
background-color: #444;
font-family: Arial, "MS Trebuchet", sans-serif;
color: #BBB;
font-size: 12px;
padding: 6px;
margin: 0 0 10px;
width: 380px;
}
#name:focus, #email:focus, #message:focus {
background-color: #555;
}
#message {
height: 200px;
overflow: auto;
}
#button {
background-color: #69C;
border-color: #69C;
border-style: solid;
border-width: 1px;
color: #FFFFFF;
cursor: pointer;
display: block;
font-family: Arial, "MS Trebuchet", sans-serif;
margin-top: 10px;
padding: 2px;
width: 100px
}
#button:hover {
background-color: #49C;
border-color: #49C;
}
/*\*//*/ form.contact legend { display: inline-block; } /* IE Mac legend fix */
#info {
float: right;
width: 303px;
margin: 0 0 0 40px;
}
#tools {
float: right;
margin: 0 0 0 40px;
width: 83px;
}
/* about */
#footer-bottom {
font-size: 10px;
margin: 15px auto;
}
EDIT: ...or are there any CSS optimizers that can combine CSS selectors and properties?