Quickly Find and Edit CSS Elements

This article could be one sentence long: Use Notepad as a free css editor.

CSS files are just text files. Any text editor will do the job. However, once CSS files begin to get complicated or get large managing and editing them becomes more difficult if using a simple text editor.

Enter Top Style Lite. Top Style Lite provides a few extra bells and whistles that make editing CSS files easier. Let me run down the list of main features.

The main editing screen holds two advantages over Notepad or the run of the mill text editor. First, elements of the CSS file are color coded. It is visually easier to pick out element names or number values. Second, there is a gutter which contains the line number. I love line numbers. While they are not as important in CSS files as in other kinds of code, they still provide a very easy reference.

The right side of the screen contains two tabs: Properties and Selectors. The Properties tab lets beginners enter values into the various element types and Top Style Lite will enter the information for you on the main editing screen. This is a handy learning tool. More advanced users will skip this tab.

The Selector tab is the main reason I like to use Top Style Lite. The Selector Tab organizes the Elements, Classes and ID’s found in the CSS file. Every element, class or id is presented in a tree format. Within each category every selector is listed in alphabetical order. Need to change the property of a class and it is buried somewhere in the black and white morass of Notepad? EASILY find it on the selector tab, make your change and be on your way.

No, this is not quantum physics nor will this tool change the world. However, it is the simple things in life that make a difference. In your web development work, Top Style Lite will make the managing and editing of your CSS file less painful. Visit my blog post for more detailed information on Top Style Lite.