clean css - a resource for web designers

Home | About | Why Optimize? | Contact


CSS Formatter and Optimiser
(based on csstidy 1.1)

Language: English Deutsch French

Important Notes:

    * the same selectors and properties are automatically merged
    * your code should be well-formed. This is no validator which points out errors in your CSS code. To make sure that your code is valid, use the W3C Validator.



CSS Input: CSS-Code:/* -------------------------------------------------------------- reset.css * Resets default browser CSS. -------------------------------------------------------------- */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } body { line-height: 1.5; } /* Tables still need 'cellspacing="0"' in the markup. */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } table, td, th { vertical-align: middle; } /* Remove possible quote marks (") from <q>, <blockquote>. */ blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* Remove annoying border on linked images. */ a img { border: none; } /* -------------------------------------------------------------- grid.css * Sets up an easy-to-use grid of 24 columns. By default, the grid is 950px wide, with 24 columns spanning 30px, and a 10px margin between columns. If you need fewer or more columns, namespaces or semantic element names, use the compressor script (lib/compress.rb) Note: Changes made in this file will not be applied when using the compressor: make changes in lib/blueprint/grid.css.rb -------------------------------------------------------------- */ /* A container should group all your columns. */ .container { width: 950px; margin: 0 auto; } /* Use this class on any .span / container to see the grid. */ .showgrid { background: url(src/grid.png); } /* Columns -------------------------------------------------------------- */ /* Sets up basic grid floating and margin. */ .column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 { float: left; margin-right: 10px; } /* The last column in a row needs this class. */ .last, div.last { margin-right: 0; } /* Use these classes to set the width of a column. */ .span-1 { width: 30px; } .span-2 { width: 70px; } .span-3 { width: 110px; } .span-4 { width: 150px; } .span-5 { width: 190px; } .span-6 { width: 230px; } .span-7 { width: 270px; } .span-8 { width: 310px; } .span-9 { width: 350px; } .span-10 { width: 390px; } .span-11 { width: 430px; } .span-12 { width: 470px; } .span-13 { width: 510px; } .span-14 { width: 550px; } .span-15 { width: 590px; } .span-16 { width: 630px; } .span-17 { width: 670px; } .span-18 { width: 710px; } .span-19 { width: 750px; } .span-20 { width: 790px; } .span-21 { width: 830px; } .span-22 { width: 870px; } .span-23 { width: 910px; } .span-24 { width: 950px; margin: 0; } /* Add these to a column to append empty cols. */ .append-1 { padding-right: 40px; } .append-2 { padding-right: 80px; } .append-3 { padding-right: 120px; } .append-4 { padding-right: 160px; } .append-5 { padding-right: 200px; } .append-6 { padding-right: 240px; } .append-7 { padding-right: 280px; } .append-8 { padding-right: 320px; } .append-9 { padding-right: 360px; } .append-10 { padding-right: 400px; } .append-11 { padding-right: 440px; } .append-12 { padding-right: 480px; } .append-13 { padding-right: 520px; } .append-14 { padding-right: 560px; } .append-15 { padding-right: 600px; } .append-16 { padding-right: 640px; } .append-17 { padding-right: 680px; } .append-18 { padding-right: 720px; } .append-19 { padding-right: 760px; } .append-20 { padding-right: 800px; } .append-21 { padding-right: 840px; } .append-22 { padding-right: 880px; } .append-23 { padding-right: 920px; } /* Add these to a column to prepend empty cols. */ .prepend-1 { padding-left: 40px; } .prepend-2 { padding-left: 80px; } .prepend-3 { padding-left: 120px; } .prepend-4 { padding-left: 160px; } .prepend-5 { padding-left: 200px; } .prepend-6 { padding-left: 240px; } .prepend-7 { padding-left: 280px; } .prepend-8 { padding-left: 320px; } .prepend-9 { padding-left: 360px; } .prepend-10 { padding-left: 400px; } .prepend-11 { padding-left: 440px; } .prepend-12 { padding-left: 480px; } .prepend-13 { padding-left: 520px; } .prepend-14 { padding-left: 560px; } .prepend-15 { padding-left: 600px; } .prepend-16 { padding-left: 640px; } .prepend-17 { padding-left: 680px; } .prepend-18 { padding-left: 720px; } .prepend-19 { padding-left: 760px; } .prepend-20 { padding-left: 800px; } .prepend-21 { padding-left: 840px; } .prepend-22 { padding-left: 880px; } .prepend-23 { padding-left: 920px; } /* Border on right hand side of a column. */ div.border { padding-right: 4px; margin-right: 5px; border-right: 1px solid #eee; } /* Border with more whitespace, spans one column. */ div.colborder { padding-right: 24px; margin-right: 25px; border-right: 1px solid #eee; } /* Use these classes on an element to push it into the next column, or to pull it into the previous column. */ .pull-1 { margin-left: -40px; } .pull-2 { margin-left: -80px; } .pull-3 { margin-left: -120px; } .pull-4 { margin-left: -160px; } .pull-5 { margin-left: -200px; } .pull-1, .pull-2, .pull-3, .pull-4, .pull-5 { float:left; position:relative; } .push-1 { margin: 0 -40px 1.5em 40px; } .push-2 { margin: 0 -80px 1.5em 80px; } .push-3 { margin: 0 -120px 1.5em 120px; } .push-4 { margin: 0 -160px 1.5em 160px; } .push-5 { margin: 0 -200px 1.5em 200px; } .push-1, .push-2, .push-3, .push-4, .push-5 { float: right; position:relative; } /* Misc classes and elements -------------------------------------------------------------- */ /* In case you need to add a gutter above/below an element */ .prepend-top { margin-top:1.5em; } .append-bottom { margin-bottom:1.5em; } /* Use a .box to create a padded box inside a column. */ .box { padding: 1.5em; margin-bottom: 1.5em; background: #E5ECF9; } /* Use this to create a horizontal ruler across a column. */ hr { background: #ddd; color: #ddd; clear: both; float: none; width: 100%; height: .1em; margin: 0 0 1.45em; border: none; } hr.space { background: #fff; color: #fff; } /* Clearing floats without extra markup Based on How To Clear Floats Without Structural Markup by PiE [http://www.positioniseverything.net/easyclearing.html] */ .clearfix:after, .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; overflow:hidden; } .clearfix, .container {display: block;} /* Regular clearing apply to column that should drop below previous ones. */ .clear { clear:both; } /* -------------------------------------------------------------- typography.css * Sets up some sensible default typography. -------------------------------------------------------------- */ /* Default font settings. The font-size percentage is of 16px. (0.75 * 16px = 12px) */ body { font-size: 75%; color: #222; background: #fff; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; } /* Headings -------------------------------------------------------------- */ h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; } h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; } h2 { font-size: 2em; margin-bottom: 0.75em; } h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; } h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; } h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; } h6 { font-size: 1em; font-weight: bold; } h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; } /* Text elements -------------------------------------------------------------- */ p { margin: 0 0 1.5em; } p img.left { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; } p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; } a:focus, a:hover { color: #000; } a { color: #009; text-decoration: underline; } blockquote { margin: 1.5em; color: #666; font-style: italic; } strong { font-weight: bold; } em,dfn { font-style: italic; } dfn { font-weight: bold; } sup, sub { line-height: 0; } abbr, acronym { border-bottom: 1px dotted #666; } address { margin: 0 0 1.5em; font-style: italic; } del { color:#666; } pre { margin: 1.5em 0; white-space: pre; } pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; } /* Lists -------------------------------------------------------------- */ li ul, li ol { margin:0 1.5em; } ul, ol { margin: 0 1.5em 1.5em 1.5em; } ul { list-style-type: disc; } ol { list-style-type: decimal; } dl { margin: 0 0 1.5em 0; } dl dt { font-weight: bold; } dd { margin-left: 1.5em;} /* Tables -------------------------------------------------------------- */ table { margin-bottom: 1.4em; width:100%; } th { font-weight: bold; } thead th { background: #c3d9ff; } th,td,caption { padding: 4px 10px 4px 5px; } tr.even td { background: #e5ecf9; } tfoot { font-style: italic; } caption { background: #eee; } /* Misc classes -------------------------------------------------------------- */ .small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; } .large { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; } .hide { display: none; } .quiet { color: #666; } .loud { color: #000; } .highlight { background:#ff0; } .added { background:#060; color: #fff; } .removed { background:#900; color: #fff; } .first { margin-left:0; padding-left:0; } .last { margin-right:0; padding-right:0; } .top { margin-top:0; padding-top:0; } .bottom { margin-bottom:0; padding-bottom:0; } /* -------------------------------------------------------------- forms.css * Sets up some default styling for forms * Gives you classes to enhance your forms Usage: * For text fields, use class .title or .text -------------------------------------------------------------- */ label { font-weight: bold; } fieldset { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; } legend { font-weight: bold; font-size:1.2em; } /* Form fields -------------------------------------------------------------- */ input.text, input.title, textarea, select { margin:0.5em 0; border:1px solid #bbb; } input.text:focus, input.title:focus, textarea:focus, select:focus { border:1px solid #666; } input.text, input.title { width: 300px; padding:5px; } input.title { font-size:1.5em; } textarea { width: 390px; height: 250px; padding:5px; } /* Success, notice and error boxes -------------------------------------------------------------- */ .error, .notice, .success { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; } .error { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; } .notice { background: #FFF6BF; color: #514721; border-color: #FFD324; } .success { background: #E6EFC2; color: #264409; border-color: #C6D880; } .error a { color: #8a1f11; } .notice a { color: #514721; } .success a { color: #264409; } /* -------------------------------------------------------------- ie.css Contains every hack for Internet Explorer, so that our core files stay sweet and nimble. -------------------------------------------------------------- */ /* Make sure the layout is centered in IE5 */ body { text-align: center; } .container { text-align: left; } /* Fixes IE margin bugs */ * html .column, * html div.span-1, * html div.span-2, * html div.span-3, * html div.span-4, * html div.span-5, * html div.span-6, * html div.span-7, * html div.span-8, * html div.span-9, * html div.span-10, * html div.span-11, * html div.span-12, * html div.span-13, * html div.span-14, * html div.span-15, * html div.span-16, * html div.span-17, * html div.span-18, * html div.span-19, * html div.span-20, * html div.span-21, * html div.span-22, * html div.span-23, * html div.span-24 { overflow-x: hidden; } /* Elements -------------------------------------------------------------- */ /* Fixes incorrect styling of legend in IE6. */ * html legend { margin:0px -8px 16px 0; padding:0; } /* Fixes incorrect placement of ol numbers in IE6/7. */ ol { margin-left:2em; } /* Fixes wrong line-height on sup/sub in IE. */ sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } /* Fixes IE7 missing wrapping of code elements. */ html>body p code { *white-space: normal; } /* IE 6&7 has problems with setting proper <hr> margins. */ hr { margin: -8px auto 11px; } /* Clearing -------------------------------------------------------------- */ /* Makes clearfix actually work in IE */ .clearfix, .container {display: inline-block;} * html .clearfix, * html .container {height: 1%;} /* Forms -------------------------------------------------------------- */ /* Fixes padding on fieldset */ fieldset {padding-top: 0;} [It's All Text!] CSS from URL:
Code Layout: Compression (code layout):
Custom template [It's All Text!]
Options Sort Selectors (caution)
Sort Properties
Optimise selectors and their properties
0 1 2 (?)
Merge shorthand properties
Only safe optimisations
Compress colors
Compress font-weight
Lowercase selectors
Case for properties:
Lowercase Uppercase
Remove unnecessary backslashes
convert !important-hack
Remove last ;
Save comments
Discard invalid properties
Output as file
Messages

30
    Optimised font-weight: Changed "normal" to "400"
272
    Optimised font-weight: Changed "normal" to "400"
278
    Optimised font-weight: Changed "bold" to "700"
279
    Optimised font-weight: Changed "bold" to "700"
299
    Optimised font-weight: Changed "bold" to "700"
301
    Optimised font-weight: Changed "bold" to "700"
318
    Optimised shorthand notation (margin): Changed "0 1.5em 1.5em 1.5em" to "0 1.5em 1.5em"
323
    Optimised shorthand notation (margin): Changed "0 0 1.5em 0" to "0 0 1.5em"
324
    Optimised font-weight: Changed "bold" to "700"
332
    Optimised font-weight: Changed "bold" to "700"
368
    Optimised font-weight: Changed "bold" to "700"
369
    Optimised shorthand notation (margin): Changed "0 0 1.5em 0" to "0 0 1.5em"
370
    Optimised font-weight: Changed "bold" to "700"
428
    Invalid property in CSS2.1: overflow-x
435
    Optimised number: Changed "0px" to "0"

Input: 13.907KB, Output: 7.445KB, Compression Ratio: 46.5% (-6462 Bytes)

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0;}
body{line-height:1.5;font-size:75%;color:#222;background:#fff;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;text-align:center;}
table{border-collapse:separate;border-spacing:0;margin-bottom:1.4em;width:100%;}
caption,th,td{text-align:left;font-weight:400;}
table,td,th{vertical-align:middle;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
a img{border:none;}
.container{width:950px;text-align:left;margin:0 auto;}
.showgrid{background:url(src/grid.png);}
.column,div.span-1,div.span-2,div.span-3,div.span-4,div.span-5,div.span-6,div.span-7,div.span-8,div.span-9,div.span-10,div.span-11,div.span-12,div.span-13,div.span-14,div.span-15,div.span-16,div.span-17,div.span-18,div.span-19,div.span-20,div.span-21,div.span-22,div.span-23,div.span-24{float:left;margin-right:10px;}
.last,div.last{margin-right:0;}
.span-1{width:30px;}
.span-2{width:70px;}
.span-3{width:110px;}
.span-4{width:150px;}
.span-5{width:190px;}
.span-6{width:230px;}
.span-7{width:270px;}
.span-8{width:310px;}
.span-9{width:350px;}
.span-10{width:390px;}
.span-11{width:430px;}
.span-12{width:470px;}
.span-13{width:510px;}
.span-14{width:550px;}
.span-15{width:590px;}
.span-16{width:630px;}
.span-17{width:670px;}
.span-18{width:710px;}
.span-19{width:750px;}
.span-20{width:790px;}
.span-21{width:830px;}
.span-22{width:870px;}
.span-23{width:910px;}
.span-24{width:950px;margin:0;}
.append-1{padding-right:40px;}
.append-2{padding-right:80px;}
.append-3{padding-right:120px;}
.append-4{padding-right:160px;}
.append-5{padding-right:200px;}
.append-6{padding-right:240px;}
.append-7{padding-right:280px;}
.append-8{padding-right:320px;}
.append-9{padding-right:360px;}
.append-10{padding-right:400px;}
.append-11{padding-right:440px;}
.append-12{padding-right:480px;}
.append-13{padding-right:520px;}
.append-14{padding-right:560px;}
.append-15{padding-right:600px;}
.append-16{padding-right:640px;}
.append-17{padding-right:680px;}
.append-18{padding-right:720px;}
.append-19{padding-right:760px;}
.append-20{padding-right:800px;}
.append-21{padding-right:840px;}
.append-22{padding-right:880px;}
.append-23{padding-right:920px;}
.prepend-1{padding-left:40px;}
.prepend-2{padding-left:80px;}
.prepend-3{padding-left:120px;}
.prepend-4{padding-left:160px;}
.prepend-5{padding-left:200px;}
.prepend-6{padding-left:240px;}
.prepend-7{padding-left:280px;}
.prepend-8{padding-left:320px;}
.prepend-9{padding-left:360px;}
.prepend-10{padding-left:400px;}
.prepend-11{padding-left:440px;}
.prepend-12{padding-left:480px;}
.prepend-13{padding-left:520px;}
.prepend-14{padding-left:560px;}
.prepend-15{padding-left:600px;}
.prepend-16{padding-left:640px;}
.prepend-17{padding-left:680px;}
.prepend-18{padding-left:720px;}
.prepend-19{padding-left:760px;}
.prepend-20{padding-left:800px;}
.prepend-21{padding-left:840px;}
.prepend-22{padding-left:880px;}
.prepend-23{padding-left:920px;}
div.border{padding-right:4px;margin-right:5px;border-right:1px solid #eee;}
div.colborder{padding-right:24px;margin-right:25px;border-right:1px solid #eee;}
.pull-1{margin-left:-40px;}
.pull-2{margin-left:-80px;}
.pull-3{margin-left:-120px;}
.pull-4{margin-left:-160px;}
.pull-5{margin-left:-200px;}
.pull-1,.pull-2,.pull-3,.pull-4,.pull-5{float:left;position:relative;}
.push-1{margin:0 -40px 1.5em 40px;}
.push-2{margin:0 -80px 1.5em 80px;}
.push-3{margin:0 -120px 1.5em 120px;}
.push-4{margin:0 -160px 1.5em 160px;}
.push-5{margin:0 -200px 1.5em 200px;}
.push-1,.push-2,.push-3,.push-4,.push-5{float:right;position:relative;}
.prepend-top{margin-top:1.5em;}
.append-bottom{margin-bottom:1.5em;}
.box{margin-bottom:1.5em;background:#E5ECF9;padding:1.5em;}
hr{background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:.1em;border:none;margin:-8px auto 11px;}
hr.space{background:#fff;color:#fff;}
.clearfix:after,.container:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
.clearfix,.container{display:inline-block;}
.clear{clear:both;}
h1,h2,h3,h4,h5,h6{font-weight:400;color:#111;}
h1{font-size:3em;line-height:1;margin-bottom:0.5em;}
h2{font-size:2em;margin-bottom:0.75em;}
h3{font-size:1.5em;line-height:1;margin-bottom:1em;}
h4{font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
h5{font-size:1em;font-weight:700;margin-bottom:1.5em;}
h6{font-size:1em;font-weight:700;}
h1 img,h2 img,h3 img,h4 img,h5 img,h6 img{margin:0;}
p img.left{float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
p img.right{float:right;margin:1.5em 0 1.5em 1.5em;}
a{color:#009;text-decoration:underline;}
blockquote{color:#666;font-style:italic;margin:1.5em;}
sup,sub{line-height:0;}
abbr,acronym{border-bottom:1px dotted #666;}
address{font-style:italic;margin:0 0 1.5em;}
pre{white-space:pre;margin:1.5em 0;}
pre,code,tt{font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
li ul,li ol{margin:0 1.5em;}
ul,ol{margin:0 1.5em 1.5em;}
ul{list-style-type:disc;}
ol{list-style-type:decimal;margin-left:2em;}
dd{margin-left:1.5em;}
thead th{background:#c3d9ff;}
th,td,caption{padding:4px 10px 4px 5px;}
tr.even td{background:#e5ecf9;}
caption{background:#eee;}
.small{font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
.large{font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
.hide{display:none;}
.highlight{background:#ff0;}
.added{background:#060;color:#fff;}
.removed{background:#900;color:#fff;}
.first{margin-left:0;padding-left:0;}
.last{margin-right:0;padding-right:0;}
.top{margin-top:0;padding-top:0;}
.bottom{margin-bottom:0;padding-bottom:0;}
fieldset{border:1px solid #ccc;margin:0 0 1.5em;padding:0 1.4em 1.4em;}
legend{font-weight:700;font-size:1.2em;}
input.text,input.title,textarea,select{border:1px solid #bbb;margin:0.5em 0;}
input.text:focus,input.title:focus,textarea:focus,select:focus{border:1px solid #666;}
input.text,input.title{width:300px;padding:5px;}
input.title{font-size:1.5em;}
textarea{width:390px;height:250px;padding:5px;}
.error,.notice,.success{margin-bottom:1em;border:2px solid #ddd;padding:.8em;}
.error{background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
.notice{background:#FFF6BF;color:#514721;border-color:#FFD324;}
.success{background:#E6EFC2;color:#264409;border-color:#C6D880;}
.error a{color:#8a1f11;}
.notice a{color:#514721;}
.success a{color:#264409;}
* html .column,* html div.span-1,* html div.span-2,* html div.span-3,* html div.span-4,* html div.span-5,* html div.span-6,* html div.span-7,* html div.span-8,* html div.span-9,* html div.span-10,* html div.span-11,* html div.span-12,* html div.span-13,* html div.span-14,* html div.span-15,* html div.span-16,* html div.span-17,* html div.span-18,* html div.span-19,* html div.span-20,* html div.span-21,* html div.span-22,* html div.span-23,* html div.span-24{overflow-x:hidden;}
* html legend{margin:0 -8px 16px 0;padding:0;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
html>body p code{white-space:normal;}
* html .clearfix,* html .container{height:1%;}
p,dl{margin:0 0 1.5em;}
a:focus,a:hover,.loud{color:#000;}
strong,dfn,dl dt,th,label{font-weight:700;}
em,dfn,tfoot{font-style:italic;}
del,.quiet{color:#666;}