raymond yu web masthead


Monday, July 13, 2020

Review of HexWeb CSS Edit
28th Feburary, 1998

[Please note that the figures, pictures referred to in this article are not included here to conserve server space.]

Cascading Style Sheets (CSS) enables you to control the look of the whole web site. Fonts, colours, character and paragraph spacing can be changed simply and easily. Well, this is supposed to be the promise of CSS. But so far the process of creating a style sheet is not so simple and easy. The syntax of CSS may not be hard to learn but this learning process still takes time; and worst thing is that without a dedicated CSS editor you have to write the code manually in a text editor. Not a fun exercise.

HexWeb CSS Edit is a long due tool that finally allows us to realise the full promise of cascading style sheet. It provides comprehensive CSS editing support.

HexWeb CSS Edit is available as a stand-alone version and as a Plug-In to the popular HTML editor BBEdit. The interface is identical in both versions. It can be downloaded and purchased directly online at http://www.hexmac.com/.

The Interface

The interface is visually appealing, logical and easy to use. Just work through the program once and its features will soon become second nature to you. On the rare occasion that you get stuck, CSS Edit comes with a comprehensive online HTML manual that is visually pleasing to use.

All the functions of CSS Edit are accessible through the floating palette (fig 1). It is amazing how much can be done through this little floating window. Pressing the “CSS Style” button would open up the Main Dialog where you can edit the properties and classes of the style sheet. (fig 2) You have a choice of two modes: the beginner and advance. The advance mode fully supports the inherited classes structure of the CSS1 standard. However, the beginner mode is recommended if you want maximum compatibility with other CSS editor (such as that in Macromedia Dreamweaver).

Defining and changing style sheets cannot be made easier. Through the property list of the main dialog you can view and edit the CSS properties. By simply navigating through the dialog box, clicking on the pop-up menu and entering values where necessary, all the style sheets properties can easily be changed. Once you are done, clicked OK, and the CSS codes in the main window are instantly updated. Simple.

Code generation is automatic, but, of course, if you want to fiddle with the code manually, you can also directly make changes to the codes.

Slick Graphical Representation

The interface of CSS Edit is more user-friendly that the corresponding style sheet interface found in Dreamweaver. The style sheet editor in Macromedia Dreamweaver requires you to fill in values for dozen or so properties in a series of dialog boxes. This can be very daunting for the novice, who often has no idea what each of the properties stood for. By contrast, CSS Edit makes use of graphical representation whenever possible. This gives a much better feel of what is happening.

In particular, the interface takes the guess work out of CSS Positioning (CSSP). CSSP is basically a style definition that specifies the exact position of the object on the web page. It gives you precise placement controlled that is essential for professional graphics design. For example, it allows you to overlap images or text to create interesting effects. (The <Layer> tag in Netscape also performs this trick without the use of CSS. The <Layer> tag is, however, not compatible with Internet Explorer.)

Using the visual interface you simply slide the box, which represents the object, to the position you what the object to appear on the mock up screen. (fig 3) The window has horizontal and vertical dimension (in pixels) clearly marked out. Once you have positioned and perhaps resized all the objects, clicked OK and the code is generated.

Support Different Browsers

Despite the presence of a CSS1 style sheet standard, different web browsers support this standard to a different extend. To make sure your web page will displayed the way you want it to, it is necessary to stick with the properties that are supported by the popular browsers. Often, this means only using properties supported by both Internet Explorer and Netscape.

Trying to keep track of which properties are supported by which browsers manually could become a nightmare, however. Luckily, CSS Edit provides a convenient way to do this. You can choose to display only those properties that are supported by Internet Explorer 4.0, Netscape 4.0, or both.


HexWeb CSS Edit can also import style sheets written by other editors. So it is possible to use CSS Edit to modify your current styles sheets definitions. Beware though, it will completely replace your existing code. Any comments you include with your original code will be gone. This is not usually a problem, but can be one where you inserted comments as to the style of the page or sites that you wish to retain.

HTML editor too

Not only does CSS Edit help you write style sheets, it is also a HTML editor. The way HTML tags can be added is insidiously simple. By selecting the three options on the left hand side (fig 1) the majority of HTML tags can be selected and applied to the text in the main window when the right-most button is clicked. And if the classes have been defined in the CSS, then the program will automatically generate the required class tag together with the HTML tags.

Even thought it can apply HTML tags the program, as the name suggests, is geared towards the creation of CSS and other style related tag. This is noticeable in the way the program distinguishes the CSS or style related tags on the main window. CSS tags appear in a smaller font and in grey colour compared to normal text. HTML tags are not distinguish from the plain text, except the <Font> tag which appears blue.

Because CSS Edit failed to distinguish HTML tags from other text, the program is not so suitable as a main HTML editor. For serious HTML editing BBEdit is still the best choice. In this regard the CSS Edit plug-in for BBEdit is far better than the stand alone version.

Buy or Not Buy?

The price at US$99 is reasonable for a piece of software that edit CSS and HTML. It is a handy software for those who want to use CSS features in their web sites but do not want, or do not have the time, to learn the details of the CSS language. If you do not have Macromedia Dreamweaver, a much more comprehensive (and expensive) web design tool (which include CSS support among its extensive array of features), HexWeb CSS Edit is certainly a worthwhile addition to your arsenal of web page design softwares. But then even if you do have Dreamweaver, CSS Edit can still offer a more superior interface in editing style sheets.

There is little question that style sheet will become the primary way to add favour to web pages. If you have not started to explore the possibility of using style sheets to enhance your web pages, or to simplify and streamline the design process, perhaps it is time to do so now with the availability of such convenient software.





[back to index]