Master of style

Hopefully, last month’s column will have whetted your appetite for CSS-based design, so that you’re all now converts, have abandoned your table layouts and deleted all your transparent spacer GIFs. Actually, we know you probably haven’t because, although we’ve told you the theory and shown you some simple CSS design examples, we haven’t spoken about any of the tools available to help you build a table-less page.

Master of style

As you’ll have seen last month, a style sheet is simply a text file containing various elements that apply styling characteristics to certain parts of your HTML mark-up. Now, if you’re feeling perverse, you could edit your CSS files using good old Notepad (sarcastically referred to as ‘Visual Notepad’ in certain circles); after all, Notepad is a perfectly usable text editor. It would be a lot better, though, to find a tool that lends more of a helping hand with CSS, and there are some great ones out there to help you design your style sheets. An unscientific straw poll on Cix revealed that TopStyle is one of the more popular packages, probably because TopStyle Lite – a free CSS editor – comes bundled with Macromedia’s HomeSite, which in turn comes bundled with the popular Dreamweaver website editor. Their family tree gets a bit complicated, but it means there are loads of people out there who have discovered they’ve already installed TopStyle Lite, so have had a quick play and then started to use it for real.

But for those TopStyle aficionados who’ve never tried any other CSS editor, allow us to point you in the direction of Style Master (www.westciv.com), which in our opinion beats TopStyle hands down – for starters, its tutorial is excellent. Style Master comes from an Australian company called Western Civilization, which for some time has been producing brilliant CSS and standards-based tutorials. If you follow these courses using Style Master as your editor, you’ll find that both CSS and the editor start to make sense together. The more you learn about CSS, the more you’ll come to appreciate how Style Master has been written and why it does things the way it does. And because Western Civilization is so fanatical about CSS and standards, you can be reasonably sure Style Master is churning out properly compliant code.

We particularly like the way Style Master presents its options, logically grouping what you might like to do with any particular selector. For example, if you select the Text Style Editor, all the appropriate properties are there; if you were using TopStyle Lite, you’d be hunting through all of the properties, trying to find those appropriate to text elements. Style Master isn’t a wysiwyg editor – and quite rightly so, as wysiwyg is such a misnomer in the world of websites with a multitude of semi-compatible browsers – but it does have a fantastic preview facility so you can see what you’re doing on the actual page where you’re working without having to keep saving your work and previewing it outside the editor. Although it has built-in editing tools, if you prefer some occasional hand coding Style Master will immediately highlight any mistakes so you can’t fail to notice them.

But the real killer function in Style Master, which currently makes it the best CSS editor on the market, is its Design X-Ray feature. The one major downside to CSS is that because your design is pulled so far away from the HTML page, it can sometimes be difficult to work out which bit of CSS affects which HTML elements, especially when it comes to specificity. With Style Master’s X-Ray feature, you can simply click on any part of your preview page and it will show you at a glance all of the statements in the current style sheet that select that element. Then, if you double-click the element, you’ll find the most specific CSS statement selected, ready for editing. It makes CSS editing a doddle.

Disclaimer: Some pages on this site may include an affiliate link. This does not effect our editorial in any way.

Todays Highlights
How to See Google Search History
how to download photos from google photos