Specifications

- 68 -
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:
<p class="handwriting">Dear Diary, Today I fell in love with CSS all over
again!</p>
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:
<h1 class="handwriting">Diary Entries</h1>
<p>This section includes some excerpts from my journals, logs, and diaries.
Anything you see in <span class="handwriting">this style of text</span> is an
entry from one of my personal recollections.</p>
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 <h1> or <p> 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 <p> text will now appear in dark gray.