CSS Edit – a coder’s joy :)

If you are lucky enough to start learning webdesign at the moment – ideally on a mac – then you do have the perfect tools at your fingertips. The ‘Web Developer’ toolbar (Firefox extension by Chris Pederick) alone can be a great help to learning about page elements, their positioning and properties.

One of the best applications out there however must be MacRabbit’s CSS Edit. Unfortunately for mac only – this code editor can make learning CSS a little bit easier. Luckily there is now an alternative for you PC users – Rapid CSS.
I will focus on CSS Edit here as it’s one of my favourite apps ;) CSS Edit colour codes and tidies up your code – it allows instant preview of applied rules – and even enables you to override the CSS of any given site.

To get you started a quick introduction to its features…

Let’s assume we have the following HTML file at hand, ready to be styled. To open the file as preview in CSS Edit – simply launch the application. By default you will see an empty CSS file opened automatically. Click the ‘Preview’ button at the top to add your HTML file to the preview window (see screenshot below):
screenshot of HTML code screenshot of HTML code screenshot of HTML code

Ideally you should set yourself up to view both the code and the preview windows together, next to each other or within easy access. Depending on the monitor size of the computer you are working on, of course – this can be quite tricky. But keeping both windows nex to each other and easy to access will greatly speed up your workflow.
screenshot of reset reloaded CSS applied
This screenshot shows both views: the CSS code to the left (including only Eric Meyer’s ‘reset reloaded’ so far) and the preview on the right.

As you will see – adding new rules to your CSS file now will show you an immediate preview in thew preview window:
screenshot of code editing window
the instant preview :) one of the most intuitive parts of your learning process.

The coding window in CSS Edit has several differet views and functions – allowing you to use a visual editor which lists properties for you to edit, or to work with the source code alone – and even combine the two. Though the visual editor can be useful while you are learning – it can also be a distraction from the code itself. I would recommend to use the course view alone and focus on writing your CSS rules yourself. You will get a better understanding and become much more confident in your coding if you write it all yourself – CSS Edit does work with you, suggesting and completing your code as you type.
screenshot of source view in the code editing windowscreenshot of code suggestion
screenshot of source view with validation popup, indicating error
It will be important to ensure that your code is correct and valid – so to help you troubleshoot your css – CSS Edit’s validation function will give pointers to your errors.

One of the most powerful features is yet to come – the X-ray and the inspector. These 2 buttons change the preview window and allow you to put your code under the magnifying glass, showing you in detail which effect your CSS rules have on your layout as well as display clearly any page element’s place in the hierarchy of your HTML code.
screenshot of preview window using X-ray and Inspector functions
The X-ray function can be useful in many ways – do take your time to explore. You can select the page elements by clicking within the preview itself – or clicking on an element’s selector within the list shown and see it highlighted within the preview.

I hope this has given you a brief look into the brilliant functions which CSS Edit gives you – the perfect learning tool which has become my favourite CSS editor very soon after my first test run. Reading this post through now – I noticed I might sound a bit like a sales person here, sorry if I did…. I hope you know by now that I do not write which I don’t believe. So if it sounded like a sales pitch – then it’s a compliment to the development team behind this application :-)

29/09/2008 blog,handcoding

6 Responses to “CSS Edit – a coder’s joy :)”

  1. Gravatar sat says:

    Hi Prisca!!

  2. Gravatar prisca says:

    Hey Sat :)
    thanks for commenting – and don’t be shy ;) feel free to ask some questions here if you get stuck with CSSEdit ;)

  3. Gravatar David Hucklesby says:

    Interesting. I bought my first Mac in April, and tried out CSS edit, but rejected it. I am a klutz with a mouse, and it seemed to require a lot of menu interaction. From what you describe, I am wrong.

    Will definitely give it another tryout.

    Thanks for this.

  4. Gravatar prisca says:

    David :)
    anytime – glad you liked the post ;)

    I think it’s all a matter of how you set yourself up :) initially I was a little all over the place – once you know which features you use and how – coding in CSSEdit becomes breeze and a joy to work with, in my humble opinion anyway :)

  5. Gravatar Gaia says:

    I thought I’d comment on the blog-post on Css Edit as I find it infinetly useful and I was so pleased with it that I actually happily paid for it. (this is something that is very hard to do, that is, part with money that happpily).

  6. Gravatar prisca says:

    Gaia :-) glad to hear you’re loving CSSEdit – and yes, it is one of those purchases, I agree ;)

graphiceyedea prisca schmarsow – portfolio