Best practices with CSS in Dreamweaver CS4

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.

We've always giggled slightly at the term best practices because it implies one technique is better than another, even though both might ultimately achieve the same goal. However, most technologies do have accepted standards or ways of accomplishing a task. With CSS, these standards can be somewhat nebulous, but there are definitely some basic approaches to be followed. And although non-standard CSS practices (including its lack of use) exist on the Internet, there are many benefits to adhering to the accepted standards for both your business/site and customers, including browser and forward compatibility of your site and easier maintenance.

Maintain separation

You've probably heard the mantra "content is king," and this is particularly true within the world of web design. All too often, we see sites which are "designed" first, and the content is then forced into it. Not only does this complicate the design and production process, it also leads to content that cannot be semantically marked up, and therefore cannot be properly optimized for search engines, nor reformatted for alternative devices.

You should always begin the design process by properly marking up the content before any thought has been given to design or CSS. This means identifying important heading elements as <h1> or <h2>, dividing text blocks into logical paragraphs using <p>, using lists to identify the elements of a navigation bar, and so on. After this has been completed, you can begin thinking about the source order of elements—placing the important pieces of content early on in the source so that search engines index them more readily. You can use different placement techniques with CSS to move them to the left or right based on your ultimate goal.

Through proper separation of content and presentation, you can achieve a number of benefits:

• Increase the longevity of your website. Many times in the heat of the moment, with a deadline looming, a quick fix via a non-standard practice may seem acceptable. Remember though that a future version of a browser may not be so tolerant of a shortcut or hack. 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 in the first place. And the non-standard approach can further complicate matters if you are required to hand off your work to someone else to maintain.
• Make your website more accessible—to all users and devices. In some areas, government legislation requires websites to be accessible to users with disabilities. Applications that assist people with disabilities, such as screen reader software, are especially dependent on the best use of CSS styles. Additionally, with the proliferation of mobile devices capable of browsing the web, you should keep in mind that their minimal screen size can wreak havoc on a design intended for a 1024×768 screen. Through CSS you can provide every visitor an experience that has been optimized specifically for their browser agent or at least provide the content in a readable, accessible manner.
• Reduce page weight; simplify website updates and maintenance. Properly implemented, CSS allows you to make changes to your website in one location and to see those changes take effect globally throughout your entire website. Because CSS files are cached, they are downloaded only once enabling every subsequent page within the site to load faster.

For more information on the benefits of CSS, see Why use CSS? on Adobe Developer Connection.

Dreamweaver has long supported the use of CSS—even before the browsers began focusing on standard practices. However, in keeping with the "make it approachable" mantra that has been a long-standing goal with Dreamweaver, some liberties were taken within the initial Dreamweaver interface when addressing CSS. Although this might have made it easy to learn to use CSS in Dreamweaver, it contributed to confusion once a user had learned the basics and wanted to begin to code CSS by hand. For example, in the CSS Rules dialog box, almost every attribute was labeled using a common name instead of the proper CSS declaration; font was used instead of font-family, size instead of font-size, and so on. With Dreamweaver CS4, the interface has been updated to use the proper terminology, which is a small but important change (see Figure 1).

In Dreamweaver 8, the shift was made to a pure CSS workflow and Dreamweaver wrote CSS instead of old-school styling methods. However, an undesired side effect of this was that any styling done via the Property inspector caused the creation of a new, embedded style, such as Style 1, Style 2, and so on. Pages could quickly get overloaded with generically named styles, many of which often created the same look. To address this issue, Dreamweaver CS4 divides the Property inspector into two views: HTML and CSS (see Figure 2).

In the HTML section, the look is very similar to the older Property inspector. However upon closer inspection, you'll notice that the ability to assign a font has been removed and replaced with a drop-down menu to assign a CSS class or ID (see Figures 2 and 3).

The CSS section allows you to quickly create or edit various font properties of a rule within the Property inspector or to access the CSS Rule Definition dialog box to edit other properties for that rule. You can even create a new CSS rule directly from the CSS section of the Property inspector (see Figure 3).

Creating a CSS style in Dreamweaver CS4

When you create a new style in Dreamweaver CS4, you are given the opportunity to define the type of selector being created: class, ID, tag (element), or compound (see Figure 4).

