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:
html
{
	height: 100%;
}
body
{
	font-family: verdana, arial, sans-serif;
	font-size: .68em;
	margin: 0px;
	padding: 0px;
}
p
{
	line-height: 1.7em;
	margin: 0px;
	padding: 0px 0px 16px 0px;
}
h1
{
	border-bottom: 1px solid;
	font-family: arial, sans-serif;
	font-size: 150%;
	font-weight: normal;
	letter-spacing: .1em;
	margin: 0px 0px 12px 0px;
	padding: 16px 0px 5px 0px;
	text-transform: uppercase;
}
h2
{
	font-family: arial, sans-serif;
	font-size: 125%;
	font-weight: normal;
	margin: 0px 0px 12px 0px;
	padding: 5px 0px 5px 0px;
	text-transform: uppercase;
}
.sub
{
	font-size: 55%;
	letter-spacing: .1em;
	padding-left: 12px;
}
img
{
	border: 0px;
	margin: 0px;
	padding: 0px;
}
a
{
	outline: none;
}
blockquote
{
	border-left: 8px solid;
	margin: 20px 0px 20px 0px;
	padding: 10px 20px 0px 20px;
}
ul
{
	margin: 2px 0px 18px 16px;
	padding: 0px;
}
ul li
{
	list-style-type: square;
	margin: 0px 0px 6px 0px;
	padding: 0px;
}
ol
{
	margin: 8px 0px 0px 24px;
	padding: 0px;
}
ol li
{
	margin: 0px 0px 11px 0px;
	padding: 0px;
}
#logo, #menu, #site_content
{
	margin-left: auto;
	margin-right: auto;
}
#logo
{
	border-top: 5px solid;
	height: 95px;
	width: 880px;
}
#logo h1
{
	border: 0px;
	float: left;
	font-family: century gothic, sans-serif;
	font-size: 600%;
	font-weight: normal;
	letter-spacing: 0px;
	padding: 0px 0px 0px 14px;
	text-transform: lowercase;
}
#links
{
	font-size: 80%;
	margin: 15px 9px 0px 0px;
	padding: 20px 10px 0px 0px;
	text-align: right;
	text-transform: uppercase;
}
#links a, #links a:hover
{
	padding: 0px 0px 2px 0px;
	text-decoration: none;
}
#menu
{
	border-bottom: 2px solid;
	height: 44px;
	width: 880px;
}
#menu ul
{
	margin: 0px auto;
}
#menu li
{
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
}
#menu li a
{
	border-right: 2px solid;
	display: block;
	float: left;
	font-weight: bold;
	height: 38px;
	padding: 6px 19px 0px 19px;
	text-decoration: none;
}
#colours
{
	height: 0px;
	padding: 16px 16px 0px 16px;
	text-align: right;
}
#site_content
{
	border-bottom: 1px solid;
	border-left: 1px solid;
	border-right: 1px solid;
	overflow: hidden;
	width: 878px;
}
#photo_side_menu
{
	float: left;
	padding: 22px 3px 10px 19px;
	width: 170px;
}
.photo_side_menu_item
{
	height: 70px;
	padding: 6px 0px 8px 0px;
	width: 170px;
}
.photo_side_menu_item a
{
	float: left;
	height: 54px;
	width: 146px;
}
.photo_side_menu_item img
{
	display: block;
	margin: 2px;
}
.photo_info
{
	float: left;
	padding-top: 4px;
}
#web_side_menu
{
	float: left;
	padding: 22px 3px 10px 19px;
	width: 170px;
}
.web_side_menu_item
{
	height: 115px;
	padding: 6px 0px 8px 0px;
	width: 155px;
}
.web_side_menu_item a
{
	float: left;
	height: 95px;
	width: 160px;
}
.web_side_menu_item img
{
	display: block;
	margin: 2px;
}
.web_info
{
	float: left;
	padding-top: 4px;
}
#content
{
	float: left;
	padding: 12px 0px 18px 14px;
	text-align: left;
	width: 653px;
}
#content a, #content a:hover
{
	text-decoration: none;
}
form
{
	margin: 3px 0px 0px 0px;
	padding: 0;
}
form#contact
{
	height: 220px;
}
div.row1
{
	clear: both;
	width: 501px;
}
div.row1 span.formlabel
{
	float: left;
	text-align: left;
	width: 164px;
}
div.row1 span.forminput
{
	float: right;
	text-align: right;
}
#contact input, #contact textarea
{
	border: 1px solid;
	font-family: verdana, arial, sans-serif;
	font-size: 100%;
	margin: 2px;
	overflow: auto;
	width: 299px;
}
#contact input.submit
{
	cursor: pointer;
	height: 22px;
	margin: 8px 0px 0px 220px;
	width: 99px;
} CSS from URL: 

  
Code Layout:
Compression (code layout):
  Highest (no readability, smallest size) High (moderate readability, smaller size) Standard (balance between readability and size) Low (higher readability) Custom (enter below)

