Practical and Useful Information For Enhancing Your Site

Introduction To CSS

I think many developers have a love/hate relationship with Cascading Style Sheets (CSS). CSS enables developers to separate content from presentation, and it can make it easy to maintain a large site because styles are normally saved in an external file sheet. By using an external style sheet, a developer can change the appearance and layout of an entire site by editing a single CSS document. The problem with using CSS is that it can be difficult to create style sheets that are cross-browser compatible. Al Sparber, a CSS expert, includes the following quote in his signature block:

"Designing with CSS is sometimes like barreling down a crumbling mountain road at 90 miles per hour secure in the knowledge that repairs are scheduled for next Tuesday".

The concept of a "style sheet" -- specifying fonts, colors, etc. in an external file -- is fairly easy to grasp, but what does the term "cascading" mean? Using an external style sheet is not the only way to specify styles. A developer can also specify style information inside a single HTML element and inside the <head> element of an HTML page. "Cascading" refers to the order in which a style will be used if it is specified in more than one place. Here is the cascading order, starting with the lowest priority:

  1. Browser default
  2. External Style Sheet
  3. Internal Style Sheet (inside the <head> tag)
  4. Inline Style (inside an HTML element).

An inline style (inside an HTML element) has the highest priority, and it will override a style declared inside the <head> tag, in an external style sheet, or by the browser.

The bad news is that many of us were comfortable with HTML formatting and table layouts, and now we have to learn to do it with CSS. The good news is that it's not that hard to learn CSS. This is our first experience with a site where the layout and the styling are done with CSS. We keep several CSS reference books close at hand, but we're actually having fun.

Under the CSS button in the navigation panel to the left you will find some tips and tricks on using CSS and a list of CSS resources.