Cascading Style Sheet Basics in Adobe CS5 Dreamweaver - dummies

Cascading Style Sheet Basics in Adobe CS5 Dreamweaver

By Jennifer Smith, Christopher Smith, Fred Gerantabee

Adobe Creative Suite 5 (Adobe CS5) Dreamweaver uses Cascading Style Sheets (CSS) to format web page text and even offers starter pages that have model CSS layouts and styling hints.

Using Cascading Style Sheets (CSS) is a standard method for styling text and other elements on web pages. The powerful style sheet design tool allows you to assign properties to type and other page elements quickly and update all instances in a few easy steps. The name Cascading Style Sheets refers to the cascading rules which apply when several styles (and style sheets) are used at the same time.

If you apply many different styles to a page, whether they’re internally built on the page or linked to external style sheets, you may have conflicts. Conflicts occur when two (or more) styles assign different properties to the same element.

For example, if you specify in an internal style sheet that any bolded element is blue but an external style sheet instructs the browser to display any bolded element as red, which style wins? The blue instruction from the internal style sheet wins. By default, the web page’s style sheet overrides the browser’s default values.

Style sheets are consistent across most modern browser versions, but some older browsers may not provide consistent (if any) support for CSS. Always preview pages in multiple browsers or use the Check Browser Compatibility button (located under the Check Browser Compatibility list on the Document toolbar) to test CSS properties you’ve used against a variety of browsers and versions.

Dreamweaver CS5 uses Cascading Styles Sheets (CSS) exclusively to format text and no longer provides direct support for <font> tags. You can still add <font> tags if you absolutely need to by choosing Insert→Tag.

Dreamweaver offers CSS starter pages that have CSS layouts available and that include CSS hints visible only in Code view. Find the CSS starter pages by choosing File→New→Blank Page→HTML Template.

Helpful CSS tips are built into the CSS starter pages.
Helpful CSS tips are built into the CSS starter pages.