Custom template 
  
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 CSS2.1CSS2.0CSS1.0
 Output as file 
  
Messages
9Optimised number: Changed "0px" to "0"10Optimised number: Changed "0px" to "0"15Optimised number: Changed "0px" to "0"16Optimised number: Changed "0px" to "0"Optimised shorthand notation (padding): Changed "0 0 16px 0" to "0 0 16px"23Optimised font-weight: Changed "normal" to "400"25Optimised number: Changed "0px" to "0"Optimised shorthand notation (margin): Changed "0 0 12px 0" to "0 0 12px"26Optimised number: Changed "0px" to "0"Optimised shorthand notation (padding): Changed "16px 0 5px 0" to "16px 0 5px"33Optimised font-weight: Changed "normal" to "400"34Optimised number: Changed "0px" to "0"Optimised shorthand notation (margin): Changed "0 0 12px 0" to "0 0 12px"35Optimised number: Changed "0px" to "0"Optimised shorthand notation (padding): Changed "5px 0 5px 0" to "5px 0"46Optimised number: Changed "0px" to "0"47Optimised number: Changed "0px" to "0"48Optimised number: Changed "0px" to "0"57Optimised number: Changed "0px" to "0"Optimised shorthand notation (margin): Changed "20px 0 20px 0" to "20px 0"58Optimised number: Changed "0px" to "0"Optimised shorthand notation (padding): Changed "10px 20px 0 20px" to "10px 20px 0"62Optimised number: Changed "0px" to "0"63Optimised number: Changed "0px" to "0"68Optimised number: Changed "0px" to "0"Optimised shorthand notation (margin): Changed "0 0 6px 0" to "0 0 6px"69Optimised number: Changed "0px" to "0"73Optimised number: Changed "0px" to "0"74Optimised number: Changed "0px" to "0"78Optimised number: Changed "0px" to "0"Optimised shorthand notation (margin): Changed "0 0 11px 0" to "0 0 11px"79Optimised number: Changed "0px" to "0"94Optimised number: Changed "0px" to "0"98Optimised font-weight: Changed "normal" to "400"99Optimised number: Changed "0px" to "0"100Optimised number: Changed "0px" to "0"106Optimised number: Changed "0px" to "0"107Optimised number: Changed "0px" to "0"113Optimised number: Changed "0px" to "0"Optimised shorthand notation (padding): Changed "0 0 2px 0" to "0 0 2px"124Optimised number: Changed "0px" to "0"130Optimised number: Changed "0px" to "0"131Optimised number: Changed "0px" to "0"138Optimised font-weight: Changed "bold" to "700"140Optimised number: Changed "0px" to "0"Optimised shorthand notation (padding): Changed "6px 19px 0 19px" to "6px 19px 0"145Optimised number: Changed "0px" to "0"146Optimised number: Changed "0px" to "0"Optimised shorthand notation (padding): Changed "16px 16px 0 16px" to "16px 16px 0"166Optimised number: Changed "0px" to "0"Optimised shorthand notation (padding): Changed "6px 0 8px 0" to "6px 0 8px"194Optimised number: Changed "0px" to "0"Optimised shorthand notation (padding): Changed "6px 0 8px 0" to "6px 0 8px"216Optimised number: Changed "0px" to "0"226Optimised number: Changed "0px" to "0"Optimised shorthand notation (margin): Changed "3px 0 0 0" to "3px 0 0"262Optimised number: Changed "0px" to "0" 
Input: 3.745KB, Output: 2.941KB, Compression Ratio: 21.5% (-804 Bytes)
html {
height:100%;
}

