- Creating and Applying a Custom Style
- Exploring Style Settings
- Redefining the Heading 3 <h3> Tag
- Positioning a Layer with a Style
- Creating a Hyperlink Rollover
- Creating an External Style Sheet
- Transforming the Property Inspector
- Converting Styles to HTML Markup (<font> Tags)
- Saving HTML Markup as an HTML Style
- Summary
- Q&A
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating an External Style Sheet
Adding styles to a single Web page is nice, but wouldn't it be great to apply the same styles to a number of Web pages? External style sheets allow you to do this. Instead of defining styles in the head of a Web page, all of the styles are defined in one text file. External style sheets end with the .css file extension. When you update a style in an external style sheet, the changes apply to every page that is linked to that style sheet.
To create a external style sheet
-
Create a new style, and then select the top radio button beside the Define In section of the New Style Dialog Box. Select (New Style Sheet File) from the drop-down menu beside the radio button, as shown in Figure 15.11. Select the OK button.
-
The Save Style Sheet File As dialog box opens. Browse to the directory where you want to save your external style sheet. Enter a filename, as shown in Figure 15.12, followed by the .css file extension. Click OK.
The Style Definition dialog box opens. Notice that the title bar says that you are defining this style in the external style sheet name that you just created. Create and save your style as you did earlier this hour.
){kind=link}
Figure 15.11 Select the (New Style Sheet File) to define a new external style sheet.
){kind=link}
Figure 15.12 Create an external style sheet by browsing to the correct folder and saving a file with the file extension .css.
When you create an external style sheet, Dreamweaver creates a new file and places the style definitions in it. Dreamweaver also references the external style sheet in the head of your Web page. To add additional styles to the external style sheet, select the name of the external style sheet from the Define In drop-down menu when you are defining a new style, as shown in Figure 15.13.
){kind=link}
Figure 15.13 Select an external style sheet from the Define In drop-down menu to create a new style in the external style sheet.
After you create styles, you may need to edit them. You can edit styles that are both internal to a Web page and contained in an external style sheet. To edit a style, select the Edit Styles radio button in the CSS Style panel. Styles are listed as in the current document (the <head> of the document) or in the external style sheet, as shown in Figure 15.14. Double-click any of the styles to open the Styles Definition dialog box. Edit the style and save your changes.
){kind=link}
Figure 15.14 Easily edit CSS Styles by double-clicking them in the Edit Styles view of the CSS Styles panel.
TIP
If you already created some styles in a Web page before you decided to use an external style sheet, use the Export CSS Styles command under the Export submenu in the File menu. Link to this file, using the Attach to Style Sheet button at the bottom of the CSS Styles panel, instead of creating a new file.