Creating an External Style Sheet in Dreamweaver CS4
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
External style sheets are separate files with .css filename extensions that are linked to HTML Web pages. Those CSS files define page attributes for every page to which they are linked.
External style sheets have many powerful advantages that make them ubiquitous in professional Web sites:
- They can be applied to any number of pages.
- They can be used to instantly update the look and format of every page to which they are attached.
They ensure a uniform, global look and feel to a Web site by applying uniform formatting to every page in the site.
The easiest way to generate a CSS (style sheet) file in Dreamweaver is to create a new style. As you do, you'll have the option of including that style in a new CSS file. In the following steps, you'll define a style and save it in a new style sheet. These steps can be adapted to generate a CSS file using any tag as the initiating style.
- In the Document window, click the New CSS Rule icon at the bottom of the CSS Styles panel (see Figure 1). The New CSS Rule dialog appears.
- In the Selector Type area of the dialog, choose the type of style you want to define.
- Choose Class to apply formatting rules, which are independent of tags, to any selected text. If you are creating a Class style, enter a name for your style in the Name box.
- Choose ID to define a style that will apply to just one HTML tag.
- Choose Tag to define formatting for HTML elements, such as headings, paragraphs, images, tables, or pages. When the Tag radio button is selected, every HTML tag appears in a pull-down menu next to the Tag field.
Choose Compound to let Dreamweaver select a style type automatically based on the HTML tag you have selected.
- Choose (New Style Sheet File) from the Rule Definition pop-up menu (see Figure 2).
- Click OK in the New CSS Rule dialog. The Save Style Sheet File As dialog appears. This is a typical Save As dialog except that it automatically generates a CSS file with a .css file extension and translates any formatting you define into CSS coding. Navigate to the folder in which you want to save the style sheet and enter a filename in the Save As field. Then click Save to generate the new CSS file.
- After you click Save, the CSS Rule Definition dialog for the style you are defining opens. Different categories in the Category list offer formatting options for different kinds of page elements. Now, simply note that there is a wide array of formatting options available and that whatever formatting options you define will be encoded into the CSS file you named and saved in step 4 (see Figure 3).
- After you create a style sheet file, the file is visible in the CSS Styles panel. When you expand the CSS file (click the triangle next to it to toggle to expand), all styles within the style will display. Formatting attributes display at the bottom of the CSS Styles panel (see Figure 4).
After creating a CSS file, you add styles to the file without creating a new style sheet. So, once you have created your first style and generated a CSS file, the next time you create a new style, click the New CSS Rule icon in the CSS Styles panel, but this time simply accept your existing CSS file in the New CSS Rule dialog (see Figure 5).
)
)
)
)
)