After completing this tutorial you will be able to:

• Use Style Sheets
• Work with Cascading Style Sheets
• Apply Style Sheets to Multiple Pages
• Link to External Style Sheets

Defining Style Sheets

Style sheets offer control and standardization over an entire page or even on a site-wide basis. They’re flexible enough to let you handle specific custom situation that need to override the global settings as well.

When you want to set one local bit of text to a particular style, you’re better off using plain old HTML styles. For instance, if you want to italicize a particular word or phrase, just set it to italic using the normal methods.

Style sheet is best used for global situations, where several different bits of text need to be handled in a standardization manner. For example, suppose that you are creating a major Web site with dozens on even hundreds of pages, and you want to set all the H1 headings to use Arial font. That’s a lot of work if you do it all by hand on each page, but it’s child’s play to do it with cascading style sheets.

Cascading style sheets are called that because there is an order of procedure involved. Styles can be applied as follows:

• External style sheets can be linked to pages
• Each page can have its own embedded style sheet (within the HEAD element)
• Within a page, a particular bit of text can have its own styles

It’s quite possible for the instructions from one of these to conflict with others. When this happens, the Web page designer needs to know what to expect.

The solution is that the precedence cascades, or passes downward, much like an object going over a waterfall. An external style sheet has the lowest level of precedence. If a web page has both an external style sheet and an embedded one, the embedded one takes precedence in the event of a conflicting instruction. If there’s an element within the Web page that has its own style setting, that particular style will override both an embedded style sheet and an external one.

Cascading style sheets don’t just deal with conflicts. They also cover settings that overlap without conflict. Say, for instance, that you have the H1 (large heading) element defined as italic in one style sheet and red in another one. If both style sheets affect the same document, then these effects will be merged to produce red, italic H1 elements in that document.

Using style sheets takes a hit more work overall than simply occasionally applying a style on a local basis. Depending on the project you’re working on, it may or may not be worth it for you. If you’re designing a short, stand-alone Web page with a small amount of text, then it’s clearly not a job for CSS. On the other hand, if you’re going to create large projects, especially sites with multiple pages on which you want a consistent textual appearance, using CSS can save you time.

Dreamweaver frees you from concerning yourself with the details and syntax of style sheets. All you need to do is to tell it what styles you want on your Web page, and it will take care of the rest.

Linking to other files

The Link object is used to indicate a relationship between the current page and another page or file. Although there are many other intended uses, the <link> tag is most commonly used to apply an external Cascading Style Sheet (CSS) to the current page. This code is entered automatically in Dreamweaver when you create a new linked style sheet, but to apply an existing style sheet, you need to use the Link object. The Link tag is also used to include TrueDoc dynamic fonts.

To insert a Link object, first choose Insert _Head _Link or select the Insert Link object from the Head panel of the Objects palette Illustrated below).



This opens the Insert Link dialog box, shown in Figure 2-1.



Next, enter the necessary attributes:



Aside from the style sheet use, there’s little browser support for the other link functions. However, the W3C supports an initiative to use the <link> tag to address other media, such as speech synthesis and Braille devices, and it’s entirely possible that the Link object will be used for this purpose in the future.