body {
font-family:verdana, arial, sans-serif;
font-size:.68em;
margin:0;
padding:0;
}

p {
line-height:1.7em;
margin:0;
padding:0 0 16px;
}

h1 {
border-bottom:1px solid;
font-family:arial, sans-serif;
font-size:150%;
font-weight:400;
letter-spacing:.1em;
text-transform:uppercase;
margin:0 0 12px;
padding:16px 0 5px;
}

h2 {
font-family:arial, sans-serif;
font-size:125%;
font-weight:400;
text-transform:uppercase;
margin:0 0 12px;
padding:5px 0;
}

.sub {
font-size:55%;
letter-spacing:.1em;
padding-left:12px;
}

img {
border:0;
margin:0;
padding:0;
}

a {
outline:none;
}

blockquote {
border-left:8px solid;
margin:20px 0;
padding:10px 20px 0;
}

ul {
margin:2px 0 18px 16px;
padding:0;
}

ul li {
list-style-type:square;
margin:0 0 6px;
padding:0;
}

ol {
margin:8px 0 0 24px;
padding:0;
}

ol li {
margin:0 0 11px;
padding:0;
}

#logo,#menu,#site_content {
margin-left:auto;
margin-right:auto;
}

#logo {
border-top:5px solid;
height:95px;
width:880px;
}

#logo h1 {
border:0;
float:left;
font-family:century gothic, sans-serif;
font-size:600%;
font-weight:400;
letter-spacing:0;
text-transform:lowercase;
padding:0 0 0 14px;
}

#links {
font-size:80%;
text-align:right;
text-transform:uppercase;
margin:15px 9px 0 0;
padding:20px 10px 0 0;
}

#links a,#links a:hover {
text-decoration:none;
padding:0 0 2px;
}

#menu {
border-bottom:2px solid;
height:44px;
width:880px;
}

#menu ul {
margin:0 auto;
}

#menu li {
float:left;
list-style:none;
margin:0;
padding:0;
}

#menu li a {
border-right:2px solid;
display:block;
float:left;
font-weight:700;
height:38px;
text-decoration:none;
padding:6px 19px 0;
}

#colours {
height:0;
text-align:right;
padding:16px 16px 0;
}

#site_content {
border-bottom:1px solid;
border-left:1px solid;
border-right:1px solid;
overflow:hidden;
width:878px;
}

.photo_side_menu_item {
height:70px;
width:170px;
padding:6px 0 8px;
}

.photo_side_menu_item a {
float:left;
height:54px;
width:146px;
}

.web_side_menu_item {
height:115px;
width:155px;
padding:6px 0 8px;
}

.web_side_menu_item a {
float:left;
height:95px;
width:160px;
}

#content {
float:left;
text-align:left;
width:653px;
padding:12px 0 18px 14px;
}

#content a,#content a:hover {
text-decoration:none;
}

form {
margin:3px 0 0;
padding:0;
}

form#contact {
height:220px;
}

div.row1 {
clear:both;
width:501px;
}

div.row1 span.formlabel {
float:left;
text-align:left;
width:164px;
}

div.row1 span.forminput {
float:right;
text-align:right;
}

#contact input,#contact textarea {
border:1px solid;
font-family:verdana, arial, sans-serif;
font-size:100%;
overflow:auto;
width:299px;
margin:2px;
}

#contact input.submit {
cursor:pointer;
height:22px;
width:99px;
margin:8px 0 0 220px;
}

#photo_side_menu,#web_side_menu {
float:left;
width:170px;
padding:22px 3px 10px 19px;
}

.photo_side_menu_item img,.web_side_menu_item img {
display:block;
margin:2px;
}

.photo_info,.web_info {
float:left;
padding-top:4px;
}