How to beautify your CSS with Notepad++

This tutorial will show you how to beautify or clean up your CSS so it is easy to read and understand.

We will be turning this:

Code: [Select]

#first_thing { float: left; background-color: #ffffff; width: 100%; }
#first_thing .class { height: 5px; list-style: none; display: inline; }



.help_topic_div {
display:inline-block;
color: #000000; }
.header_bar_two
{
clear:both;
border:none;
background:transparent url(../images/bg-scrollbar-end.png) no-repeat 0 100%;
height:100%;
width:13px;
position:relative;
padding: 0 1px;
}

into this:

Code: [Select]


#first_thing 
{
	float: left;
	background-color: #fff;
	width: 100%;
}

#first_thing .class 
{
	height: 5px;
	list-style: none;
	display: inline;
}

.help_topic_div 
{
	display: inline-block;
	color: #000;
}

.header_bar_two 
{
	clear: both;
	border: none;
	background: transparent url(../images/bg-scrollbar-end.png) no-repeat 0 100%;
	height: 100%;
	width: 13px;
	position: relative;
	padding: 0 1px;
}

INSTRUCTIONS::
1. Copy your css to your clipboard. We will be using the code block below...
- To select all of it open it up in any text editor, CTR+A, and then CTR+C or right click copy.

Code: [Select]

#first_thing { float: left; background-color: #ffffff; width: 100%; }
#first_thing .class { height: 5px; list-style: none; display: inline; }



.help_topic_div {
display:inline-block;
color: #000000; }
.header_bar_two
{
clear:both;
border:none;
background:transparent url(../images/bg-scrollbar-end.png) no-repeat 0 100%;
height:100%;
width:13px;
position:relative;
padding: 0 1px;
}

2. Paste your code into the output field on this website: http://floele.flyspray.org/csstidy/css_optimiser.php?lang=en

3. Check the Output as file checkbox (this is for easy copying later)

4. Leave the rest of the settings and press the Proceed CSS button

5. Scroll down to the output box and click Download

6. On the page that just opened press CTR+A to select all and copy (CTR+C or right-click copy)

7. Paste it in a new Notepad++ document. You should now have code formatted like so:

Code: [Select]

#first_thing {
float:left;
background-color:#fff;
width:100%;
}

#first_thing .class {
height:5px;
list-style:none;
display:inline;
}

.help_topic_div {
display:inline-block;
color:#000;
}

.header_bar_two {
clear:both;
border:none;
background:transparent url(../images/bg-scrollbar-end.png) no-repeat 0 100%;
height:100%;
width:13px;
position:relative;
padding:0 1px;
}

8. NOTE: If you want your brackets how they currently are, skip to Step 13
Now we need to get the opening brackets ({) on the next line.
Press CTR+H to get up the Find and Replace menu

9. Check the Extended check box in the the Search mode area.

10. Enter in "{" in the Find what field.

11. Enter "\n{" in the Replace with field.

12. Press Replace All

NOTE:: If you followed the steps all so far then you should have code formated as so:

Code: [Select]

#first_thing 
{
float:left;
background-color:#fff;
width:100%;
}

#first_thing .class 
{
height:5px;
list-style:none;
display:inline;
}

.help_topic_div 
{
display:inline-block;
color:#000;
}

.header_bar_two 
{
clear:both;
border:none;
background:transparent url(../images/bg-scrollbar-end.png) no-repeat 0 100%;
height:100%;
width:13px;
position:relative;
padding:0 1px;
}

13. Now it is time to indent all of the css declarations.
Press CTR+H to get up the Find and Replace menu

14. Check the Regular Expression check box in the the Search mode area.

15. Enter in "(.*);" in the Find what field.

16. Enter "\t\1;" in the Replace with field.

17. Press Replace All

Here is the result::

Code: [Select]

#first_thing 
{
	float:left;
	background-color:#fff;
	width:100%;
}

#first_thing .class 
{
	height:5px;
	list-style:none;
	display:inline;
}

.help_topic_div 
{
	display:inline-block;
	color:#000;
}

.header_bar_two 
{
	clear:both;
	border:none;
	background:transparent url(../images/bg-scrollbar-end.png) no-repeat 0 100%;
	height:100%;
	width:13px;
	position:relative;
	padding:0 1px;
}

18. All we have left now is to space the property from the value!
Get up the Find and Replace menu CTR+H

19. Enter in ":" in the Find what field.

20. Enter ": " in the Replace with field.

21. Press Replace All

Code: [Select]

http://img546.imageshack.us/img546/2683/spacingpropertyandvalue.png
Here is your final nice

format:

Code: [Select]

#first_thing 
{
	float: left;
	background-color: #fff;
	width: 100%;
}

#first_thing .class 
{
	height: 5px;
	list-style: none;
	display: inline;
}

.help_topic_div 
{
	display: inline-block;
	color: #000;
}

.header_bar_two 
{
	clear: both;
	border: none;
	background: transparent url(../images/bg-scrollbar-end.png) no-repeat 0 100%;
	height: 100%;
	width: 13px;
	position: relative;
	padding: 0 1px;
}