Specifications

- 70 -
Rules with nuance
These rules come from experience: once explained they are reasonable enough but aren't necessarily obvious at first.
• Name classes for their function, not their property values.
If you name a class Big_Red_Arial, then when you change it to use Times New Roman in green, you
won't know what's going on in your CSS, and neither will anyone else who reads it. If you name your class
Additional_reading_header then it won't matter what the color or font is; it is always going to be
used for the same function.
• When you apply a color to an element, think about the need to change its background color.
Yellow text is not as readable on a white background as it is on black. This will become evident if you make
the habit of previewing your pages and testing your CSS, but if you think about it in advance, you'll be more
aware of it when you look over the results of your handiwork.
• Test your CSS and HTML in multiple browsers.
If you look at your pages in only one browser, you may miss idiosyncrasies of display in other browsers. You
may also inadvertently "fix" your CSS and HTML to work only in your specific browser.
Advanced CSS strategies
These are not necessarily things you'll need to implement immediately, but may consider them as you become more
comfortable with CSS and explore more advanced features.
• Use a browser reset CSS.
Browsers have default settings for all elements; that's why they can display a page even with no style sheet
applied. You may find that some browser defaults are causing your page to be displayed in a way you didn't
expect. To avoid this, some developers use a "CSS reset" style sheet that sets all element properties to a
known state, then add their specific styles after the reset.
• Use a debugger in your browser.
Many browser have built-in or add-on debuggers available, that can show you how your CSS is being
interpreted for each element on the page. This can be invaluable in figuring out why something doesn't look
the way you thought it would.
HTML
• Use tables only for tabular data.
It is sometimes tempting to use tables to force a page to have a certain layout. While you can pretty much
guarantee the page's look, changing it becomes much more difficult. CSS makes page layout much easier
to do and much easier to change, and allows you to implement similar layouts on multiple pages by defining
elements in one place.
• Create your HTML first, then your CSS.
You'll save time by creating your HTML (at least a mockup) first. This way, you know all the elements of your
page, and can think of the page as a whole and create the CSS based on the entire page, not piecemeal.
• Use a DOCTYPE.
And use the right DOCTYPE. HTML without a DOCTYPE is subject to what is referred to as "quirks mode."
The DOCTYPE tells the browser how to render the page; without it, the browser will make a guess at how to
render it. If the browser guesses incorrectly, your page may be unreadable to some visitors.
Fonts
• Use a font manager (such as Suitcase Fusion 3).
This helps ensure you have fonts installed properly and that you aren't using corrupted fonts. It also helps
you test your CSS fallback stacks; you can disable a font and make sure the next font in the stack is used
instead.