Creating a new style 

open the style manager by selecting ʻStylesʼ from the start button menu 

                      

the style manager will open and show a default style sheet in the Style Sheet tray in the top left of the screen. Click on this once to select it. 

locate the style rules tray. Click the ʻ+ʼ button to add a style rule. A box will appear that allows you to add a rule name. NB - to make a selectable style rule start the name with a dot, e.g. ʻ.myfirststyleruleʼ or ʻ.green12pxʼ. Click ʻOKʼ to save it. 

double-click the style rule to open it and then change the settings by choosing from the select boxes or entering the values as necessary. 

the preview box in the top-right will show your style as it develops and the results box will show you the actual CSS you are creating 

when you have finished setting the style, click the ʻSaveʼ icon on the menu to save your style selections. 

If you are more familiar with CSS and would prefer to type the properties in directly, click the Property list view by click the radio button above the style editor. 

What are Style Sheets? 

Style sheets are collections of style rules that can be selected all at once. You can group your style rules together in a style sheet. 

Style rules are the definitions of a style. You create a style rule to define the layout or presentation of an HTML document. Style rules can relate to the entire document or just to a particular element. For example, to change the background colour of your default template you could create a body style like this: 


add a new style rule called ʻbodyʼ - NB there is no dot before the name 

change the background colour by selecting the background section > colour and choosing ʻdefineʼ. This will display the colour swatch - to change it, click the colour swatch and the colour chooser will appear. 

choose a colour and click ʻOKʼ, then save the style rule by clicking ʻSaveʼ from the button bar. 

go to the component editor and double-click your default template. Click preview and the background colour will have changed to the colour you specified in the body rule. 

What are Style Rule Properties?

Style rule properties are the choices you make in the style manager for a particular style rule. You might for example, set the Font to ʻArialʼ, or the background colour to ʻwhiteʼ. These are known as style rule properties. In fact, all of the style choices you make for a 
style rule are known as style rule properties. 

What is a Class?

A class is the name given to a style rule you have created. Technically, a class is a standard that is applied throughout your web site, and the term class applies not only to styles, but to other tools such as the Data Manager. 

Once you have created a style rule, you can apply it to a particular element 
by clicking on the class button in the styles tab. It will display a list of the selectable classes you have created. Remember, that to make a style rule selectable for an element it must start with a dot, e.g. ʻ.myfirststyleruleʼ. 

To select a class, click on it. To deselect a class, click it again.

Styles are applied in order, so the last style you select will overwrite/add to the last style you selected. 

To gain a deeper understanding about styles and CSS visit http://en.wikipedia.org/wiki/ Cascading_Style_Sheets