Cascading style sheets - elements vs classes


Elements and classes - a side trip.
Classes You define classes in the same way as elements - allocate a font, size etc. in the inspector. However, you can call the class whatever you like, within certain rules. The name must start with a dot (period). It must have no spaces. No fancy characters, no slashes, tildes, brackets etc. - just letters of the alphabet and numerals. It must start with a letter, not a numeral. Lower case letters are advisable.
These are acceptable: .greenbold .ihatemicrosoft .boldertext
These are not: .12ptbold (starts with a number) .my new class (has spaces) .12/14pt (slash) redunderline (no leading period).
The other main difference from elements is that you choose where on the page to apply a class, it's selective.
So you can highlight some text, then look in the css palette.
You will see the name of your class (you don't see the leading dot, trust me, it's there). Check/tick 'Span' to apply the class to the text you've selected, or 'Par' to apply it to the whole paragraph. Span is the same as Inline in earlier versions of Golive. We are keeping it very simple, and leaving Div for now.
What if two parts of a style sheet clash? For instance, you have defined the elements td, body and p so that your text in a table cell appears one way, then you apply a class to a short stretch of text? The general rule is that the one closest to the text wins, so a class applied as 'Span' trumps the elements applied to the table cell or paragraph.
If you like, you can open the CSS Editor (staircase icon), then switch to 'Source' to see your style sheet. You can tell which are classes by the leading dot (told you it was there!) You can also edit the style sheet in this pane but, as far as I know, this only works for internal style sheets. Shame.

Back to the main css tutorial

Elements and classes - a side trip.