ONLINEPROOFINGSERVICE.COM

website templates - www.onlineproofingservice.com

Menu


modified from a document that uses a template. After looking over Figure 8-1, you may be thinking that CSS looks kind of complicated.


Well, to be perfectly honest, it is. In fact, I want you to know that you cant read only this chapter on CSS and become proficient enough to write your own CSS code. Even experienced Web designers face a steep learning curve in becoming proficient with CSS. What I can tell you in this chapter is how Dreamweaver handles CSS so that you can implement it quickly and easily. This chapter gives you the introduction you need to use style sheets effectively, but if you really want to learn all the details of style sheets, I suggest that you explore some other, more complete resources on CSS, such as CSS Web Design For Dummies, by Richard Mansfield (published by Wiley Publishing, Inc.). If you happen to know some CSS already, and youre advanced enough to be able to hand-code CSS, Dreamweaver includes a cool feature named Code Hints. Code Hints offer autocomplete options for filling in code that speed up the manual coding process. Code Hints work only in Code view and activate as you type new CSS declarations. You can also force the list of Code Hints to appear by pressing Ctrl+spacebar (or "+spacebar on the Mac). Figure 8-1: A style sheet embedded in an HTML document. Chapter 8: Cascading Style Sheets 201 "So whats all this about cascading?" The term cascading refers to the way in which conflicts in CSS rules are resolved. Because styles can be attached to documents in multiple ways, and the properties can be invoked in multiple ways, the browser must interpret these style rules in a certain order. This hierarchical order works in kind of a top-down fashion, in much the same way water cascades over rocks as it flows down a stream. The benefits of this cascading process become apparent when you define multiple style choices in your style sheet. Cascading Style Sheets enable you to define a variety of presentation possibilities that are rendered in the browser. CSS is set up this way to help compensate for the many variables that affect how pages display on the Web, such as differences among computer platforms, screen resolutions, and browser versions. When you define the design of your page by creating CSS rules, items first in the list receive lower priority. As the browser cascades down the list, the later rules receive greater priority, so that a style rule very close to a page element usually takes precedence over a rule in an external style sheet. This concept becomes clearer as you become more familiar with how CSS operates. (You find out what happens when you apply conflicting styles in the section "Conflicting styles," later in this chapter.) Advanced capabilities of CSS When designers are introduced to CSS, they often get excited about the capability to control and format text in ways that were never possible with straight HTML. But the CSS fun doesnt stop there! Besides helping you to format your text, CSS also encompasses a host of other geeky techniques that enable you to control the layout and appearance of page elements. CSS forms the basis of layers (which you can read more about in Chapter 9), even though you wouldnt know it without looking closely at the code on your page. Layers are an advanced CSS implementation that enable you to precisely position objects on your page, stack them one on top of the other, and even add interactivity to elements. Interactive effects with layers can