Press the button pictured below, and choose the type of style you want to create. For this example, let's create an ID style.
Once this style has been created, you may want to rename it, you can do this by selecting it, Control-Click (or right click) to pop open the contextual menu, and choose 'Rename...', give it a name that will help you remember it's purpose, as you may have dozens of styles in a complex document. For the purposes of the tutorial, lets call it 'downloadButton', but you can call it almost anything you want (avoid punctuation and other special characters). Once the style has been created, we need to use it, in this example we have created and ID style, so let's create an element, and set it's id to 'downloadButton' Click the 'New Element' toolbar button
and choose to create a new 'Div'. Now, make sure the new div is selected, and open the 'Inspector' palette. In the 'Attributes & Actions' section, click 'New Attribute', set the attribute name to 'id', and it's value to 'downloadButton', the entry should look like the image below.
Now, the element is now adopting it's style from the style defined in the CSS, apart from a few exceptions, as these are overridden (LINK:understanding overrides), once we remove these overrides, the element is being completed styled by our new CSS style. If you drag the element around one the page, the CSS is automatically updated. Lets change the color of this element, using the the CSS editor (pictured below)
CSS is fundamental to Flux, and modern web design in general, it offers a powerful and flexible method of styling documents by specifying colors, fonts and images separately from the HTML file. There a three types of basic CSS style: ID, Class and override styles. In a CSS document, they must follow a naming convention to work correctly.
Class styles must have names that start with a period (.), for example .myCompanyLogo Any object that references this name in it's class attribute will inherit this style, for example:
<div class="mycompanylogo"> </div>
In Flux, the class attribute for most elements is set in the Inspector palette, for other areas, such as text spans, it can be set my clicking on, for example, the span tag, and setting the 'class' attribute to the class you want to use
ID styles work very similarly to class styles, but rather than named with a period, they are designated with a hash (#), for example #downloadButton and used like this
<div id="downloadButton"> </div>
The important distinction to make about ID styles is that there should only ever be one reference to it on a page, so, the example above is perfectly legal, the example below, is not. Flux will warn you if this happens in a document.
<div id="downloadButton"> </div> <div id="downloadButton"> </div>
IDs are used to give elements a unique identity, this is very useful when using JavaScript to manipulate elements.
Override styles are probably the most powerful of all style types, as they can change an entire document very simply. They are not designated by any prefix, but must match the name of an element on the page, for example, we could override 'h1', then, everywhere this tag is used, the style defined in the 'h1' CSS definition will be used.
This is perfect for setting the font or color of text in a document. In summary... If you only want to style one element on the page, use an ID style. If you want to style all occurrences of an element, use an Override style. For all other occasions you can use a Class Style.