cookiecrook²

Skip to content

Cascading Style Sheets - Practical Tips

Author: James Craig

Date: July 18, 2001

This document is mainly regarding Cascading Style Sheets (CSS) Version 1. It is assumed that the reader knows the basics of CSS1 and HTML4 or XHTML. The reader should also understand the benefits of structural markup (XML/XHTML) versus display markup (previous versions of HTML) and the concept of separation of content from display.

DISCLAIMER:

Some of this is personal preference though I've found that these are practices that have helped me to deal with large sites and cross-browser inconsistencies. I took some of these tips from RichInStyle.com though at least 90% of this document is my own.

I'm not trying to declare my opinion as law. For example, I found this strong declaration on the RichInStyle site: "Always use capital letters for the element_name in selectors - P, not p." I completely disagree with this statement though if you find a reason for liking that better, by all means, use it. The same goes for the rest of this document.

Always remain consistent and precise with your syntax. Consistency helps in every language (and is required for some) though just because you can get away with it, doesn't mean you should do it. For example:

p {
  font-family:serif
}

will work though it should really have a semi-colon after the name:value pair. Otherwise it could easily turn into:

p {
  font-family:serif
  font-style:italic
}

which is illegal and will break your style sheet. The correct syntax is:

p {

  font-family:serif;
  font-style:italic;
}

For larger sites, try to include an id attribute on the main content section of every page. For example, with tables:

   ________________________
  |                        |
  |      class="top"       |
  |________________________|
  |        |               |
  | class= | class="main"  |
  | "side" | id="about"    |
  |________|_______________|

   ________________________
  |                        |
  |      class="top"       |


  |________________________|
  |        |               |
  | class= | class="main"  |
  | "side" | id="register" |
  |________|_______________|

For the most part, the header and sidebar will remain the same throughout the site. The main content section will be changing most frequently. The advantage to adding an 'id' is that you can set all generic styles with the class, then make any exception rules on an almost page-by-page basis. I've found this invaluable with all browsers.

The table layout above is just an example. It is not important whether or not these attributes are in a 'td' or a 'div'. The only important thing is that the main "changing" content be identified with a unique 'id'. The class names (top, main, side) are not important either, but they should relate to the content or structure.

Avoid declaring font-size for large encompassing elements like body, td, and div. In Netscape4, sometimes this setting will override the font-size for title elements such as h1, h2, etc.

Use shorthand properties where possible. *Only where possible!* Be sure to check it in each browser when you make a shorthand change. Don't risk page style for code format.

#f09 instead of #ff0099

any doubles of R, G, and B hex values can be shortened. #ffffff becomes #fff, #00cc66 becomes #0c6

font: instead of font-weight, font-size, and font-family. Keep in mind that some shorthand notations require strict placement of values.

THIS WORKS:

font: weight size family;
font: bold 10px verdana;

BUT THIS COULD CAUSE ERRORS:

font: family size weight;
font: verdana 10px bold;

margin: instead of margin-top, margin-right, margin-bottom, margin-left

The method for shortening block-level settings (margin, padding, border) is "clockwise from top" - top, right, bottom, left or TRBL ('trouble') as a memory acronym.

margin-left: 5px;
margin-right: 3px;
margin-top: 20px;
margin-bottom: 8px;

BECOMES:

margin: 20px 3px 8px 5px;

Remove all redundant declarations (such as font-style:normal;) except for possible use with undefined xml.

Standard html/xhtml has inherent styles that could be left alone. Undefined xml has no inherent styles so it is recommended to even set the default display property.

p {display:block;}

is redundant in html but necessary for some xml.

Avoid redefining the default display value of html elements.

THESE ARE NOT RECOMMENDED:

p {display:inline;}
span {display:block;}

If you must redefine a default setting, try to use a class or id.

span.quote {display:block;}

Evaluate each declaration - does it have any useful effect? If not, comment it out. Don't delete the declaration because it could be difficult to replace if it's later determined to be necessary.

Separate style sheet file into sections if helpful - elements, classes, and 'id's. (and/or by section of overall web site.)

Always use descriptive identifiers and elements that fit the content:
USE: strong.warning {color:red;}
NOT: span.redtext {color:red;}

Use @import to hide certain styles from version 4.x browsers. Like this:

<link rel="stylesheet" type="text/css" href="b.css" />

<style type="text/css">
  @import "compliant.css";
</style>

Therefore, all your base styles like font settings and colors (defined in the first file) will be available to all 4.0 and above browsers, however, you can include additional styles in the second file that will only affect 5.0+ browsers. This is especially helpful with css positioning. Netscape4 jumbles them so badly that sometimes it's better just leave them out completely.

You can even set styles that will work in Netscape4 then redefine them for compliant browsers in the second file. Example:

p {margin-left:10px;} /* in b.css */
p {margin-left:20px;} /* in compliant.css */

Netscape4 (and IE4) read 10px where compliant browsers (IE5, NS6, Mozilla0.9, Opera5) all redefine the left margin to 20px.

Alternatively you can set the style in the html then redefine it in the css. Browsers that read the css value will always give precedence to the css value. NOTE: This method is only recommended as a last resort because it violates "separation of content from display".

ONLINE CSS RESOURCES:

http://css-discuss.incutio.com/
The CSS Wiki... All things CSS.

http://www.w3schools.com/css/
Valuable tutorials, references, and other CSS resources. w3schools has many other sections besides css including html/xhtml, javascript, dhtml, xml, flash, sql, etc. etc.

http://gallery.theopalgroup.com/selectoracle/
Select|or|acle. Input CSS1 and CSS2 selectors for an explanation in plain English. Example: "div#foo" returns "Selects any div element with an id attribute that equals foo."

http://www.richinstyle.com/
In depth direction and tips on CSS. Includes a list of browser bugs by version, tutorial on CSS2, and other valuable CSS resources. NOTE: Take it all with a grain of salt; opinions are sometimes portrayed as fact.

http://www.glish.com/css/
Eric Costello's resource for making complex page structures using css positioning. This is not for the CSS novice and only pertains to standards-compliant browsers (no NS4).

Photo by James Craig.