Pinterest Stumbleupon Whatsapp

editing cssWebsites are wondrous tools which convey all sorts of information and ideas. They have evolved quite a lot in merely 10 to 15 years, and they are now expected to be top-notch and beautifully designed. Of course, there are technologies that help us achieve this – hence the evolution – with CSS being the one mainly responsible for design and other aesthetic aspects of your site.

CSS 5 Baby Steps To Learning CSS & Becoming A Kick-Ass CSS Sorcerer 5 Baby Steps To Learning CSS & Becoming A Kick-Ass CSS Sorcerer CSS is the single most important change webpages have seen in the last decade, and it paved the way for the separation of style and content. In the modern way, XHTML defines the semantic structure... Read More , or Cascading Style Sheets, is simply a markup language – like HTML – except it only holds properties for tags. For example, if you use <p> tags for your text, you can set all sorts of attributes to <p> tags within CSS and it’ll be applied to all those areas. However, where can you test out all your CSS ideas?

Mozilla Thimble

editing css

Mozilla Thimble is a relatively new project which allows you to test instant changes to the code of a page. The screen is split between the code and a preview of what the site would look like with the current code. Any changes you make to the code will be instantly reflected in the preview.

Thimble is mainly designed to test webpages and their HTML code, but you can just as well test your CSS code as well by placing it in within the <head> tags.

The advantage of using Thimble is that you can see the changes immediately and how the CSS relates to the HTML of the page.



editing css files

Firebug is another great tool which has been recommended quite often here on MakeUseOf. It is a web development extension which, like Thimble, can show you changes made to code instantly. The difference between Thimble and Firebug is that Thimble is restricted to whatever code you put into the left-hand box, but with Firebug, you can change the code of any live site, even if the site doesn’t belong to you.

The changes aren’t permanent and wouldn’t transfer to the web server so that all changes are seen by everyone else, but Firebug lets you locally change the code to try and achieve different results. You can then take your findings within Firebug and apply them to your actual code.


editing css files

Bluefish is a desktop text editor application which specializes in programming and web development. It isn’t as visually exciting as say Thimble or Firebug, but if you just need to be able to write the code in a nice editor, Bluefish is the one to write it in.

It’s not like other text editors as it includes its own powerful search features, unlimited undo/redo, can open thousands of files at once, is cross platform, and plenty more.

Aptana Studio

editing css

Aptana Studio isn’t just about your code-editing experience, but it goes a lot farther than that. The program can be installed as standalone software or as an Eclipse plugin, so you have options as to how you’d like to use it. It really tries to help you out with your code decisions by displaying things such as which browsers support which elements.

It also helps with the whole experience by making it easier to push your projects onto a git server for easier version control, a built-in terminal and debugger, and customization options. Like everything else on this list, it is cross-platform.


As you can see, you have some very nice options when it comes to your CSS code. It really depends on which setup you’d prefer or require to have the most efficient workflow or the most features. All of these programs or services solve editing CSS code in their own way, but they are all stellar in what they do. If you’re not sure off-the-bat which one might be for you, try them all! If you’d like, you can also check out our manual on how the Internet works to learn about other languages for the Web!

What do you use to edit your CSS code? Do you have any other recommendations? Let us know in the comments!

Image Credit: 3D Colorful Background via Shutterstock

Leave a Reply

Your email address will not be published. Required fields are marked *