advert h2 {
font-size: 1.5em;
text-transform: uppercase; /* over-ride for ad pages only */
}
Modular style sheets
From a management perspective, I find it easiest to work with a single style sheet, albeit
one that already has a number of elements prewritten. However, you can also work in a
modular manner, creating a number of small boilerplate documents (e.g., to reset margins
and padding and define font size defaults) and area-specific style sheets (for navigation,
layout, forms, etc.), and then importing them into your CSS via an @import line. As an
example, you could save the clearFix rule (shown following, and used in various exercises
throughout the book, notably in Chapter 7??™s ???Clearing floated content??? exercise) in its own
style sheet as clearfix.css.
Note that the indents in this section are different from those shown elsewhere in this
book. This is intentional, in order to provide a close match to the code in the actual
style sheet, rather than something that works better on the printed page.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
494
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
This could then be imported into your main style sheet as follows:
@import url(clearfix.css);
You can import as many style sheets as you want, depending on how modular you want to
be, and how you want to organize your CSS. For example, at the time of writing, this
book??™s technical editor, David Anderson, imports all of his CSS, using eight @import lines to
do so, and separating out his CSS into categories such as ???generic,??? ???navigation,??? and
???forms???.
Pages:
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580