A full example is available in the advanced-boilerplates folder of the
download files. An example of a table of contents is shown following:
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
492
/*
STYLE SHEET FOR [WEB SITE]
Created by [AUTHOR NAME]
[URL OF AUTHOR]
ToC
1. defaults
2. structure
3. links and navigation
4. fonts
5. images
6. tables
7. forms
Notes
*/
An example of a section of a boilerplate is shown following, with empty rules waiting to be
filled. Here, a single tab is represented by eight spaces. Note how the property/value pairs
and closing curly quotes are indented equally. This makes it easier to scan the far-left side
of the document for selectors.
/* ---------- 4. fonts ---------- */
html {
font-size: 100%;
}
body {
font-size: 62.5%;
}
h1, h2, h3, h4, p, ul {
}
h1 {
}
h2 {
}
h3 {
}
h4 {
}
CSS REFERENCE
493
D
p {
}
ul {
}
The use of the CSS comment to introduce the section, with a string of hyphens before and
after the section name, provides a useful visual separator for when directly editing code.
Subsections are best added by indenting them the same amount as the property/value
pairs; rule-specific comments are best placed after the opening curly quote; pair-specific
comments are best placed after the pair. See the following for examples.
Sub-section introduction:
/* --- sidebar headings --- */
#sidebar h2 {
}
#sidebar h3 {
}
Rule-specific comment:
.boxoutProducts {/* used on sales and purchase pages */
}
Pair-specific comment:
body.
Pages:
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579