The increasing use of Cascading Style Sheets (CSS) is changing the website design process. To meet the rising needs of CSS-conscious designers, Macromedia Dreamweaver MX includes many new and improved CSS-related features. With these new features, you can plan for future updates, build websites that are more compatible with World Wide Web Consortium (W3C) standards, and comply with new accessibility laws. This article discusses best practices when using CSS and highlights specific CSS features in Dreamweaver MX.

Style sheets are, in general terms, a collection of formatting rules that control the appearance of content in a web page. You can implement CSS on your pages three different ways:

• Inline: a one-time style placed in the code
• Embedded: a style sheet that controls the elements on one web page
• External: one external style sheet that can control the appearance of many web pages

An important consideration in the use of CSS styles is the fact 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 such as Palm Pilots, and TTY (teletypewriter).

If you want to learn more about the basics of CSS before proceeding on with a "best practices" analysis, review some of the materials listed in the More Resources section at the end of this article.

What does CSS "Best Practices" Mean?
Most technologies have accepted standards, and CSS styles have their own set of standards. Although non-standard CSS practices (including its lack of use) exist on the Internet, there are many benefits to adhering to the defined standards.

In general, developers should aim to "separate content from presentation" as much as possible on all web pages. Proper separation is recommended in order to:

1. Increase the longevity of your website
   Using non-standard practices may seem more convenient at the moment, but a future version of a browser may not be so tolerant of shortcuts. Individually changing all of your web pages in the future could be very time-consuming and defeat one of the main purposes of using CSS styles in the first place.
2. Make your website more accessible to all users and devices
   Government legislation in some areas has required websites to be accessible to users with disabilities. Browsing devices that assist people with disabilities, such as an aural browser, are especially dependent on the best use of CSS styles.
3. Allow you to update and maintain your website with ease

Best Practices with CSS in Dreamweaver MX
One of the first decisions you¹ll have to make involves selecting which kind of CSS style to use. Below is an analysis of the different kinds of CSS styles with best practices in mind.

Inline CSS
Simply put, you should avoid inline CSS styles. Apart from any other considerations, using inline CSS means that you are not taking advantage of the true powers of CSS-and it means that you are not separating content from presentation.

Dreamweaver MX uses inline CSS mark-up primarily for positioning page elements (these positioned items are called "Layers" in the Dreamweaver MX UI), or to enable a specific DHTML effect which requires an inline style to alter an object¹s properties with JavaScript.

Embedded CSS
Embedded CSS is less than optimal because it only affects the style of the page on which it is written. During an update process, inconsistency across your site will result if any pages are missed. Additionally, your style information-which exists on each and every page of your site-has to be downloaded every time a user views a page.

External CSS Files
External CSS files should always be your first choice. By creating a CSS file that contains all of the style information for your website, you can:

1. Maintain a consistent look across all pages that link to the style sheet.
2. Easily update the look of all pages by changing the values in one file.
3. Make your pages much smaller and quicker to download, because all of the style information has been removed to one file.

Creating a CSS style in Dreamweaver MX
When you create a new style in Dreamweaver MX, you have two choices in the New CSS Style dialog box: New Style Sheet File or This Document Only (see Figure 1). Choosing New Style Sheet File will start the process for creating an external style sheet. This option requires you to name and save the CSS file before actually creating a style. The other option, This Document Only, will embed the style directly into the head of your document.

You can also select an existing style sheet in the New Style dialog box to edit or add more definitions to it.

Should You Link or Import Your External Style Sheet?
After creating your external style sheet, you will need to attach it to each page (or attach it to a template). To do this, click the Attach Style Sheet button on the CSS Panel. The Link External Style Sheet dialog box will appear, allowing you to browse to the name of your style sheet. After you¹ve located the style sheet, you can choose to link or import the external style sheet (see Figure 2).

Linking to the style sheet is the most common approach. Selecting the "link" option will attach your external style sheet to your page by adding the following markup:

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

All CSS-enabled browsers support the linking option, and this method should be followed if you need older browsers (such as Netscape 4.x) to "see" the styles.

If you choose the "import" option, the style sheet will be attached with the following mark-up:

<style type="text/css">
<!--
@import url("mystyles.css");
-->
/style>

The import method of attaching a style sheet is not recognised by the older, version 4, browsers. However, it can come in handy. Developers often use the import method in order to include CSS styles designed for new browsers while also linking to an external style sheet to include styles for Netscape 4.x. This technique is explained in more detail below.

