Feature
Post

Category
Code


Best CSS Editors for Beginners

If you’re just getting started learning CSS, it might be daunting to see the number of CSS editing applications available out there. When I started learning CSS, I was still using only Notepad for all my coding, and just went back and forth from my browser (Netscape. Remember Netscape?) to my text file, referring mostly to a CSS for Beginners book that weighed about a ton. Today, because I’m still pretty much a control freak, I use Coda for nearly everything. But I recently helped someone new to CSS get started, and we looked through several CSS editors… the best of which I bring to you here:

ss-topstyle
TopStyle
This seems to be the most popular choice for Windows users, and it’s no wonder: TopStyle not only gets the job done, it does it pretty powerfully. It validates your CSS syntax, is constantly updated with new CSS definitions (important if you want to keep your design work up to date), and includes iWebKit, which allows you to create web apps for iPhones and iPod Touches. I also really like TopStyle’s “Style Reports”, which show you where CSS styles are used throughout your site (awesome when you’re working on someone else’s code). It isn’t free- a user license is $79.95- but if you want a serious CSS editor and you use Windows, this is one to look at.

ss-simplecss
Simple CSS
This one’s available for both Windows and Mac, and is, as you’ll see from it’s one-page online documentation, true to its name in that it is simple. It was also the easiest CSS editor we tried out, with a simple, easy to understand user interface. It’s also free! One to consider if you want a lightweight editor.


Stylizer
Skybound’s CSS editor is next, and this one’s certainly packed with features. It’s beautifully designed as well- and because of that, it might be even easier to use for beginners. It’s only for Windows, although they say a Mac version is in the works, and comes in Basic (free) and Ultimate ($79) versions, with the latter being a lot more powerful. If you’re on Windows, download the Basic version and see if you work well with its interface. I like this one so much that I signed up to be alerted when the Mac version comes out- because, as you know, I only use my PC for gaming, LOL.

ss-cssedit
CSSEdit
Finally, MacRabbit (who also make the lovely Espresso) offers this beauty of a CSS Editor for Mac users only. As you can see from the screenshot above, this one sports a very Apple-esque look- it won an Apple Design Award a few years ago, after all- and was what my CSS beginner friend finally decided upon. It’s easy to use, gets the job done and then some, and will only set you back by 29.95 Euros.

Do you use a CSS editor? Which do you recommend?


  1. By Notepad posted on August 10, 2009 at 7:07 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Use notepad and forget this “wast-of-time” editors. Wanna learn css?? Buy a book and code the old way….

  2. By Chris posted on August 12, 2009 at 2:24 am
    Want an avatar? Get a gravatar! • You can link to this comment

    The notepad trolls never cease to annoy me. I agree with the sentiment, but there are many good IDEs like Dreamweaver and Coda, and great text editors like Notepad++ that have syntax highlighting, auto-indentation, bracket checks, auto-completion, etc… and speed up development time.

    They’re all just tools. Use what suits your workflow best.

  3. By ZigPress posted on August 12, 2009 at 5:34 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Echo the above point – there’s no need to use a separate CSS editor and HTML editor (2 applications on the toolbar) when Notepad++, Eclipse etc exist.

    Take two bottles into the shower?…

  4. By Victoria Blount posted on August 12, 2009 at 8:27 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I agree to learn coding, get some tuition from a book or expert, a note pad and pen, and get stuck into having a go, with some guidance you will soon pick it up, rather than relying on a package to help you.

  5. By Jim Ryan posted on August 12, 2009 at 1:12 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    The above comments are accurate only if you’re looking at an external CSS editor as nothing more than another text editor in your toolbox. Stylizer is actually quite different from that though…and judging by these comments…clearly none of you (except maybe Chris) have seen it working.

  6. By Andy Ford posted on August 12, 2009 at 2:32 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I write HTML and CSS 8+ hours a day and I use TextMate for all my code/text editing needs except for CSS which is handled by CSSEdit. When on Windows, I use Notepad++ for everything.

    I haven’t tried every Mac editor out there, but CSSEdit is incredibly good and the MacRabbit guy(s) have just announced that they’ll be working on development of their software (Espresso and CSSEdit) full time again.

    It’s also worth noting to beginners that FireBug is a MUST HAVE Firefox plugin. must have. must.

  7. By Paul posted on August 12, 2009 at 4:41 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Sykbounds Stylizer increased my CSS programming Speed 5X, without loosing control or clear and valid code.

  8. By ◄IVAN► posted on August 16, 2009 at 12:23 am
    Want an avatar? Get a gravatar! • You can link to this comment

    very useful ^_^ thank you :)

  9. By thawan posted on August 18, 2009 at 8:48 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I use Style Master for several years now. Still like working with it.

  10. TrackbackRobot Building for Beginners | Echelon-UsMax Design - standards based web design, development and training » Some links for light reading (11/8/09)Best of the Week #78 | X Design BlogBest of the Week #78 - Programming BlogBest CSS Editors for Beginners | Devlounge