Paste CSS Code:

Highlighted Code:

/* ================= Supported layout/pattern: ================= */


/* -------- [1]. Compress CSS -------- */

/* a. Normal */
#foo{margin:0;padding:0} /* comment */
#foo:focus{outline:none}

/* b. Remove all comments */
#foo{margin:0;padding:0}
#foo:focus{outline:none}

/* c. Super compact */
#foo{margin:0;padding:0}#foo:focus{outline:none}

/* d. Keep indentation in `@query {}` */
#foo{margin:0;padding:0}#foo:focus{outline:none}
#foo{margin:0;padding:0}#foo:focus{outline:none}
@media screen and (max-width:400px){
  #foo{margin:0;padding:0}#foo:focus{outline:none}
  #foo{margin:0;padding:0}#foo:focus{outline:none}
}


/* -------- [2]. Beautify CSS code -------- */

/* a. Normal */
#foo {
  margin:0;
  padding:0;
}

#foo:focus {
  outline:none;
}

/* b. Replace double space indentation with a tab character or 4 spaces */
#tab-character {
	margin:0;
	padding:0;
}

#tab-character:focus {
	outline:none;
}

/* c. Add spacing before property : value ; */
#spacing {
  margin: 0;
  padding: 0;
}

#spacing:focus {
  outline: none;
}

/* d. Break multiple selectors */
#foo, #bar, #baz {
  margin:0;
padding:0;
}

#foo:focus, #bar:focus, #baz:focus {
  outline:none;
}

/* e. Inline single properties on the same line */
#inline {margin:0; padding:0}

/* f. Remove trailing semicolon */
#remove {
	margin:0;
	padding:0;
}

#remove:focus {
	outline:none;
}

/* g. Single line break */
#single {
	margin:0;
	padding:0;
}

#single:focus {
	outline:none;
}