One Strategy to Cover Newer and Older Browsers
You can use both the link and import methods to attach two different style sheets that, between the two of them, cover multiple browsers-including Netscape 4.x. One style sheet only contains values supported in the older browsers; and one style sheet contains additional or different properties for the newer browsers with more robust CSS support.

To accomplish this, you first attach the style sheet for the older browsers using the link method. Then, select import to attach the style sheet for newer browsers. The resulting code will look similar to this:

<link href="oldbrowsers.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
@import url("newbrowsers.css");
-->
</style>

The version 4 browsers will completely ignore the imported style sheet and render the page according to the values in the linked one, leaving you free to fully use the capabilities of CSS for those browsers that support it. This approach eliminates the possibility of causing an unreadable page in older browsers.

The CSS Property Inspector
You can now easily switch into CSS mode within the Dreamweaver MX Property inspector. By default, the Property inspector displays the original font tags in HTML mode. To switch the Property inspector into CSS mode, click the CSS/HTML toggle (the small "A" next to the font pop-up menu). Instead of the font tag list, you will be presented with the list of CSS styles currently available (see Figure 3).

You can always toggle back into HTML mode to work on a non-CSS based website.

Ready-Made Style Sheets
A particularly exciting new CSS-related feature in Dreamweaver MX is the inclusion of ready-made CSS style sheets. New users to CSS can begin by experimenting with one of these ready-made style sheets.

To get started, choose File > New. In the New Document dialog box (under category) select CSS style sheets. A whole list of ready-made style sheets will appear in the right-hand pane. To implement best practices, you should choose one of the style sheets marked Accessible (see Figure 4).

You can now save this document into your site folder and attach the CSS file to your pages as described above.

Design Time Style Sheets
This convenient Dreamweaver MX feature allows you to apply a style sheet so you can see how your site really looks while you are still in Design view. This style sheet will not appear on your live site. From a best practice viewpoint, this feature is especially useful. If you are using the import and link method described earlier (with two style sheets), attaching a Design Time style sheet will allow you to design your website using one of those two style sheets. When you want to see how the page looks with the other style sheet, you can easily change the style sheet.

Design Time style sheets will also be helpful for developers who are using style sheets that will be housed on the server-side (with, for instance, ASP, PHP, or ColdFusion Application servers) or accessed with JavaScript on the client side. These server-side style sheets are another way to cope with the lack of CSS support in older browsers. However, in previous versions of Dreamweaver, this approach restricted you from seeing the effect of the style sheet applied to your page while you were designing. Design Time style sheets allow you to apply your style sheet so you can work visually within Dreamweaver. Another benefit to using Design Time style sheets is that when you upload your site files, you won¹t have to remember to go through the site removing unnecessary style sheets.

Validation
Whether you have created your own style sheet or used and edited a ready-made style sheet, validating your CSS styles will help to ensure that you are not accidentally using any non-standard tags or incorrect code. Frequently, problems with CSS will disappear once the style sheet is validated and the errors corrected.

Dreamweaver MX does not have a CSS validator, but you can accomplish this by using the W3C CSS Validation Service on the W3C website. Alternately, you can validate your HTML or XHTML mark-up from within Dreamweaver MX by choosing File > Check Page > Validate Markup (for HTML) or File > Check Page > Validate as XML for XHTML.

Dreamweaver MX provides you many tools that will assist you in the development of your CSS-based websites. With Dreamweaver MX and a solid understanding of CSS and the importance of writing valid, accessible CSS code, you are well on your way to creating websites that will stand the test of time.

More Resources
For basic information about CSS Styles, see: The W3C CSS Pages CSShark: The CSS Know-How Site. Note, in particular, The Basics page. The W3Schools CSS tutorial "What is the W3C© and why do we care?" by Julie Hallstrom, in the DevNet on Macromedia.com

The Dreamweaver MX Help documentation.
To access this material within Dreamweaver MX, choose Help > Using Dreamweaver > Adding Content > Inserting and Formatting Text > About Cascading Style Sheets. Also, try out the Designing with Cascading Style Sheets tutorial in the Tutorials section. Even experienced Dreamweaver users would do well to check out the new CSS capabilities by reading through these excellent help files.

For further, more advanced information on CSS, consult these sites: