HTML5, CSS3, and JavaScript Fourth Edition

(Ben Green) #1

CHAPTER 10. FONT FAMILIES 99


Most of this chapter is about fonts, but we will start out with a brief dis-
cussion of classes because it provides a short-cut to help us use fonts more
easily.


10.1 Style Sheet vs Inline Styling


We can put lots of styling information right inside our markup, but the
smart money says we should keep them apart. The best-practices approach
is to put virtually all of our CSS into a style sheet. From here on out, we
will follow that approach in this book.


In chapter 9 (page 90) we learned about targets and attributes, and that
this is the prototype for style sheet entries.


target { attribute: values; attribute: values; ... }


In this section we will learn about class= which give us another way to apply
special styling to selected paragraphs.


10.1.1 class=


Within any HTML tag, we can say that it belongs to one or more classes.
For example:


...

If you want to apply more than one class, separate them by spaces and put
the list in quotes:


...

Within the style sheet, you specify the attributes that belong to that class.
Those attributes will be applied to the marked-up content as though they
had been specified inline.


.floatLeft { float: left; margin-right: 5px; }
.floatRight { float: right; margin-left: 5px; }
.framed { border: thick black double; }


The immediate advantage of this approach is that you can provide the at-
tributes one time and then use them many times, without retyping them.

Free download pdf