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):
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.
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:
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.
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.
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 :-)