Dreamweaver CS5: The Missing Manual

Moving and Managing Styles

In the old days, when CSS support in web browsers was new, web designers would create just a handful of styles to format headlines and text. Keeping track of a site’s styles back then wasn’t too hard. Today, with great CSS support in web browsers and CSS-based layout becoming the norm, it’s not uncommon to create a style sheet with hundreds of styles.

You might want to take a really long, complicated style sheet and split it up into several smaller, easier-to-read external style sheets. One common web design practice is to store styles that serve related functions in separate style sheets—for example, all the styles related to formatting forms in one style sheet, styles for text in another, and styles for page layout in yet another. You can then link each of the external style sheets to your site’s pages as described on Applying IDs to a Tag.

Even if you don’t have enough styles to warrant multiple style sheets, it’s still useful to organize the styles within a style sheet. Web designers frequently use this strategy; for example, they keep all the styles for basic layout in one section of a style sheet, basic tag selectors in another section, and specific styles for text, images, and other content grouped according to the part of the page where they use them (sidebar, banner, and so on). By grouping related styles, it’s a lot easier to find any particular style when it comes time to edit it.

Fortunately, you don’t need to venture into Code view to move styles ...