CSS Tips

"Document structure is like the support beams for a building. The final layout and appearance of the building will depend very heavily on the shape those support beams create. If you ignore that, and assemble the beams with no thought toward the final product (not following the blueprints, as it were), the best you can hope for is an inefficient, almost unusable building. In the worst case, the building will utterly collapse as soon as you try to add anything useful to the structure." - Eric A. Meyer

One of the biggest obstacles people face when switching to CSS based layout is learning to think of marking up documents structurally. As some programmers struggle in the switch to object-oriented programming, some visual designers struggle with structural markup instead of visual grid blocks (table cells). I'd advise someone learning style sheets to forget about graphics for a while, and just focus on working with structure.

In elementary school, most people were forced to write essays in a standard outline format. That is exactly the way that XHTML works. Web pages should always have structured textual content in organized hierarchies (outlines). It might be useful to think about a print stylesheet to help you think about page structure. If you'd want a print document to look like an outline, or magazine article, you'd think of heading priorities, lists of useful references (links), and what items belong in a header, footer, or sidebar.

• For headings, use h1 - h6
• For paragraphs, use p
• For lists where the order isn't important, use ul and li
• For lists where the order is important, use ol and li
• For lists where you're defining something, use dl and dt
• For quotes, use blockquote with a corresponding cite attribute
• For links, use a with a corresponding title attribute.
• For bold text, use strong
• For citations, use cite
• For images, use img with a corresponding alt attribute and longdesc if needed.
• Use table, td and tr for tabular data only.
• Use div and span to:
  1. style sections of content.
  2. add generic structure to the document.
  3. or when warranted by lack of style sheet support.

Use of any elements instead of or in addition to those listed above (for the corresponding purpose) will reduce the semantic quality of the document. It is that simple.

Think very hard about the document tree and selector behavior. This is necessary (as painful as it may seem at first) to enable you to visualize a document's structure mentally and determine what selectors can be used to address parts of it. Give serious attention to the logical structure of a web page. Not only will your attention make it inherently more accessible, it will help insure that you are correctly pinpointing what you really want styled. This allows you to target selectors to accomplish precise tasks.

Examples:

• Targeting selectors to accomplish precise tasks (part 1)
• Targeting selectors to accomplish precise tasks (part 2)

A key to writing smart style sheets is mastering selectors. Using structure and selectors in an intelligent way can dramatically reduce stylesheet size and aid in maintenance.

For more info see:

• Selectors
• CSS Selectors