ONLINEPROOFINGSERVICE.COM

photographer web design - www.onlineproofingservice.com

Menu


Are style sheets making you crazy? If you choose to format text or other elements on your pages without using style sheets, you


may be frustrated with some of Dreamweavers automated style sheet features, which try to create style sheets for you and can alter styles when you apply formatting manually. Dont fret, you can turn off these automated CSS features in Dreamweaver by choosing Edit?Preferences, and then unchecking the Use CSS instead of HTML Tags option in the General panel. Looking at the code behind CSS A Cascading Style Sheet is basically a list of rules defining the behavior of an HTML document. HTML already contains a bunch of rules about the behavior of different tags, but without CSS, you cant alter those rules - theyre kind of like the grammar rules in a language. CSS, however, enables you to create your own rules and override the rules of HTML, which are quite limited in terms of page design. These new rules determine how a browser displays certain page elements. Imagine if you could invent a bunch of new words and grammar rules for the English language. Now imagine that everyone else could do that too. Communication could get confusing pretty quickly, right? What keeps the communication from breaking down with CSS is that every time you invent new rules, you include the equivalent of a dictionary entry and grammar guide that goes along with each document. This is the style sheet. CSS styles reside in the <HEAD> area of an HTML page if they apply to only that page, or in a separate file if you create an external CSS that applies to multiple pages. A style sheet consists of lines of code that are grouped into rules. A style sheet can contain any number of rules, and each rule contains a selector and a declaration block composed of one or more properties and a corresponding value. If this stuff is starting to sound a little confusing, dont worry. You find step-by-step directions later in this chapter, and Dreamweaver hides most of the technical stuff behind the scenes (unless you like to look at the code). To give you an idea of what CSS looks like, Figure 8-1 illustrates the various components of a style sheet. 200 Part III: Advancing Your Site Using CSS with templates Templates, as described in Chapter 4, are ideally suited for use with CSS because theyre geared toward a collaborative work environment. With Dreamweaver, you can use both internal and external styles sheets in a template. In fact, using external style sheets makes a great deal of sense when using templates because the formatting of the page is separated from its content. To save a page with CSS info as a template, just choose File?Save As Template. Any template you create that contains internal styles or links to external styles automatically updates whenever its style sheet changes. With templates, both the link code at the head of the page and any internal styles are locked regions by default. Users are prevented from editing the style sheet definitions, but they have an ideal way to manage the look and feel of a site via formatting specifications that cannot be