Creating and Opening Style Sheets

In this chapter we will learn how to use Style Master to

Creating a style sheet

To create a new style sheet

1. choose New... from the the File menu

A 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.

Opening style sheets

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.

Inside Style Master

1. choose Open... from the File menu

The familiar "Open" dialog opens.

2. locate the style sheet you want to open

3. select the style sheet and click Open, or double click the style sheet

From the Finder

1. 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.

Opening embedded style sheets

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.

Inside Style Master

1.choose Open... from the File menu

The 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 Open, or double click the HTML document

From the Finder

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.

The Style Sheet Window

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.

Targeting browsers

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.

The List of Statements

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.

Editing the list

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 Select All from the Edit menu

To 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 Edit menu

To 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.

The Selector

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.

The Properties

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.

In this chapter

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

Next we will learn how to work with Statements and Selectors

welcome about style master creating style sheets selectors properties previewing linking

home to western civilisation