Suitcase Fusion 3 User Guide for Mac OS - Extensis

Classes
When working with plain vanilla CSS, you will inevitably run into a situation where you want one or more
elements on a page to differ stylistically from their default. For instance, you might want some paragraphs to
appear in a script font.
Not a problem, right? You can use an inline style sheet:
Dear Diary, Today I fell in love!
When you need to apply this to a few paragraphs, on a few pages, it isn’t too bad. What hurts is when you want
to change the font from Comic Sans to something else. Then you have to go to each page and re-edit all the
inline styles, then preview every page to make sure you didn’t miss any.
This is why the CSS class was invented. In your web page, you can style the paragraphs using a class:
Dear Diary, Today I fell in love with CSS all over
again!
The “hard work” is placed into your CSS:
p.handwriting { font-family: "Comic Sans"; }
handwriting is a class of the p selector, and is defined using the syntax selector.class. Now it is much
easier to change out that Comic Sans for something more attractive; just change the class definition one time in
your CSS.
(This “dot syntax” is also common in programming: it shows the relationship between a main element and a
specific “class” of that element.)
A class can be specified independently of a selector, using the same syntax without the selector (note the “dot”
at the beginning of the line):
.handwriting { font-family: "Comic Sans"; }
A class defined in this way is often called a class selector.
This allows you to use the handwriting class in any element, or even on a single word:
Diary Entries
This section includes some excerpts from my journals, logs, and diaries.
Anything you see in this style of text is an
entry from one of my personal recollections.
The above might look something like this:
Diary Entries
This section includes some excerpts from my journals, logs, and diaries. Anything you see in this style of text is an entry
from one of my personal recollections.
Notice that the class inherits the size specification of the parent or tag.
You can also define a class differently for different selectors, as in:
p.handwriting { font-family: "Comic Sans"; }
h1.handwriting {font-family: "Times New Roman"; font-style: italic; }
Finally, you can define the class independently of selectors, then redefine it for specific selectors:
.handwriting { font-family: "Comic Sans"; }
p.handwriting { color: #404040; }
h1.handwriting { font-family: "Times New Roman"; font-style: italic; }
The text will now appear in dark gray.
- 80 -