Editing PHP and CSS files...what do I use?

[styner]

When I want to edit files like this, I open the file edit it, then save it. However when I save it its becomes jumbled and not in order like it was before I edited it.

For example this is partial coding inside a style.css file

Before:

/*

Theme Name: Metric Child Theme

Theme URL: http://www.studiopress.com/themes/metric

Description: Metric is a 2 or 3-column Widget-ready child theme created for the Genesis Framework.

Author: StudioPress

Author URI: http://www.studiopress.com

Version: 1.0.1



Template: genesis



The CSS, XHTML and design is released under GPL:

http://www.opensource.org/licenses/gpl-license.php

*/



body {

background: #002838 url(images/bg.png) repeat-x;

color: #444444;

font-size: 12px;

font-family: Arial, Tahoma, Verdana;

margin: 0 auto 0;

padding: 0;

line-height: 20px;

}



/***** Hyperlinks ********************/
a, a:visited {

color: #0067A2;
text-decoration: none;
}
a:hover {

color: #7CA513;
text-decoration: none;
}

a img {

border: none;

After:

/*
Theme Name: Metric Child Theme Theme URL: http://www.studiopress.com/themes/metric Description: Metric is a 2 or 3-column Widget-ready child theme created for the Genesis Framework. Author: StudioPress Author URI: http://www.studiopress.com Version: 1.0.1 Template: genesis The CSS, XHTML and design is released under GPL: http://www.opensource.org/licenses/g...ense.php*/body { background: #002838 url(images/bg.png) repeat-x; color: #444444; font-size: 12px; font-family: Arial, Tahoma, Verdana; margin: 0 auto 0; padding: 0; line-height: 20px; } /***** Hyperlinks ********************/a, a:visited { color: #0067A2; text-decoration: none; } a:hover { color: #7CA513; text-decoration: none; } a img { border: none; } a:focus, a:hover, a:active { outline: none; }/***** Wrap ********************/.home #wrap, .home-page #wrap, .blog #wrap { background: url(images/wrap.png) top center no-repeat; margin: 0 auto 0; padding: 0; } #wrap { background: #F7F7F7 url(images/wrap-bg.png) repeat-x; margin: 0 auto 0; padding: 0;

I use a simple text editor to do this. Am I doing something wrong or should I use some sort of program to edit these files to keep them in order?