After a somewhat slow start due to varying degrees of support by the major browsers, the use of cascading style sheets (CSS) has moved from simple text formatting to the de facto standard for page layout. Throughout this gradual evolution, Dreamweaver has regularly added and enhanced CSS features to support designers and developers alike. With the release of Dreamweaver CS4, new features such as Live view will completely change the way in which we go about designing CSS-based layouts in Dreamweaver. This article discusses best practices for using CSS and highlights specific CSS features in Dreamweaver CS4.

Cascading style sheets are, in general terms, a collection of formatting rules that control the appearance, or presentation, of content on a web page. Implementing CSS within a page or site is done in one of three ways:

• Inline: A one-time style applied within the code as an attribute of a given element (or tag).
• Embedded: A style sheet declaration in the head of the document that will only effect that single page on the site.
• External: A physical CSS file containing rules (styles) that is linked to from multiple pages within the site.

Many websites use a combination of these methods. Inline styles, however, should be avoided. If you use inline styles for testing during development, you can move them to your external sheet in Dreamweaver by choosing Format > CSS Styles > Convert Inline CSS to Rule. It's also a good idea to limit the use of embedded styles to keep your CSS more easily editable sitewide. Many people prefer to develop the initial framework of CSS styles for a site using the embedded method, but they should be moved to an external style sheet when done.

An important consideration in the use of CSS styles is that different browsers (and different versions of the same browser) render CSS styles differently. In addition to variations in web browser compatibility, you should be aware that many other types of browsers exist, such as aural browsers, TV-based browsers, handheld devices (including those from Palm and Blackberry), and TTY (teletypewriter) devices.

If you want to learn more about the basics of CSS before learning more about CSS best practices, review some of the materials listed in the Where to go from here section.

Requirements

In order to make the most of this article, you need the following software:

Dreamweaver CS4

• Try
• Buy

Prerequisite knowledge

Some familiarity with CSS concepts is required.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

Page 1 of 6

Next Page

About the authors