Skip to page content
Return to Top

Cascading Style Sheets - Recommendations

Important Note: Not all browsers and platforms support all CSS properties similarly, particularly some advanced or custom tags. Make sure to test styles sheets in the recommended browsers and any additional target browsers your site supports.

  1. Construct styles that can be applied in a wide variety of situations. Don't design a style sheet that is unique to a specific page. Think about reusability in your style sheets, since that is one of the many advantages they offer.
  2. Define styles at the largest object level possible. For example, instead of defining fonts at the <p> level, define them at the <body> level and make exceptions where needed. Also, try to style at the <div> level rather than the individual elements of a <div>. For example, if you have a <div> defined for your navigation bar, style the <div> instead of individually styling each navigation element within the <div>.
  3. Add to base styles rather than overwriting them. For example, if you have already defined fonts for the <body> tag, don't specify the same font again for the <ol> tag.
  4. Use semantic style names, not presentaional style names. Instead of naming a style redbold (presentational); call it errormessage (semantic) if you use it to display error messages.
  5. Avoid using inline styles (using the style attribute within a tag), and use embedded styles (styles defined in the head) sparingly. Use the <link> tag or @import to link to an external style sheet.
  6. Use IDs for unique elements and classes for groups of elements. IDs are commonly used to distinguish sections of a page. For example you might have <div id="header"> or <div id="mainContent"> on a page. Use classes to apply similar styles to multiple elements on a page.
  7. Ensure that pages are meaningful and readable with style sheets turned off.
  8. Use print style sheets if possible. Many users like to print pages, particularly content pages. Include a print style sheet for those resources.
  9. Use "%" or "ems" for font sizes instead of absolute pixel measurements. Try to use ems and % in margins as well.
  10. Validate all CSS. Use the CSS validator at http://jigsaw.w3.org/css-validator/.
  11. Write style rules as illustrated below:
      selector {
    property: value;
    property: value; }
    For example:
    body {
    color: #000000;
    font-family: Times;
    }
  12. Use comments in style sheets so they can be easily understood.
    /*   XHTML Elements */

    body {
    font-family: Verdana, Arial, sans-serif;
    color: #CC5500;
    }
  13. When structuring style sheets, proceed from general to specific in the style definitions. For example, style XHTML tags first, general style classes next, and then specific divs with IDs next.

The above information was taken with permission from The University of Texas at Austin at http://www.utexas.edu/web/guidelines/css.html.