Using CSS in Flux

STYLES INTRODUCTION

This is not a definitive guide to every style scenario but a guide to help the new Flux user get to grips with the basic principles and quickly produce a web page.

HOW FLUX HANDLES STYLES

Flux uses two types of style.

Inline - this type of style is contained with the element it is associated with in the body of the html/xhtml page.

External - this type of style is a separate file within the site folder. Elements within the body of the html/xhtml page link to this style.

The inspector displays the style attributes and shows if the style is inline or external.

The styles window lists external styles associated with the site.

CONVERT INLINE STYLE TO EXTERNAL STYLE

When you place an element on the page in the Flux edit window Flux automatically creates an Inline style for this element. As you edit the style in the Inspector Flux updates this style for each change.

To convert an Inline style to an External one right click the element, in the Edit window, to show the contextual menu for the element and select 'Create style with' option.

tip

If in doubt when using Flux right click to see the contextual menu, usually what you need is there.

From the drop down menu add a name for your new External style and choose from

ID - a unique style name for your element.

Class - a style name to be applied to a group of elements.

Check remove Inline styles from source object.

NAMING ELEMENTS

Elements can have style name associated to them.

ID - a unique style name for a single element and will be shown in the styles window with a # preceding the name like #mystyle

Class - a style name that can be applied to many elements and will be shown in the styles window with a . preceding the name like .classstyle

PRE DEFINED STYLES (TYPE STYLES)

There are many defined styles like p, li, .... these styles have default values set within browsers so you can still use them without defining them or adding them to your styles list. Should you not be happy with the default style assigned to these elements you can add them to your style sheet and edit them to suit your needs.

To do this click the + at the bottom of the Styles window, select Override Style followed by the element you want to override the style of.

STYLES CASCADE

Some styles override other styles. This can become quite complicated but all the beginner has to remember is that an Internal style overrides an External style.

STYLE INHERITANCE

Some style attributes can be inherited from parent to sibling. Flux allows you to set inherit if it is possible. TARGETING STYLES

Lets say you have used the Gallery Plugin to create a gallery and this gallery is placed within a containing div.

If you give this div an ID of #mygallery you can target elements within this div. In this case the gallery has thumbnail images with the img tag. To target just these images use a style name like this '#mygallery img' this style will only style images within the #mygallery div. It is now simple to add margins and borders to give a professional looking individual style to your gallery thumbnails.

tip

For further reading try CSS Mastery by Andy Budd.