External CSS style sheets are useful if you want to ensure that the formatting of all of the elements on your Web site is uniform. The advantage of CSS Style sheets is that you can easily change the appearance of an entire Web site without touching any of the content. This may be much more efficient than using embedded styles, which require that you make alterations to each individual page. Using embedded styles also leaves much more opportunity for error.
Attaching an External CSS Style Sheet to a Page or Template
Another great feature about external CSS style sheets is that you can attach them to pages that you have already created. In this case, all of the HTML tags on the page are affected by the formatting rules that you have created for the style sheet. For example, if the external style sheet indicates that all paragraph text will appear in Helvetica 12-point black, then all of the text in your Web page that is wrapped in the <p> tag will change to Helvetica 12-point black when the style sheet is applied to the site.
In order to attach an external style sheet to a page, use the Attach Style Sheet button in the CSS Styles panel to open the Attach External Style Sheet dialog box. In this dialog box, look for the name of the external style sheet file you want to attach. Indicate here whether to link or import the file. In general, it is a good idea to link the file. This way, the content of the page is separated from the style sheet file.
When you have created a Web site in which the pages are based on a template, you can simply attach an external style sheet to the template itself. This will save a lot of time and effort because you don’t have to attach the style sheet to every page in the site. You only have to complete the process once, when you attach it to the template file. In this case, the template will be directly affected by any alteration you make to the style sheet. The template will then update all of the pages to which it is attached.
Adding Hyperlink Styles to a CSS Style Sheet
External style sheets can also be used with links in a Web site. To create styles for all the links in your site using external style sheets, you must first open the style sheet in the document window. Then, open the New CSS Rule dialog box and click the Advanced option button. Choose one of the selectors from the Selector list. Clicking OK will open the CSS Rule Definition dialog box. Here, you can decide how you want the link to be formatted.
Adding Custom Code to a CSS Style Sheet
One way to make changes to a style sheet is to add code to it. To do this, you must first open the style sheet file in the document window. Then, click the place in the sheet where you want to add code. Then insert your code. For example, you can add code to the body tag of the style sheet that changes the background color of all tables on the page from red to pink
An External Style Sheet can be created by copying what is between style tags in the head content after you format your page using "Page Properties" and pasting it into the code view of a DW document (you can also highlight the code in between the style tags and use the File>Export>CSS Styles... command). You must then save the document with a .css extension.
Here is what the content of a .css documents looks like:
body,td,th {
font-family: Georgia, Times New Roman, Times, serif;
font-size: 14px;
color: #FFFFFF;
}
body {
background-color: #000000;
margin-left: 24px;
margin-top: 12px;
margin-right: 24px;
}