CSSEdit from MacRabbit
is a specialized editor for working with the cascading style sheet (CSS) files which
are an essential part of modern, standards-compliant website creation. You can download
a demo version from www.macrabbit.com and use it for files of up
to 2500 characters. The full version costs $29.95.
After installing CSSEdit using my admin account and entering the license code, I
was able to use CSSEdit on my user account. The only issue was having to re-enter
the license code on my user account.
Much has been written about the benefits of CSS. Simply put, CSS allows you to separate
the content of your web pages from the presentation: you define the content in HTML
(or XHTML) and the presentation in CSS. The hallmark of this way of working is an
absence of HTML <font> tags and multiply nested layout tables.
If you use Realmac Software's Rapidweaver, you are already doing fully standards
compliant, high quality CSS based design - whether you know it or not. You may not
care that your Rapidweaver buddies can point to the new website that you're so proud
of and instantly name the Rapidweaver template that you used. But if you do care
to make Rapidweaver templates of your own, you need to learn to change the underlying
CSS files. Once you start down this path, you will rapidly discover that understanding
one CSS style may be easy, but understanding how several CSS styles work together
in multiple files is mind-boggling.
When you open CSSEdit for the first time, you will see the two empty windows - one
for CSS, the other for previewing the HTML. The preview window contains a graphic
indicating that you should drag an HTML file into it. Doing so will indeed display
the HTML file, but what next?
CSSEdit Preview window
At first glance, and without referring to any documentation, I was not sure what
to do. If the HTML file contains links to style files, CSSEdit did not automatically
open them in the CSS window. If the HTML file contains inline styles, CSSEdit did
not display them in the CSS window. If you start typing CSS into the CSS window,
nothing happened to the preview.
This is somewhat baffling initially, but once you understand how the CSS and HTML
files are connected, it makes sense. The CSS file must be saved with a filename,
and then that filename must be linked in the HTML file - something that CSSEdit can
do for you in an instant. Once this is set up, changes in the CSS will instantly
be displayed in the preview window. So, any confusion here is just due to CSSEdit
getting ahead of the first-time user.
The CSS window is divided into left and right panes. The left pane shows the selector
(tag, class or ID) for each CSS style in the file on a single line. This is already
a huge help in finding your way around the file. Here you can create new styles,
delete unwanted styles and also reorder styles by simply dragging them up and down.
The CSS Window
Probably the biggest benefit for the seasoned CSS user is that you can create groups
of CSS styles, expand and collapse the groups, and nest them. The grouping is defined
in the CSS file using specially formatted comments that you can easily read and enter
yourself. You can also edit your CSS file manually using any other text editor, and
then go back to using CSSEdit without issue.
If you can't find a particular style, entering a few characters from its name in
the filter field instantly cuts down the list of styles to show only those names
which contain the filter characters. For example, entering "oo" shows all
the styles with "footer" in the name.
CSSEdit helps you get a mental grip on one big CSS file. Further, when you are working
with multiple CSS files, you can open each in its own window and compare them side
by side. In Rapidweaver templates, for example, you will find all the color definitions
are split out into separate CSS files so that Rapidweaver can switch the color palette
for your website by switching which CSS file is used for the colors. A similar strategy
is used for page width, sidebar position and menu styles.
CSSEdit's right pane can show either the text view of the file or one of seven inspector
tabs which allow you to define an individual style using forms and buttons. Any change
you make in the text view shows in the inspector view and vice versa. Both the text
view and the inspector views of the style are beneficial. The inspectors allow you
to create correct CSS without memorizing the syntax, whereas the text view allows
you to see the whole of a style at one time without scanning back and forwards between
the seven tabs.
If that was all CSSEdit did, it would already be enormously useful. However it has
a few more tricks.
- show individual styles
in the preview drawer
- drag an HTML file
to the preview window and see it update instantly when you change the CSS;
- preview emulates
a variety of browsers;
- copy selected styles
to the clipboard between HTML <style> tags for insertion into an HTML file;
- export CSS to existing
HTML files or to a new HTML file;
- extract the CSS styles
from a website anywhere on the internet by supplying its URL.
The only minor disappointment with the HTML file creation is that CSSEdit doesn't
supply the pretty much impossible-to-remember DOCTYPE syntax for the top of your
HTML or XHTML file, so you will need to find another source to copy and paste it
CSSEdit is an
essential tool for anyone working with cascading style sheets. It allows you to work
easily with large and complex CSS files by displaying the styles in collapsible groups.
It provides all the CSS syntax so that you don't have to remember it, but still allows
you to view and enter the CSS text as much or as little as you like. CSSEdit is also
great companion tool to Rapidweaver for the designer who wants to create unique templates.
Once you have experienced CSSEdit you will regret all the dark days you spent wading
through your CSS files without it.
- view, navigate and
organize large CSS files;
- point and click definition
for CSS styles;
- compare CSS files
side by side;
- live preview as you
- export to HTML.
- Doesn't supply DOCTYPEs
- Preview is confusing
for the first time user.
4 1/2 out of 5 Mice