| In this section, we take a look at CSS's "reason for being," talk a bit about the versatility and structure of CSS markup, and explain some of the lingo you will need when working with CSS in Dreamweaver MX 2004. Afterwards, the final section in this chapter discusses the specifics of using CSS within Dreamweaver ”specifics that have changed in some evolutionary and very useful ways since the previous version. The Evolution of Style In the early days of HTML, tags were merely intended to provide structure for content, specifying that selected content should be contained in a table, for example. The actual display of this structure was left to the browser. Each browser had its own variations on the font size of a heading or whether it should appear in bold or italics. When designers wanted to present their material in a visually appealing manner, new tags and attributes were developed and Web design became much more complex. The form and function of HTML pages became confusingly intertwined, and adherence to HTML standards went by the wayside. Now the standards pendulum is swinging the other way, and the current movement in Web design is to separate document structure from presentation to achieve greater document formality . Web designers aren't about to give up their hard-won control over the visual presentation of their material, however, so leaving display totally up to the browser is unacceptable. Enter the Cascading Style Sheet (CSS). Designing Beyond HTML CSS meets the requirement of separating form and function while also expanding the design possibilities beyond HTML. Font control, color management, margin control, and page layout are only a few of the design elements that CSS improves . Perhaps the greatest advantage of style sheets is their updatability. When presentation is intermingled with the content and structure of the page, each change to font color or size must be made individually. Using CSS, a change to the style sheet updates any and all iterations of that style. If you're using an external style sheet, changes can ripple through to every site page that's linked to that style sheet. In some cases, you can give a site an entirely new look without touching a single page of HTML. CSS is one of the critical components of Dynamic HTML (DHTML), along with HTML and JavaScript. DHTML can make pages come alive with layers . It's also a means of providing interactivity for site visitors . CSS Versus HTML Styles Dreamweaver has always offered both CSS and HTML Styles, but the MX 2004 version has deemphasized HTML Styles almost out of existence. Although they both control the style and appearance of a document, their functionality is quite different. You can apply CSS to a wide range of HTML tags, either by redefining the tag itself or by adding a class attribute. CSS can be defined within the HTML document or in an external file, which in turn can be linked to multiple HTML documents. You can also modify CSS by changing the CSS declaration itself, with those modifications automatically applied to each occurrence when rendered in the browser. HTML Styles provide a way to describe presentational attributes from within HTML ”not CSS ”to stylize a page. These are much more limited. Rather than serving to separate structure from presentation, these styles let you more easily apply inline formatting. They can be applied only to paragraphs or blocks of selected text, so they can't be used to format the appearance of a table or layer. The styles are applied with font tags, which cannot be used in Strict HTML and XHTML. HTML Styles are useful only if you're designing for really old browsers that most likely can't interpret CSS. Under more usual circumstances, however, CSS is far preferable as a means to apply style. Macromedia has even dropped the HTML Styles panel from Dreamweaver MX 2004, signifying that HTML styles are "out" and CSS styles are "in." Given that fact, in combination with the other limitations just mentioned, we won't go into HTML styles in more detail here. Cascading Style Sheets Although Cascading Style Sheets are far more powerful than HTML Styles and are the preferred method for applying styles to a site, no browser completely supports all of CSS, although the most recent versions of each major browser come close. Unlike HTML Styles, CSS truly separates presentation from structure. Deprecated tags are avoided, making CSS the perfect choice to use with Strict DTDs. Styles can be applied to any tag or even to a specific class of that tag. Inside CSS Markup CSS properties can be applied to a wide range of elements. To use these properties, you first create a rule for the display of a particular tag. A rule is the fundamental unit of CSS, and is made up of the following components: -
Selector ” The element to which you're applying the style. If you want to format the paragraph tag to display text in burgundy, for example, the selector is the <p> tag. -
Declaration ” The properties and values that describe how to display the selector, including -
Property ” The property of the selector being modified, such as the color, size, font, margin, or position. For example, to display the burgundy paragraph text, you must modify the color property. -
Value ” The setting for the property. For burgundy paragraph text, for example, the value of the color property is #660033 . When you put these parts together, the result is a rule that looks like this: p {color: #660033;}
Notice the declaration is enclosed in curly brackets. A rule can contain multiple declarations within the brackets, each separated with a semicolon, like this: p { color: #660033; font-family: Trebuchet, san-serif; font-size: 14pt; text-align: center; }
This results in centered, burgundy text in either the Trebuchet MS font or a similar sans-serif font in a 14-point size. Grouping Declarations can also be used for multiple selectors at the same time, which is called grouping : p, h1, h2 {color: #660033; font-family: Trebuchet MS;}
This rule defines a style for the paragraph, heading 1, and heading 2 tags. NOTE The semicolon is important for separating declarations, but it's optional after the last declaration in a rule. If you forget to include a semicolon between declarations, the entire rule might be ignored by a browser. It's best to just get into the habit of always adding a semicolon to the end of declarations, including those at the end of a rule.
You can use grouping in style declarations, too, such as with font properties. A typical body style might look like this: body { font-family: Trebuchet MS, san-serif; font-size: 13pt; line-height: 14pt; font-weight: bold; font-style: normal; }
Grouping the arguments can shorten the style to the following: body { font: bold normal 13pt/14pt Trebuchet, san-serif; }
When grouping arguments, the order of the properties is very important. Although font-style is the last declaration in the expanded rule, it is the second value listed in the shorthand declaration. Also notice that no commas appear between the values, other than the one separating the font family values. NOTE The ungrouped example also shows how an extensive style rule can be declared over multiple lines. The selector and opening curly bracket are placed on the first line, and each property/value group is displayed on another line, ending with the closing curly bracket on the last line.
Nesting Style Let's say you want to define all paragraph text to be burgundy except when it's contained in a table ”you want that text to be dark blue ( #333366 ). The style sheet for these rules would appear like this: p {color: #660033;} td p {color: #333366;}
Unlike the structure of a rule being applied to multiple tags, the second rule in this style sheet doesn't separate the selectors with a comma. This lack of a comma is what tells the browser to render the style only when the tag is nested as such. Selectors: HTML, Classes, and IDs Several types of selectors exist: -
Element selectors ” Refer directly to an HTML element, such as p , h1 , a , and so on. -
Class selectors ” Class selectors can be considered "custom" selectors that you intend to use more than once within a document. They are defined with a name preceded by a period, such as .bodytext , followed by the style declaration. They are applied within the HTML document if you use the class attribute: <p class="bodytext">This paragraph will take on the style you've defined for the class selector "bodytext".</p>
-
ID selectors ” ID selectors begin with a hash mark ( # ) instead of a period. They are called on in the document with the id attribute. Unlike class selectors, a specific ID is used only once within a document. Posting a recipe is an example of the use of class selectors. You might want the ingredients list to appear in a large font size in burgundy. The directions can appear in a smaller size in dark blue, and the nutritional information could appear in an even smaller size in black. You can declare each of these styles as a different class. Class tags can be defined in two ways. If the style is to be applied only to paragraphs of a particular class, you can define the class within the paragraph selector. On the other hand, if you want the style to be available to a wide range of elements, such as to headings and list items as well as paragraphs, you can define the class as a selector itself. Thus, the style rules for the previous example could appear as follows : .ingred {color: #660033; font-size: 13pt;} p.direct {color: #333366; font-size: 11pt;} p.nutri {color: #000000; font-size: 9pt;}
Notice in the example that the directions and nutrition information classes are defined as being a subset of the paragraph element, whereas the ingredients are defined as a standalone class. This is because ingredients can appear either in paragraph format or in lists. Defining the classes this way gives you the flexibility to apply the styles where they're best served . In the HTML document, the classname appears wherever the style should apply: <p class="direct">Directions</p>
To apply a class style to a selection instead of an entire paragraph, use the <div> and <span> tags with the class attribute. When giving recipe directions, the name of each ingredient can appear in the .ingred class style ”yet another reason to define that class independently of a tag element. The directions would appear as such: <p class="direct"> Heat oven to 300 degrees F. Place aluminum foil on cookie sheet; generously brush with 1 tablespoon of the <span class="ingred">oil</span>. Arrange <span class="ingred">tomato halves</span>, cut sides up, in single layer on foil; brush with 2 teaspoons of the oil. Sprinkle with <span class="ingred">sugar</span>, <span class="ingred">salt</span> and <span class="ingred">pepper</span>. </p>
Figure 8.1 shows how a recipe appears in the browser when this style sheet is used. Figure 8.1. This recipe applies the three classes declared in the style sheet. 
Link Classes One of the most common uses of style is to format links to suit the design of a site. The a tag can be styled to remove the underlining on links. Links have four states ”active, hover, link, and visited ”and each of these states can be defined separately in a style sheet. The active state of the link is when it's clicked by a user . The hover state displays when the mouse is over the link, whereas the link state applies to links that have not been visited. The visited state is how links are displayed after they've been recently visited. You can customize these pseudo-classes in the Page Properties dialog box, now accessible via a button on the Property inspector. |
Style Integration HTML documents can use style sheets in three primary ways. The relating of a style sheet to a document is referred to as integration . The location of your style rules is just as important as the declarations within them. External CSS An external style sheet is also called a linked style sheet because it's a separate document that is linked to one or more HTML documents. This type of style sheet offers the greatest amount of flexibility because changes to the style sheet update the display of every page from which it's linked. You can create a new external style sheet from one of several Macromedia-supplied examples by choosing File, New, and selecting CSS Style Sheets in the Category column. External style sheets simply contain the rules you define for your page or site, and they're saved with a .css extension. To apply the style sheet to an HTML document, you add a <link> tag to the head of the HTML document, such as <link rel="stylesheet" href="cooksite.css" type="text/css">
This link must be added to the head of every HTML document that uses the style sheet. To modify the appearance of a site, simply edit the style sheet. Whenever a page is viewed in a browser, the current CSS rules are adopted. NOTE Dreamweaver can display many styles in the Document window, whether they're applied internally or from an external style sheet. In fact, the latest version of Dreamweaver displays CSS styles with significantly greater accuracy than ever before. Some styles, however, can be displayed only in a browser. When testing your style sheets, use the Preview in Browser feature of Dreamweaver.
Internal CSS Internal style sheets, also known as embedded or unlinked style sheets, are used to control a single HTML document. The style rules are placed in the <head> of the document in a <style> tag pair, such as the following: <head> <title>Cook's Corner</title> <style> <!-- p {color: #660033;} p.ingred {font: 12pt Trebuchet MS;} --> </style> </head>
Notice the actual style rules are contained in a comment tag. This is to prevent them from being displayed as regular text in a browser that doesn't support the <style> element. Applying Styles in a Tag The third type of style, the inline style, is an attribute applied directly to a tag within the body of the HTML document, such as <p style="color: #660033;">There are three new recipes.</p>
Inline styles can also be used in <div> and <span> tags to apply a style to a selection. This method gives you complete control over that particular instance of that specific element, but it doesn't apply the style anywhere else within either the document or the site. Thus, the inline style is most useful for exceptions to either the default display or an internal or external style sheet. It's far less easy to update inline styles, so they generally shouldn't be used as a matter of course. Understanding the Cascade Order The three main types of style sheets aren't mutually exclusive. In fact, you can use various style sheets together to gain a great deal of control over the presentation of your site. Using the cooking site as an example, the overall design of the site would use an external style sheet containing rules for sidebar text, body content, and other site-wide elements. The recipes appear on only one page, however, so the recipe styles can be embedded internally onto that page. If a particular recipe has special instructions you want to emphasize , you could apply an inline style to that selection of text. The cascading nature of CSS means that we need a precedence convention when rules conflict. The closer a style declaration is to the content it's defining, the more precedence it has over that content. In other words, if an inline style contradicts an external style sheet, the inline style takes precedence because it's closest to the actual content. Inheriting Properties Certain HTML tags exist only within other tags. The <body> element contains all the page's content and its markup. The <body> tag is the parent, and all the tags within it are considered children of this element. For another example, table rows and cells appear only within <table> tags. Children may inherit the style applied to their parent tag unless the child tag itself is defined. However, many style properties are not inherited; you'll see this effect in the new Relevant CSS tab of the revamped Tag Inspector, where non-inherited properties appear in a red strikethrough typeface. Browsers are becoming better about their capability to keep the containment hierarchy intact when it comes to inheritance of style sheet rules. There are still inconsistencies, however, especially when applying styles to tables. |
Choosing a Style Sheet Editor Now that you have a better understanding of CSS, you need to choose an environment for developing and maintaining your style sheets. Dreamweaver's Internal Editor Dreamweaver enables you to create and edit style sheets in several ways. The Dreamweaver Document window can also serve as a text editor (see Figure 8.2). Thus, you can create an external style sheet by opening a new document, manually adding style rules, and saving the document with a .css extension. Figure 8.2. This external style sheet can be modified in the Document window, as shown here, or in the CSS Styles panel. 
The most common method for managing both internal and external style sheets in Dreamweaver has been to use the CSS Styles panel in the Design panel group. The CSS Styles panel automates the style sheet process and offers an extensive array of style declaration options. In MX 2004, the panel has been enhanced in that you can now jump directly to style definitions in the code. However, you can no longer apply styles from the CSS Styles panel; you now use the Property inspector for that purpose. Setting an External Style Sheet Editor Although Dreamweaver offers powerful CSS tools, some experienced developers prefer to use a third-party style sheet application. The most popular of these applications is TopStyle by Bradbury Software (http://www.bradsoft.com). You can set Dreamweaver to use a third-party program for CSS editing (select Edit, Preferences, File Types/Editors), but before you do, make sure you familiarize yourself with MX 2004's new features. You may find, as we did, that the new Dreamweaver gives you most of what external CSS editors do, and more conveniently. | 