In this chapter we will learn how to use Style Master to
To create a new style sheet
1. choose
from the the menuA new style sheet window, called untitled.css opens. Below, we will look at the style sheet window, what it means, and what you can do with it in more detail.
With Style Master, you can open style sheets created on any platform, no matter what application created them.
To open a style sheet, you can use any of the following methods.
1. choose
from the menuThe familiar "Open" dialog opens.
2. locate the style sheet you want to open
3. select the style sheet and click
, or double click the style sheet1. locate the style sheet you want to open
If it was created using Style Master
2a. double click it
If it was not created using Style Master
2b. drag the icon of the style sheet onto the Style Master application icon
A style sheet window opens for this style sheet. Below we look at the style sheet window in detail.
Style sheets can be either separate documents, or embedded in the head of HTML documents. Style Master lets you edit a style sheet embedded in the head of an HTML document. To open a style sheet in an HTML document for editing, do exactly as you would if the document were a normal style sheet.
1.choose
from the menuThe familiar "Open" dialog opens.
2. locate the the HTML document with the embedded style sheet you want to edit
3. select the HTML document and click , or double click the HTML document
1. locate the HTML document with the embedded style sheet you want to edit
2. drag the icon of the HTML document onto the Style Master application icon
A style sheet window opens for the style sheet embedded in the HTML document. Below we look at the style sheet window in detail.
Note: When you save the changes to a style sheet you are editing in this way Style Master only affects the style sheet in the head of the document. It does not alter any other part of the HTML, nor the creator of the document (so if you created the HTML document using Home Page, it remains a Home Page document.
Style Master does one thing. It let's you work with style sheets. The heart of the application is the style sheet window. The style sheet window represents the style sheet you are editing. Let's take a look at each part of the window.
At the top of the Style sheet window, you'll see a pop-up menu, labeled: Target which Web Browsers?
You use this pop-up menu to choose the browser or browsers that you want to target with your style sheet. Why do we need to do this? Well, in an ideal world, any style sheet would work with any browser. Unfortunately, this isn't an ideal world. No major browser fully supports cascading style sheets, and some aspects which are supported are not supported perfectly. Style Master helps you with the problem of developing style sheets that work properly in the browsers you want them to by warning you when a feature is not supported by one of your chosen browsers, or is not perfectly implemented in one of those browsers. You can then determine how best to work around the limitation.
At the left of the window is a scrolling list, labeled: Statements
A short explanation might be helpful. A style sheet is essentially a set of
instructions telling a web browser how to draw different elements in a web page.
These instructions are called statements. A statement comprises
two parts, a selector, and a set of properties,
called a declaration.
A selector tells a browser which element is affected by (or selected
by) the statement. The declaration is a set of properties that tells a browser
how to draw the selected elements.
You can edit the order of statements in the list, and cut, copy, paste and duplicate statements, individually, or several at once.
To select more than statement from the list
1. hold down the shift key and click the first statement you want to select
2. click the last statement you want to select
style master selects all the statements between the first and last clicked.
To select discontinuous statements (rather than a block of them)
1. command click each statement you want to select
To deselect one selected statement (keeping the rest of the current selection)
1. command click the statement you want to deselect
To select all of the statements in the list
1. choose
from the menuTo cut, copy, paste, clear or duplicate statements in the list
1. select the statement or statements you want to cut or otherwise edit
2. choose the operation from the
menuTo rearrange the order of statements in the list
1. select the statement or statements you want to reorder
2. click one of the selected statements and drag it to the location in the list where you want it to be moved
We cover editing statements in the section Working with Statements. For more on statements generally, see the section on statements in our tutorial on style sheets.
When you click a statement in the list we have just seen, Style Master places the selector for that statement in a window item at the right of the window labeled: Selector. We cover selectors in the section Working with Statements and Selectors. For more on statements, see the section on statements in our tutorial on style sheets. For more on selectors, see the section on selectors in our style sheets tutorial.
Immediately below the Selector field, is a field labeled: Properties. These are the properties of the selected statement. We look at editing properties in Working with Properties. To learn more about properties generally, see Properties in our style sheets tutorial.
Here is a little tip about working with properties. If you command-click a property in this window item, Style Master opens the editor for editing this property.
That concludes our discussion of creating and opening style sheets and opening style sheets inside HTML documents. Along the way, we were introduced to statements, the whole point of style sheets, and their constituent elements, selectors and properties. We also had our first glance at the style sheet window.
Next we will learn how to work with Statements and Selectors