- Styling Text with CSS
- Creating a Class Selector
- Exploring Style Settings
- Redefining an HTML Tag
- Editing Styles
- Creating an External Style Sheet
- Understanding the Cascade
- Summary
- Q&A
- Workshop
- Exercises
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 a single web page, you define all the styles in one text file and link that file to every web page. When you update a style in an external style sheet, the changes apply to every page that links to that style sheet.
Exporting Existing CSS Styles
When you've created some CSS styles in a web page, Dreamweaver makes it easy to move them to an external style sheet. You can move the existing styles to an external style sheet with the .css file extension and then easily link that sheet to the web page. Perform the following procedure to move and link CSS styles:
- Select the styles to move in the CSS Styles panel, using Shift+click to select multiple styles.
-
Right-click the styles in the CSS Styles panel and select the Move CSS Rules command as shown in Figure 6.12.
Figure 6.12 Select the Move CSS Rules command to export styles to an external style sheet.
- Select the radio button next to A New Style Sheet.
- Name the new external CSS file and click the Save button. Dreamweaver automatically moves the selected styles into this external file and links it to the current web page.
- Move additional styles by repeating steps 1 and 2, but selecting the existing external style sheet instead of creating another new one.
- When all the styles in the CSS Styles panel are listed under the external style sheet, you can delete the embedded style sheet, the <style> heading. Select <style> and click the Delete button shown in Figure 6.13.
Figure 6.13 Use the Delete button to remove the unnecessary embedded style sheet code.
)
)
Creating an External Style Sheet from Scratch
You might want to start with an external style sheet before you create any CSS styles. This is the way I usually work. Of course, you can have as many style sheets as you need and I usually have at least two or three per website, each serving a different purpose. For instance, I usually have one external style sheet I name main.css that holds all the page layout styles (you'll learn more about using CSS for page layout in Hour 13). I might also have an external style sheet named nav.css that has all the navigational styles affecting links and buttons. If the website is large, I might have different style sheets that are specific to unique parts of the site. To create and link to an external style sheet, follow these steps:
- Select File, New, Blank Page, CSS.
- Click the Create button.
- Select File, Save and save the CSS file. You can name it nav.css and preferably save it in the directory in your website that holds CSS or script files.
- Close the new CSS file and return to the web page that has to link to the new CSS file.
- Click the Attach Style Sheet button in the CSS Style panel, shown in Figure 6.14.
Figure 6.14 The Attach Style Sheet button enables you to link a web page to an external style sheet.
- Click the Browse button and select the new external style sheet.
- Select the radio button next to Link.
- Click the OK button.
)
Saving CSS Styles in an External Style Sheet
After you create an external style sheet, you'll want to add any new CSS styles you create to the external style sheet instead of the 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 define a new style, as shown in Figure 6.15. As you create CSS styles, pay attention to where you save them. Of course you can always use the Move CSS Rules command that you used earlier this hour if you need to move a style to a different location.
)
Figure 6.15 Select an external style sheet from the Define In drop-down menu to create a new style in the external style sheet.