It was exciting news when Westciv <http://www.westciv.com/> announced the recent release of StyleMaster 3 for Mac OS X. The Windows world has had most of the good Cascading Style Sheet editors, but with the release of this modestly priced piece of software, Mac OS X users can also enjoy the convenience of a first class style sheet program. You can download a 30-day trial version at http://www.westciv.com/style_master/download/, or buy a copy for 49.95.
If you would like “to try this at home” you can follow along with how I tested out the various features of the program. I chose a two-column layout that uses no tables, but rather employs CSS positioning. The layout comes from the Real World Style Web site: http://www.realworldstyle.com/2col.html. There are other sample layouts, such as a three-column table-free layout, that you are encouraged to download and deconstruct/modify for your own use.
These layouts use an XHTML transitional DocType, and you will see empty tags (such as <br />) that use a space before the closing slash to maintain backwards compatibility with earlier browsers. Please refer to my Web Standards article, also in this edition of the Pi Journal, to learn about the benefits of XHMTL, CSS, and accessibility.
If you prefer, you can just type in the following code in your favorite plain text editor. You will see barebones markup that is mostly div tags with ID’s. We will enhance this spare structure with a StyleMaster 3 stylesheet. This is true separation of presentation and content, a lofty goal in Web design for the 21st century. Note that we have header, nav, main content, and footer divisions in our markup. There are a couple of nested divisions to provide an area to clear a float. You’re not really sure what I am talking about? StyleMaster 3 provides ubiquitous guidance with an “Info” panel that details every CSS component.
<
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head> <title>StyleMaster</title>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link
href="stylemaster.css" rel="stylesheet" type="text/css" />
< /head>
< body>
<
div id="header"><h1>Your banner message</h1></div>
<
div id="nav">
<p><a href=#>Visit Swanilda</a></p>
<p><a href="#">Visit WAP</a></p>
<p><a href="#">Visit the SPCA</a></p>
<p>Thank you for taking the time to visit our site. We hope you'll come
back soon to check out the latest new tutorials.</p>
<p>We hope you have enjoyed learning to use StyleMaster 3 to create a two
column layout without tables.</p>
<
div id="spacer"> </div></div>
<
div id="content">
<
p>Or bends with the remover to remove. Love's not time's fool, though rosy
lips and cheeks which alters when it alteration finds, it is the star to every
wand'ring bark. If this be error and upon me proved, love alters not with his
brief hours and weeks, I never writ, nor no man ever loved. But bears it out
even to the edge of doom. Whose worth's unknown, although his height be taken.</p>
<
div id="spacer"> </div>
< /div>
<
div id="footer">All rights reserved Swanilda's Studio<br />
Copyright 2003
< /div>
< /body>
< /html>
Also for your reference, here is what the style sheet will look like after we create it in StyleMaster 3:
body, html {margin: 0px;
padding: 0px;
background-color: #ffdf96;
color: #1610ba; }
#nav {margin-left: -1px;
padding: 10px;
width: 220px;
float: left; }
#content {padding: 10px;
margin-left: 230px;
border-left: 1px #006 solid; }
#header {background-color: #ffdf96;
color: #006;
margin-bottom: 0px;
margin-left: 10px;
border-bottom: 1px #006 solid;
margin-top: 10px; }
.spacer {clear: both; }
p {padding: 0px;
margin-top: 0px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 12px; }
#footer {background-color: #ffdf96;
color: #006;
font-size: 10px;
border-top: 1px #006 solid;
text-align: center;
clear: both;
padding-top: 10px; }
a:link, a:visited, a:active {
color: #cc0000;
background-color: #ffdf96;font-weight: bold;}
Here are before and after pictures of our document. The before image shows our spare structure. The after image reveals what the page will look like after we apply the style sheet.
Before
After
We’re going to want to preview our XHTML page in the browser to see how the CSS gives it shape, so the first thing to do upon launching StyleMaster is to add our markup document to the “Preview” toolbar.
Click the add button next to the default StyleMaster document. Navigate to your XHTML markup document. Now whenever you choose the globe icon at the left of the preview toolbar, the browser(s) you choose in the StyleMaster preview options will launch to display the effect of your CSS rules.
Let’s add our first rule. Go to the statement menu, and choose New>Group Selector.
We are going to take care of two elements with one rule as they both use the same properties. When the group dialog box appears, choose the tab for 4.01. First select the body element from the list on the left, and then add it. Next choose the html element, and then add it as well. A group selector with empty curly brackets now appears in your style sheet.
At the top of the StyleMaster document, you will see icons that represent each of the panels that contain the various kinds of properties you will use in your CSS rules. Clicking on the 4th icon from the right will give us the margin and padding panel. Enter a zero for “all” in both the padding and margin categories. Doing this with both padding and margins, in both the html and body elements, will pretty much take care of the vagaries of various browsers.
If you want to replicate the style sheet I gave you earlier in the review/tutorial, also find the type and background panels so you can add those properties to your group selector as well.
To replicate the other rules in the style sheet, create new statements for the ID’s in your div tags. Choose New>ID Selector. When the dialog box appears, type “header” in the second field. (We could choose div in the first field, but Netscape 4 will choke, as it does not offer full ID selector support.) When your selectors appear in the style sheet, you can choose the relevant panels to add the properties you want. After you finish with the header ID, create the content, nav, and footer ID’s.
How did I know that Netscape 4 offers only partial support for ID selectors? I am, of course, very smart. Ahem. Actually, if I am not sure about support of certain properties, I can use what I consider probably the most useful features of the program, the “info panel” and the “feature compatibility panel.” To use the info panel, just put your cursor in one of the rules about which you are curious, and then choose the “i” icon to access the info panel. All kinds of information about the selector will appear. If you want to know which browsers support the property, you can go to Help>Get Feature Compatibility. You can also choose the exclamation point icon at the top of the StyleMaster document. Additionally, icons for most of the commonly, and not so commonly, used browsers are at the bottom of the style sheet window. If you see an “exclamation” icon next to any browser, there is a problem that needs to be investigated.
Let’s get back to formatting the remaining styles. To format your paragraph style, choose New>Type Selector, and select the paragraph tag from the list of elements. You can add the link states individually (remember that the proper order is link, visited, hover, and active when using every state), or all at once by choosing Statement>New>All Link States. Keep in mind that Netscape 4 does not support the hover state, though it will merely ignore the rule.
If you prefer to type your rules yourself, be sure to enable the code auto-complete. You’ll get a window of hints that will attempt to read your mind as to which elements or properties you are trying to type. I find that this preference never seems to stick, so you may have to return to your preferences often to check it again.
After you finish creating the styles for all of the components of your markup, don’t forget to actually attach the style sheet to the document. In the menu, choose File>Link Page. A standard navigation dialog box will appear. You may also notice the choice for “Link Page Advanced” that allows you to link other media types such as print and aural.
There are many other nifty features, but I will let you discover some of them for yourself when you download the demo. Just to arouse your curiosity, I will note a couple of my favorites. One is the wizard for folks who would prefer to create a look for the page without getting involved with complicated CSS rules. The wizard asks a series of questions as you click through simple dialog boxes.
The other feature that most people will find useful is the “Preview Current Rule” panel. As you choose properties for your selectors, this panel will present a visual representation of what you’ll see in your document when you open it in the browser.
If you have used the style sheet features in Dreamweaver or GoLive, you will find StyleMaster far superior, both for the breadth of complex CSS support it offers, as well as for the plethora of choices for customizing the way you prefer to work. Using the program was largely a successful experience. It did crash once while I was attempting to return to it after looking at my document in Netscape 4 via Classic.
The bottom line is that if you do much in the way of CSS authoring, you’ll want to try StyleMaster 3. Give the demo a whirl, and if you like it, at only 49.95 a pop, you can’t go wrong.
Western Civilization, Stylemaster, $49.95
http://www.westciv.com/style_master/download/
Mac trivia: Western Civilization is located in Bondi Beach, Australia.
Real World Style Web site
http://www.realworldstyle.com/2col.html