If any element on the page has focus, Dreamweaver will automatically populate the Selector field with a suggestion of the type of rule to be created. In the event that you have a child element selected, such as a paragraph of text within a div, Dreamweaver will fill in the full path to the element writing a descendent selector. A descendent selector more specifically targets an element (for example, #container #mainContent p would target any p element that is a child of an element with the ID of mainContent, which is a child of an element with the ID of container). Dreamweaver describes exactly what is being targeted in the box below the Selector Name.

You will notice that there are two new buttons labeled Less Specific and More Specific, which allow you to change how specificaly your descendent selector is written (see Figure 5). It's best to write the simplest selector that still targets the element you want to effect. This gives you room to get more specific with subsequent selectors if needed.

You can also specify whether the rule should be added to an existing style sheet, created in a new style sheet, or embedded into the current HTML page.

Writing succinct CSS

With so many ways to write CSS in Dreamweaver, the question often arises, "What's the best way to write my style sheets?" We've found our CSS documents to be lightweight and succinct when we follow these simple rules:

• Define element selectors first. Element selectors (or tags as Dreamweaver defines them) are the universal properties and values you want placed on p, h1, h2, h3, ul, ol, dl, blockquote, and similar elements. For example:

This rule will cascade to all p elements.

• Define ID selectors. Although an ID can be placed on any element (and can be useful for JavaScript), placing an ID on each page division is a good way to give yourself hooks to later write descendent selectors. Remember that an ID can only be used once in the HTML portion of your page. For example:

This rule will only be applied to the element with this specific ID.

• Define descendent selectors. Create descendent selectors to specifically target elements within a page division with their own styles. You can use descendent selectors to define a new property or to override a property defined in an element selector since a descendent selector is more specific. For example:

This rule will only be applied to a p element within the #sidebar1 division. No other p element will be affected.

• Define class selectors. Note that we left classes for last? Classes are definitely useful since they can be applied multiple times, but there's nothing worse than a page with classitis (yes, the way most all of us started out). Define classes for anything that must have a multiple use—nothing else. For example:

This rule will be applied to any element the class is attached to. Use classes judiciously.

These rules, when followed, can substantially reduce the size of your CSS documents and hep you organize them—and that's always a good thing.

As good as the Design view has become, there are still times when Dreamweaver CS4 cannot render the desired CSS correctly in this view. In the past, you needed to view these pages using your browser of choice to see how the design would look. A new feature in Dreamweaver CS4, Live view, helps you streamline your workflow.

Using Live view

With Live view, you can have Dreamweaver render the page exactly as it will appear in a standards-based browser using the WebKit browser engine. Built directly into Dreamweaver CS4, WebKit is an open source browser engine used by the Apple Safari browser, the Google Chrome browser, and the Adobe AIR framework.

Live view also allows you to interact with the page, triggering JavaScript/Ajax functionality and enabling embedded Flash files (see Figure 6).

Live view is not Design view—in other words, you can't add or modify the page within the Live view pane as you can in the Design pane. However, if you change into Design and Code view (called Split view), you can add to or modify the HTML or CSS within the Code pane while Live view is active. Changes are not reflected within Live view until you click Refresh (either on the Property inspector or at the top of the document window) or use the F5 keyboard shortcut.

Working with the Code Navigator and Live Code view

The partner of Live view is Live Code view. When activated, Live Code view allows you to see changes made by JavaScript within your code in real time, as they happen. When working with Spry or any other JavaScript framework, CSS styles can be changed via JavaScript based on the user's interaction with the element—for example, hovering over it. In the past, this was almost impossible to edit since it can be difficult to know what CSS selector name is being appended to the element. In Live Code view, you can hover over the element causing the CSS style name to be dynamically applied and allowing you to see it in the code. You can freeze the code in its current state by selecting Freeze JavaScript from the Live View button's context menu. Then, either click into the code to select the specific style to edit in the CSS Styles panel or right-click and select Code Navigator. The Code Navigator shows you the full path through the DOM. When you hover over the various rules that appear you can see their defined properties; click one to jump directly to the selected rule in the CSS document (see Figure 7).

Although we find the Code Navigator most useful when using Live Code view, it can be accessed at any time if you prefer to navigate to and edit your CSS document in this way.

Viewing related files

As HTML pages get more complex using include statements and Ajax capabilities, more and more individual files are referenced to render a single page. In Dreamweaver CS4, all of these files are listed at the top of the document window whenever an HTML page is opened (see Figure 8). In Split view, you can switch the Code pane to any of your linked CSS style sheets (or any other linked file for that matter) while continuing to view the page in the Design pane, or even in Live view! Just remember that changes made to the CSS are not reflected in the Live view until you refresh the document.

Regardless of how well you understand CSS, or even if you can write it by hand, one of the most tedious parts of the web design process is writing the initial CSS framework for the page. Introduced in Dreamweaver CS3, the 32 CSS layouts available in the New Document dialog box give you a jumpstart on your page creation by quickly establishing the basic CSS framework (see Figure 9).

The layouts represent the most common types of designs seen on the web today in the form of one-, two-, and three-column layouts with or without headers and footers. You can choose any of several fixed-width layouts, liquid layouts (which fill a percentage of the browser window), or elastic layouts (which expand or contract based upon the font size selected in the browser), or you can select a hybrid layout (which is a combination of the liquid and elastic layout). To learn more about leveraging the CSS layouts in Dreamweaver, see Understanding the New CSS Layouts in Dreamweaver CS3. To take your Dreamweaver and CSS knowledge even further, check out Mastering CSS with Dreamweaver CS3 and Mastering CSS with Dreamweaver CS4, which are project-based books we wrote to help you learn how to work with the CSS layouts in Dreamweaver.

Using the CSS Styles panel

The CSS Styles panel was introduced in Dreamweaver 8 and has been updated in both Dreamweaver CS3 and CS4. The panel is divided into two views: All and Current. The All view displays a list of all of the embedded CSS rules along with the rules contained in each of the linked style sheets. Selecting a rule displays all of the properties associated with it in the bottom half of the panel.

In the Current view (shown in Figure 10), the panel reacts to the selected element in any view, including Live view. If there is a rule defined for the selected element, the properties are displayed within the panel. The Current view is divided into three sections: Summary, Rules, and Properties. The Summary section provides a summary of all of the properties currently applied to the selected element. Hover over a property/value pair in the Summary section to display information about which style sheet the rule is defined in.

The Rules section gives you a view of the cascade of rules influencing the presentation of the element. Selecting an individual rule from the Rules sections displays its properties in the Properties section along with a strikethrough if the property is being overridden for any reason. Hovering over a rule here will show you its specificity. This can be extremely helpful when a property isn't being applied as you would expect. It'salsoa great learning tool.

Finally, a property can be modified, added, or deleted directly within the Properties section.

Staying organized

As you create a page based upon one of the CSS layouts, you will be asked where the CSS rules for the page should be created, either embedded within the head of the document or externally. As mentioned in the beginning of this article, many CSS experts prefer to establish the base framework for their pages working with embedded styles so they don't have to worry about disturbing other pages within the site. Of course, once the framework is customized, the CSS styles should be externalized. This can be easily done with another feature that was introduced in CS3.

Using the CSS Styles panel's All view, click to select the styles that need to be externalized. Then right-click and choose Move CSS Rules from the context menu (see Figure 11). You can select an existing style sheet or create a new one. Should you choose to move the rules to an existing style sheet where there is already a rule defined with the same selector name, Dreamweaver will ask you if you want to overwrite the rule, or simply append the rule to the style sheet.

Applying design-time style sheets

As noted previously, there are times when Design view does not accurately reflect how the page will appear in the browser. Although you can use Live view to ensure that the page will indeed render as desired, there are times that you want the Design view to render more closely to the final result in the browser. Dreamweaver design-time style sheets allow you to easily apply a style sheet within Dreamweaver to make the page more easily editable in Design view. This style sheet is not placed on your live site (unless your client is using Adobe Contribute to edit the company's site since design-time style sheets are applied sitewide in Contribute). From a best practice viewpoint, this feature is especially useful.

Design-time style sheets are particularly helpful for developers who are using style sheets that will be housed on the server side (with, for instance, PHP or ColdFusion application servers) or accessed with JavaScript on the client side.

To use a style sheet at design time, you first need to create the external style sheet. Then choose Design-time from the context menu in the CSS panel and browse to the style sheet (see Figure 12). Be aware that design-time style sheets must be applied to each page and don't need to be uploaded to the server.

Checking browser compatibility

Even if your page looks perfect in Live view, there is still the risk that something might not render correctly in a given browser—especially one in particular (you know who we're talking about). Dreamweaver CS4 allows you to check your page for some of the more common CSS issues. Click Check Page at the top of the document window to run the Browser Compatibility check (see Figure 13). If potential issues are found, you can read more about the problem and immediately locate the possible solutions to the problem on the CSS Advisor section of the Adobe website. The CSS Advisor site is a community-based wiki with loads of browser rendering issues and possible solutions defined. It's a great resource for the bugs Dreamweaver can't check for as well.

One of the least known features of Dreamweaver is its complete customizability. Almost every aspect of the program can be customized, including the way in which your CSS is written. Many CSS professionals prefer to optimize their code by writing shorthand CSS. By default, Dreamweaver writes verbose CSS. For example:

However, by modifying Dreamweaver preferences (see Figure 14), you can set up Dreamweaver to write shorthand. The example above would be written as:

Additionally, Dreamweaver allows you to completely control
the formatting of the CSS using the Code Format section in the Preferences
dialog box (see Figure 15). If you've inherited a style sheet that has not been
written in the style you prefer, you can have Dreamweaver change the formatting
to your preferred style by choosing Commands > Apply Source Formatting.

Where to go from here

With all of the changes to Dreamweaver over the last several versions, working with CSS within Dreamweaver has not only become easier, it has also become much more reliable. This article has highlighted some of the best practices for working with CSS in general and specifically within Dreamweaver CS4. For more information about CSS, visit the CSS topic section on the Adobe Developer Connection, or check out our books, Mastering CSS with Dreamweaver CS3 and Mastering CSS with Dreamweaver CS4 published by New Riders.