4 Free and Excellent Tools for Editing CSS Code

Danny Stieben 19-07-2012

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 and 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 How the Internet Works We can now access the Internet from our home computers, office, laptops and our phones. But many people still aren't entirely sure what the Internet is and how it really works. Read More 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


Related topics: HTML, HTML5, Programming, Web Design, Web Development, Webmaster Tools, WYSIWYG Editors.

Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

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

  1. Stas Ustimenko
    August 13, 2012 at 12:25 pm

    I suggest to look at the following free CSS/HTML/PHP editor also:
    Codelobster PHP Edition -

    • Danny Stieben
      August 14, 2012 at 8:30 am

      Thanks for the link! :)

  2. Deric
    July 26, 2012 at 7:33 am

    Notepad++ rocks the crap out of everything I've tried... unless waiting for Eclipse to do God knows what is your thing.

    • Danny Stieben
      July 30, 2012 at 1:38 am

      Doh! Should've thought about adding Notepad++, even though it's not available under Linux as far as I know.

  3. Dan Whitcomb
    July 26, 2012 at 3:59 am

    This is great! I've been looking for a good alternative for dreamweaver. I don't want to spend the cash on that one.

  4. Fayz
    July 25, 2012 at 3:26 pm

    An informative read. I've looking for a way to edit CSS codes for sometime now. Thanks to you I can! c:

  5. iniyan
    July 21, 2012 at 2:00 am

    I use bluefish, firebug and web developer tool (firefox and chrome extension.)

    You should have mention about web developer tool...

    In web developer tool also the screen is split as code and preview. You can see the changes lively.

    • Danny Stieben
      August 14, 2012 at 8:29 am

      I'll try to remember it for next time!

  6. JALi
    July 20, 2012 at 10:38 pm


  7. Francisco de Gusmão
    July 20, 2012 at 10:17 am

    Thank you very much! I was looking for some of these!

  8. ferdinan Sitohang
    July 20, 2012 at 2:15 am

    All the tools which are mention in this article, i had ever use bluefish, but my final choice end with RJText Editor. The best one for a free version I think.

  9. Laga Mahesa
    July 19, 2012 at 10:29 pm

    Opera Dragonfly. Built in, does a helluva lot more than just CSS.

    • Danny Stieben
      July 19, 2012 at 10:38 pm

      I've heard a lot of good things about it, but I didn't include it because of the relatively low number of Opera users. I might be able to talk about it separately in an article sometime. :)

    • Richard Buettner
      July 21, 2012 at 12:02 am

      It's what I use.

  10. joefitness
    July 19, 2012 at 8:23 pm

    I love using Firebug!

  11. Joe Johaneman
    July 19, 2012 at 7:47 pm

    I generally write all of my CSS in LESS and the compile to CSS with

    If you're not familiar with LESS, it's a a superset of CSS that allows you to use variables and other features. It makes writing CSS pretty easy (and you might want to do an article on it.) You can use LESS code directly in your web page with less.js, but I usually precompile because I find the javascript solution to be much slower.

    • Danny Stieben
      July 19, 2012 at 10:35 pm

      I don't usually dabble a whole lot in web development, so I haven't heard of LESS. I'm not sure if it's simply not well known or if I'm just out of the loop.

      I'll definitely take a look at it! Seems pretty interesting.

  12. Braxton Bragg
    July 19, 2012 at 6:58 pm

    BestVendor has a few other alternatives listed on their site, as well as other text editors useful for different programming languages. [Broken Link Removed]

    • Danny Stieben
      July 19, 2012 at 10:30 pm

      Thanks Braxton!