Three Kinds of Cascading Style Sheets
There are three kinds of cascading style sheets, namely, external, embedded, and inline. The purpose of each kind is explained as follows:
- An external CSS keeps all the style definitions in a separate CSS file that you include in a Web page at runtime by using the tag to apply the style sheet to the page.
- An embedded CSS is a style sheet that gets copied physically into the head of the Web page and applies to the Web page as a whole.
- An inline CSS is a style sheet that applies to only one page element so it gets copied "inline" on the page with that element.
In this course, you will probably work on a project that consists of several Web pages. When a site has many pages, it makes most sense to use an external style sheet, that is, a CSS file in which you define the style classes and rules to be used all across your site. An advantage of using an external style sheet is that you can change the look and feel of the site by modififying a single CSS file instead of needing to modify all the individual pages at your site.
Creating Style Sheets with Dreamweaver
Dreamweaver contains powerful support for creating and modifying style sheets. The latest version is particularly strong in its stylesheet support. An enlightening exercise is to pull down the Dreamweaver CS3 File menu and choose the option to create a new HTML file. Dreamweaver will prompt you to select a layout from a long list of choices ranging from a single column to three-column layouts with headers and footers. Try one of the simpler designs at first. In Design view, you will see how Dreamweaver creates the requested layout. Then have a look at the HTML code of the page. In the head section of the document, notice how Dreamweaver inserts an embedded style sheet (in between the style start and stop tags) consisting of the style rules that define the page. In the midst of the style rules, you will see how Dreamweaver prints extensive documentation explaining the reasons why it did it this way. Studying these Dreamweaver comments can provide you with important insights into the finer points of CSS Web design.
If you find a design you like while playing with Dreamweaver this way, you can easily convert the embedded style sheet into an external style sheet. To do so, you simply copy into a blank file the style rules that appear in between the document's style start and stop tags. When you save the file, give it a css filename extension, such as three-column.css. Then you can delete the embedded style sheet, and in its place, link the css file you created. To create the link, you can drag the style sheet from Dreamweaver's Files pane and drop the sheet into the head section of your Web page.
CSS Video Tutorials
There are two style sheet movies in the video section of this course Web site:
In addition, there are style sheet video tutorials in the Adobe CS3 video workshop and the Safari library.
