Specifications

- 69 -
Tips & Techniques
There are many websites, book chapters, and blogs devoted to identifying "best practices" for using CSS. These are
somewhat subjective and of course can change over time as browsers evolve and new technologies like WebINK
become available.
Instead of "best practices" here are some ideas, tips, and techniques that you can investigate for using in your own
websites. Some will be fairly obvious and long-lasting, while others may only be valid for certain people or situations.
We suggest that you review them, investigate those that sound promising, modify as necessary, and implement them
as your own "best practices." But don't forget to try new techniques and revise your strategies.
Tried and True
These tips won't steer you wrong.
• Use external style sheets.
External style sheets give you the most flexibility in applying formatting across your website. Internal and
inline style sheets can quickly become unmanageable when you go to make changes.
• Use classes and IDs.
You get greater flexibility in structuring your pages and styling your text when you implement these.
• Learn about media types.
CSS lets you define selectors differently depending on the device that the HTML content is output to. Using
the @media rule, you can change the way your content is formatted for the printed page, and can also
make it easier for a screen reader (a program that reads screen content aloud) to describe your page
accurately.
CSS Formatting
You might think that, once you've got your CSS typed into a text file and deployed, you are done with it. But when
you want to (or need to!) go back and modify it, you will want it to be well-organized, easy to navigate, and self-
descriptive.
• Use comments.
A CSS comment is any text that starts with the two characters /* and ends with the two characters */.
You can use these to describe what your CSS is doing, set off sections of your CSS, or to temporarily
"disable" some definitions.
• Organize your style sheets in a consistent manner.
Break your stylesheet into sections, such as General, Special Formatting, and Layout. Identify each section
with a comment line.
• Use CSS shorthand.
Many properties can be grouped together. For example, instead of the rule p {font-size: 12px;
font-style: italic; font-family: Arial, sans-serif} you can use p {font: italic
12px Arial, sans-serif;}. While this can keep your definition compact, you do need to be aware of
the order that you place the properties.
• Combine rules.
When rules share identical properties, you can combine those properties into one definition, then include
other definitions to include the unique properties for each selector. You combine definitions by separating
selectors with a comma: h1, h2, h3 {font-family: Arial Black, sans-serif; color:
darkgray; }.
• Use multi-line definitions as needed.
Some designers like to put their definitions all on one line, and others like to spread them out with one
property per line for readability. However you choose to write your rules, be consistent. Always define
properties in the same order so you can find them at a glance.