Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.


They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us [email protected].

how to use style master

Style Master comes with comprehensive documentation including an FAQ, manual and tutorial, linked into the application. To access this see the entries in the Help menu.

Q: How do I get X-Ray to work?

A: First of all

  • Make sure you can see the Design Pane - choose Design Pane from the Design menu
  • Make sure Outline Selected is ticked in the Design menu
  • Make sure X-Ray Matching is ticked in the Design menu

Click some elements in the Design Pane. Does anything happen? The first thing you should notice is that an outline is drawn around the elements as you click them. This will happen when Outline Selected is on. It means you can see exactly which element on the page you have selected, and it can also help you see the exact location and dimensions of any element.

Now, look across at the Statement List Editor and see what happens as you click different elements. You'll see that different statements are being highlighted in lime as you click different elements. This is X-Ray Matching in action: any statement which selects the element you are clicking will be highlighted. Notice I say any statement, as there can be more than one that will select any given element. A message down the bottom of the Statement List tells you how many statements match this element, meaning how many statements will have an effect on this element if you change their properties.

Next, look down the bottom of the Design Pane. This is showing you the containment hierarchy for the element you have clicked.

Now double click an element and something further will happen. In the Design Pane it will now have a lime colored border around it, and you should notice in the Statement List that now one of its matching statements is actually selected and live, ie, ready for editing. What's happened is that the most specific statement which selects this element has now been made active and ready for editing in Style Master. Now,you might be asking "what do you mean, 'most specific'?" I know it's a good question, but I don't want to get sidetracked with it here. If you need to learn about specificity (and eventually you're going to have to if you're going to take it to the next level with CSS), take a look at this excellent piece by Russ Weakley at the Maxdesign site.

Depending on what you have in fact selected you might notice something else in the Design Pane itself: more than one element may now have the lime border around it. What's happening? Well, all the other elements in the page that are selected by this statement are now also being highlighted. Remember, any page will almost certainly have, for example, <ul>s in all sorts of different places. So if you have made active the statement with the selector ul, these will now all be highlighted in the style sheet.

Where does all this leave us then? You want to change the background color of a particular navbar? Just double click it in the Design Pane, make some changes in the background editor, and see the results instantly. It beats trawling through line after line of code just to find the Statement you want to work on any day.

X-Ray Matching works in reverse as well, and helps you to see all the elements that will be effected by changes to a statement. Arrange the window so that you can see both the code and the preview, then click through some statements in the code. Notice the different parts of the page being highlighted? Now edit the properties of one of these statements. See how the selected elements change?

Q: How do I preview with my own preview documents?

A: Until you set a preview document Style Master will default to "Smart Preview". This means it will try to find an appropriate HTML document which is saved in the same directory as the style sheet. In some situations you may also simply see a default HTML preview document that comes with Style Master.

To see your own HTML document, first set up this document as a preview document by choosing Preview Options... from the Preview menu. Then, make sure this document is chosen in the dropdown menu on the Design Pane.

Q: How do I use Style Master to create a table-free layout?

A: There are two easy ways to do this using Style Master.

Create a site based on one of the templates

The templates that come with Style Master allow you to choose from a collection of one, two and three column layouts, all using XHTML and CSS. Doing this you create a fully styled site with layout, colors, navbars, background images, everything. You can use these pages as is, or modify them to your own preferences.

To create a site based on a template choose New From Template... from the File menu.

Create a site using the New Layout wizard

Using the layout wizard you get to create the XHTML and CSS for a one, two or three column layout, with or without headers and footers, with background colors, borders and other styles for each of these elements. It's then up to you to add in to the HTML document all the paragraphs, lists and other content you need using a text editor. Using Style Master you can change the configuration of the layout, and create further styles. Just like with the templates, you'll also need to create further HTML documents based on this original one, and link them to the style sheet.

The Layout Wizard explains itself as you go: choose Wizards then New Layout Wizard... from the Design menu.