What you see on a Web page when you use garden-variety HTML tags like <h1>, <p>, and <ul>, pales in comparison to the text and styling on display in, say, a print magazine. If Web designers had only HTML to make their sites look great, the Web would forever be the ugly duckling of the media world. HTML doesn’t hold a candle to the typographic and layout control you get when creating a document in even the most basic word processing program.
Fortunately for us designers, we can change the ho-hum appearance of HTML using a technology called Cascading Style Sheets. CSS gives you the tools to make HTML look beautiful. If you think of HTML as the basic structure of a house (the foundation, walls, and rooms), then CSS is the house’s interior decoration (the paint, carpeting, and the color, style, and placement of furniture). CSS gives you much greater control over the layout and design of your Web pages. Using them, you can add margins to paragraphs (just as in a word processor), colorful and stylish borders to images, and even dynamic rollover effects to text links. Best of all, Dreamweaver’s streamlined approach lets you combine many of these design properties into powerful style sheets that let you control pages throughout your site.
CSS is a large topic. It’s also the heart of today’s cutting edge Web design. So instead of dedicating just a single chapter to the topic, this book provides instruction in the fine art of using CSS in nearly every chapter. In this chapter, you’ll learn the basics of CSS, and how to use Dreamweaver CS4’s powerful CSS tools. In the next few chapters you’ll learn how CSS can improve the look of common Web page elements like links, images, and tables. Once you’re comfortable with the basics, you’ll find in-depth information on CSS in Chapter 8. And, in Chapter 9, you’ll learn how to harness the power of CSS to fully control the layout of a Web page.
If you’ve used styles in programs like Microsoft Word or Adobe InDesign, CSS will feel familiar. A style is simply a rule describing how to format a particular piece of HTML. (A style sheet is a collection of these styles.)
You can create a single style, for example, that formats text with the font Arial, colored red, and with a left margin of 50 pixels. You can also create styles specifically for working with images; for instance, a style can align an image along the right edge of a Web page, surround the image with a colorful border, and place a 50-pixel margin between the image and the surrounding text.
Once you’ve created a style, you can apply it to text, images, or other elements on a page. For example, you could select a paragraph of text, and then apply a style to instantly change the text’s size, color, and font. You can also create styles for specific tags, so that all <h1> tags in your site, for example, are displayed in the same style, no matter where they appear.
In the past, HTML alone provided basic formatting options for text, images, tables, and other Web page elements. But today, professional Web designers use CSS to add style to their pages. In fact, the older HTML tags that were used to format text and other page elements have mostly been phased out by the World Wide Web Consortium (W3C), the organization responsible for defining standards for the Web, in favor of CSS. And following along with industry practice, Dreamweaver CS4 has made it impossible (unless you write the code yourself) to add obsolete HTML tags such as the <font> tag.
CSS has many benefits over just using HTML to design your pages. With CSS, you can format paragraphs to resemble those that appear in a book or newspaper (the first line indented and no space between each paragraph, for example), and control the leading (the space between lines of type in a paragraph). When you use CSS to add a background image to a page, you get to decide how (and whether) it tiles (repeats). HTML can’t even begin to do any of these things.
Even better, CSS styles take up much less space than HTML’s formatting options, such as the much-hated <font> tag. You can usually save a lot of kilobytes on text-heavy Web pages using CSS while maintaining a high level of formatting control. As a result, your pages look great and load faster.
Style sheets also make updating your site easier. You can collect all your styles into a separate file that’s linked to every page in your site. When you edit a style in the style sheet file (called an external style sheet), that change immediately ripples through your site, wherever that style is used. You can thus completely change the appearance of a site by simply editing a single style sheet file.
Each new style you create gets added to a style sheet that’s stored either in the Web page itself (in which case it’s an internal style sheet), or in another file called an external style sheet.
Internal style sheets appear in the <head> portion of a Web page, and contain styles that apply only to that page. An internal style sheet is a good choice when you have a very specific formatting task for a single page. For example, perhaps you want to create styles to format the text and table of a chart that appears only on a single page.
Note
It’s often easier, when creating a new design, to add styles to an internal style sheet. Once you’re satisfied with the design, you can then export the styles to an external style sheet—for use by all your site’s pages—as described on More about CSS.
An external style sheet, on the other hand, contains only styles—no HTML—and you can link it to numerous pages. In fact, you can link it to every page on your Web site to provide a uniform, sitewide set of styles. For instance, you can put a headline style in an external style sheet, and link that sheet to every page in the site. Every headline on every page then shares the same look—instant design consistency! Even better, when the boss (or the interior decorator in you) calls up and asks you to change the color of the headlines, you need to edit only a single file—the external style sheet—to update hundreds or even thousands of Web pages.
You can create both types of style sheets easily in Dreamweaver, and you aren’t limited to choosing one or the other. A single Web page can have both an external (for styles that apply to the whole site) and an internal style sheet (for page-specific formatting). You can even attach multiple external style sheets to a single page.
Styles come in several different flavors. The most common are class, ID, and tag styles.
A class style is one that you create, name, and attach manually to text or an HTML tag. Class styles work much like styles in word processing and page layout programs. If you want the name of your company to be displayed in bold and red wherever it appears in the text of a Web page, you can create a class style named Company with boldface and red text-color formatting. You would then select your company’s name on the page, and apply this style.
An ID is a type of style that lets you format a unique item on a page. Use ID styles to identify an object (or an area of a page) that appears only once—like a Web site’s logo, copyright notice, main navigation bar, or a banner. Designers frequently use IDs when creating CSS-based layouts like those presented in Chapter 9. An ID style is very similar to a class style, in that you supply the style’s name and apply the style manually. However, while you can apply a class to many different elements on a page, you can apply an ID to only one tag per page. (It’s okay to use multiple IDs on a single page, as long as each ID name is different.)
The other major type of CSS style is called a tag style, and applies globally to an individual HTML tag, as opposed to individual selections. Suppose you wanted to display every Heading 1 paragraph in the Arial font. Instead of creating a class style and applying it to every Heading 1 on the page, you could create an HTML tag style for the <h1> tag. In effect, you redefine the tag so that it’s displayed in Arial.
The main benefit of redefining an HTML tag in this way is that you don’t have to apply the style by hand. Since the new style says that all <h1> tags must use Arial, wherever a Web browser encounters an <h1> tag, it displays the text in Arial, the specified font.
These HTML tag styles are the easiest way to format a page. For one thing, there’s no need to select the tag and apply the style; the page needs only to contain an instance of the tag—<h1>, for example—that you’ve redefined.
Nevertheless, sometimes only a class style will do, such as when you want to format just a few words in a paragraph. Simply redefining the <p> tag won’t do the trick, since that would affect the entire paragraph. Instead, you have to create a class style and apply it to just the words you wish to style. In addition, class styles are handy when you want to format just one instance of a tag differently from others. If you want to format the introductory paragraph on a page differently from all other paragraphs on the page, then you create a class style and apply it to that first paragraph. (Another solution to that dilemma is a slightly more complicated, but more flexible, type of style called a descendent selector—you’ll read about that type of style later on Descendent Selectors.)
Note
In addition to classes and tag styles, other types of styles provide added control for particular situations. You can read about these more advanced styles starting on Compound Selectors.
Dreamweaver CS4 provides several ways to create CSS styles. For text, you can use the Property inspector’s CSS mode to create a style for setting fonts, font size, font color, font weight, and alignment. To create styles for elements besides text (like images or tables) or to tap into the dozens of other CSS properties not listed in the Property inspector, use the CSS Styles panel (see Figure 4-1). To get a complete overview of the style creation process, we’ll look at both methods—starting with the more versatile CSS Styles panel, and then moving onto the Property inspector.
Dreamweaver gives you many ways to create a new style: On the CSS Styles panel, click the new style button (see Figure 4-1); right-click anywhere in the CSS Styles panel, and then, from the menu that appears, select New; or choose Format → CSS Styles → New. The New CSS Rule dialog box appears (Figure 4-2), where you begin the process of creating your new style. (In the technical language of CSS, a style is actually called a rule, but for simplicity’s sake this book just uses the term style. After all, Cascading Rule Sheets doesn’t have much of a ring to it.)
Figure 4-1. With the “All” button selected, the CSS Styles panel lists the names of all styles available to the current page, including those in both external and internal style sheets. Here, one external style sheet—site_styles.css—contains five styles. The first two are tag styles (notice that the names match various HTML tags), while the next three are class styles (note the period at the beginning). You also see one tag style defined in an internal style sheet—the one listed below “<style>”. Click the minus (−) icon (arrow on Mac) to the left of the style sheet to collapse the list of styles, hiding them from view. The “Properties” list in the bottom half of the panel lets you edit a style as described on Fast Style Editing With the Properties Pane; the three buttons at the bottom left of the panel (circled) control how the Properties list is displayed.
Figure 4-2. In the New CSS Rule dialog box, you choose a type of style, give it a name, and decide whether to place the style in an internal or external style sheet. If you’ve used previous versions of Dreamweaver, then you’ll notice that this dialog box has changed significantly in Dreamweaver CS4.
Here’s a quick tour of your choices:
Selector Type. From the Selector Type menu, choose the kind of style you wish to create: Class (to create a style that you must manually apply to page elements), ID (to create a style that may be used only once on the page), or Tag (to create an HTML tag style that Dreamweaver automatically applies to each occurrence of the tag). See the previous section (Types of Styles) for a discussion of these three types.
You’ll want to use the fourth type, Compound, to create more advanced style types such as pseudo-classes, attribute selectors and descendent selectors. (You’ll learn about these types in various parts of the book; you can find a detailed discussion of them starting on Compound Selectors.)
In addition, if you’ve selected something on the page (such as a paragraph, an image, or a headline), then Dreamweaver highlights the Compound option and, in the Selector Name field, suggests what’s called a descendent selector. You’ll learn more about descendent selectors on Descendent Selectors, but basically, they’re a type of style that indicates how a particular element is nested within other HTML tags. For example, div p is a descendent selector that applies to any paragraph tag that appears within a <div> tag. So in cases where you want a descendent selector, use the Compound type.
Selector Name. If you selected Class or ID from the Selector Type menu, enter a name for the new style. According to the rules of CSS, Class style names must begin with a period—.copyright, for example—and ID style names begin with a # symbol—#banner, for example. Dreamweaver automatically adds the proper symbol, if you forget.
Another Class or ID style name rule: A letter must follow the period or # symbol. After that, you can use any combination of letters and numbers, but avoid unusual characters and spaces. For example, .logo, #main_content, #column2 all work fine. Dreamweaver lets you know if you use any invalid characters for the name.
If you chose Tag instead, then, from the Tag pop-up menu (which appears when you select Tag from the Selector Type menu), select the HTML tag you want to redefine.
Note
If you’re an HTML guru, you may find it faster to skip the Tag pop-up menu and just type the tag (minus the brackets) in the Name box. For example, if you want to create a style for all unordered (bulleted) lists, type ul.
If you selected the Compound option, then Dreamweaver lets you type any valid CSS selector type in the Selector field (you’ll learn about more selectors on Compound Selectors). You’ll use this feature for some advanced CSS tricks, but you can also use it just to create a tag or class style.
Note that when you add a Class, ID, tag, or other selector to the Selector Name field, Dreamweaver briefly explains to which HTML elements the particular selector will apply. For example, Figure 4-2 displays the New CSS Rule dialog box in the process of creating a new class style named copyright. The dialog box explains that this rule will apply to all HTML tags that have the class property set to copyright (in other words, all tags that have the class applied to them as described on Applying a Class Style). For simple styles like class and tag styles, this explanation is pretty much like “Uh, yeah. Tell me something I don’t know Dreamweaver.” But for complex selectors such as the descendent selectors you’ll learn about on Descendent Selectors, this explanation box can help clarify which page element an otherwise confusing selector name will apply to.
Rule Definition. The Rule Definition menu at the bottom of the dialog box lets you specify where the CSS code you’re about to create gets stored. Choose “This document only” if you want the styles to apply only to the current Web page (creating an internal style sheet, as described on Internal vs. External Style Sheets). To create a new external style sheet, from the pop-up menu, choose New Style Sheet File. This option not only creates a new external CSS file (which you can save anywhere in your site folder), but also adds the necessary code in the current document to link it to that file.
If you’ve previously linked this document to an external style sheet (see Internal vs. External Style Sheets), then that style sheet’s name appears in the pop-up menu, indicating that Dreamweaver is going to store the new style in this style sheet file.
Note
If you create a bunch of internal styles in a particular page, and later realize you’d like to turn them into an external style sheet that you can use in other pages, you’re in luck. Dreamweaver includes many tools for managing your style sheets. You’ll learn how to use them starting on Moving and Managing Styles.
If you indicated that you want to create an external style sheet, clicking OK makes a Save Style Sheet As dialog box appear. Navigate to your site’s folder, and then type a name for the new external CSS file. Just as HTML files end in .html, CSS files end in .css.
Note
If you’ll be using this style sheet for all your site’s pages, you may want to save it in your site’s root folder, or in a folder specifically dedicated to style sheets, and give it a general name like site_styles.css or global.css. (You don’t have to type the .css file name extension, by the way. In this case, Dreamweaver adds it.)
No matter what “Define in” option you selected, clicking OK eventually brings you to the CSS Rule Definition window.
The CSS Rule Definition window provides access to all the available formatting for styling text and graphics (see Figure 4-3). You’ll learn about each of the different properties throughout this book.
Once you’ve defined the style, at the bottom of the Rule Definition window, click OK. Dreamweaver adds the style to the specified style sheet, and displays it in the CSS Styles panel (Figure 4-1).
The real trick to creating a style is mastering all the different properties available, such as borders, margins, and background colors, and then learning which ones work reliably in the different browsers. You’ll learn about different CSS properties starting on Text Formatting with CSS.
Figure 4-3. For ultimate formatting control, Dreamweaver lets you set dozens of different Cascading Style Sheet properties from the CSS Rule Definition window. You’ll learn about these options throughout this book. For example, the Type properties are discussed on Text Formatting with CSS.
The Property inspector’s CSS mode lets you quickly create (or modify) styles for specific text formatting such as choosing a font or a font size (see Figure 4-4). In CSS mode, the Property inspector looks a lot like a formatting bar in a word processing program: dedicated buttons let you do things like make text bold or italics, control alignment, and set font type, size, and color. All these controls use CSS properties to achieve their effects.
To use the CSS mode, select some text on the page. For example, drag to select a portion of text, double-click to select a word, or triple-click to select an entire paragraph or headline. Then, from the Property inspector, select an option—for example, choose a selection of fonts from the font menu. If there’s no style currently applied to the selection, you see <New CSS Rule> in the Targeted Rule menu on the Property inspector (see Figure 4-4, top). At that point Dreamweaver opens the New CSS Rule dialog box (Figure 4-2).
Now it’s up to you to pick the type of style, name it, and decide where to store the style; just follow the same steps you’d use when creating a new style use the CSS Styles panel as described on Creating Styles. You’re free to create a class, tag, ID, or other style. After you create the new style, you return to the Property inspector (you skip the Rule Definition window). The Property inspector then lists the new style name in the Targeted Rule menu and displays the formatting you’ve selected (for example, the font you choose appears in the Font menu).
Figure 4-4. The Property inspector’s CSS mode either creates a new style (top) when a formatting option—like font size—is selected, or adds the formatting property to an already existing style (bottom). You can tell which action Dreamweaver is going to take by looking at the Targeted Rule menu—if it says <New CSS Rule>, then Dreamweaver lets you create a brand new class, tag, ID, or other style. However, if a style name (like p or .copyright in the bottom image) appears in that menu, you’re editing an already existing style when you make a formatting selection in the Property inspector. If you want to create a new style, from the menu, just select <New CSS Rule> before selecting a formatting option. Avoid <New Inline Style> since this adds CSS directly to an HTML tag—this method makes the page slower to load and harder to update.
Let’s look at a basic example. Suppose you wanted to format a copyright notice at the bottom of the page in a way that’s different from other text on the page. You would first triple-click the copyright paragraph to select the text, and then choose whatever formatting options you want from the CSS mode of the Property inspector—for example, select 12 from the Size menu to create small, 12-pixel type.
At this point the New CSS Rule dialog box opens and, from the Selector menu, you select Class, and then, in the Selector name field, type copyright. You could then store the file in either an external or internal style sheet as described on Internal vs. External Style Sheets. When you close the New CSS Rule window, a new class style named copyright is applied to the paragraph and the Size box in the Property inspector displays 12 pixels.
The Property inspector’s CSS Mode behaves differently, however, if there’s already a style created that applies to the selected text. In that case, the style appears in the Targeted Rule menu. For example, in Figure 4-4, bottom, the class style copyright is already applied to the selected text, so you see “.copyright” listed in that menu. At this point, choosing another formatting option from the Property inspector—for instance, clicking the bold button, or selecting a font from the font menu—doesn’t create a new style. Instead it adds the new formatting choice to the already existing style.
For example, say you created a copyright class style with a font size setting of 12 pixels. At this point, if you select that copyright text again, and then select a font color, the copyright class style is updated—the CSS color property is added to the style. Making additional formatting choices also updates the style.
Once you’ve created styles, you can easily apply them. In fact, if you created HTML tag styles, you don’t need to do anything to apply them: Their selectors (see the box on Using Styles) automatically dictate which tags they affect.
You can apply class styles to any selection in the document window, whether it’s a word, an image, or an entire paragraph. In fact, you can apply a class style to any individual HTML tag, such as a <p> (paragraph), <td> (table cell), or <body> tag. You can even select just a single word within a paragraph and apply a style to it.
Start out by selecting some words. Then, from the Property inspector, select the style name—you can do this either in HTML mode, in which case you select the name from the class menu (Figure 4-5, top), or in CSS mode, where you use the Targeted Rule menu (Figure 4-5, bottom).
To style an entire paragraph, triple-click within the paragraph (or heading) to select it, and then use the Property inspector to select the style. When you style an entire paragraph, you’re actually telling Dreamweaver to apply the style to the <p> tag. In that case, Dreamweaver adds a special class property to the page’s code, like this: <p class="company"> (for a class style named .company).
Figure 4-5. The Property inspector gives you the easiest method of applying a class style. For non-text elements like images or tables, a Class menu appears in the top right of the Property inspector. For text, you apply class styles using either the Class menu if the Property inspector is in HTML mode (top) or the Targeted Rule Menu in CSS mode (bottom). Only the bottom section of the Targeted Rule Menu (the stuff below Apply Class) is used to add (or remove) a class from a text selection. The other items listed are for creating new styles, or viewing the styles that apply to the selection.
Tip
You can also add a class to an entire paragraph or heading simply by clicking anywhere inside the paragraph, and then, from the Property inspector, choosing the class name—just make sure you don’t select any text, otherwise the style is applied just to the selected text and not the entire paragraph.
On the other hand, if you apply a class to a selection that isn’t a tag—like a single word that you’ve double-clicked—Dreamweaver wraps the selection within a <span> tag like this: <span class="company">Chia Vet</span>. This tag, in other words, applies a style to a span of text that can’t be identified by a single tag.
To apply a class style to an object (like an image or a table), start by selecting the object. As always, the Tag selector at the bottom of the document window is a great way to select a tag. Then, at the top right of the Property inspector, use the Class pop-up menu to select the style name.
You can also apply a class style by selecting whatever element you wish to style, choosing Format → CSS Styles, and then, from the submenu, selecting the style. Or you can right-click (Control-click) the style’s name in the CSS Styles panel, and then, from the pop-up menu, choose Apply. Finally, you can also apply a class from the document window’s Tag selector, as shown in Figure 4-6.
Figure 4-6. You can apply a class style directly to a tag using the document window’s Tag selector at the bottom of the window. Just right-click (Control-click) the tag you wish to format, and then, from the Set Class submenu, select the class style. In addition, the Tag selector lets you know if a tag has a class style applied to it. If so, the style’s name is added at the end of the tag. For example, in this figure, a class style named .products has been applied to a bulleted list (the <ul> tag) on the page (circled).
To remove a class style from text on a Web page, simply select the text, and then, from the Property inspector (see Figure 4-5), choose None from the Class menu (HTML mode) or <Remove Class> from the Targeted Rule menu (CSS mode). To remove a class style from another object (like an image), select the object, and then, from the Property inspector’s Class menu, choose None. You can also choose Format → CSS Styles → None to remove a style from any selection (even non-text elements like images or tables).
Tip
If you’ve applied a class style to a selection of text, then you don’t actually have to select all the text to remove the style. Just click anywhere inside it, and then select None from the Property inspector’s Class menu or <Remove Class> from the Targeted Rule menu. Dreamweaver is smart enough to realize you want to remove the style applied to the text. (If you applied the style to a tag, then Dreamweaver removes the Class property. If you applied the style using the <span> tag, then Dreamweaver removes the <span> tag.)
You can’t, however, remove tag styles from HTML tags. For example, suppose you’ve redefined the <h2> tag using the steps outlined on Creating Styles. If your page has three Heading 1 (<h2>) paragraphs, and you want the third heading to have a different style from the other two, you can’t simply “remove” the <h2> style from the third paragraph. Instead, what you need to do is create a new class style with all the formatting options you want for that third heading, and then apply it directly to the <h2> tag. (By the magic of CSS, the class formatting options override any existing tag style options—see The Cascade for more on this sleight of hand.)
To apply an ID to text, just select the text, and use the ID menu in the HTML mode of the Property inspector (see Figure 4-5, top). Since you can apply each ID name only once per page, this menu lists only IDs that exist in your style sheet but haven’t yet been applied to a tag on the page.
For non-text elements, select the element, and then, in the Property inspector, type the ID name into the ID field. (For some elements the ID field is unlabelled, but you can always find it on the far left of the Property inspector.)
You can also use the Tag selector as outlined in Figure 4-6. Just use the Set ID menu in the contextual menu that appears when you right-click (Ctrl-click) the tag.
Tip
The Tag selector tells you if an ID is applied to a tag. An ID is indicated with a # symbol, so in Figure 4-6, for example, body#catalog indicates that the <body> tag has an ID named “catalog” applied to it.
Whenever you apply an ID to a tag, Dreamweaver adds a bit of HTML code to your page. For instance, an ID style named #copyright applied to a paragraph would look like this in the HTML: <p id="copyright"> (this is just like the “class” property that’s added when you use class styles, as described on Applying a Class Style).
To remove an ID from a text element, select the text, and then, from the Property inspector’s ID menu, select None. For non-text elements, just select the element, and then, in the Property inspector’s ID field, delete the ID name.
Whenever you create an external style sheet, Dreamweaver automatically links it to the current document. To use its styles in a different Web page, however, you must attach it to the page.
To do so, open the Web page to which you wish to add the style sheet. Then, on the CSS Styles panel, click the Attach External Style Sheet button (see Figure 4-1). (If the CSS Styles panel isn’t open, choose Window → CSS Styles or press Shift-F11.)
Tip
You can also use the Property inspector to attach a style sheet. Just select “Attach Style Sheet…” from the Class menu in HTML mode (see Figure 4-5, top).
The Attach External Style Sheet window appears (see Figure 4-7). Click Browse. In the Select Style Sheet File dialog box that appears, navigate to and double-click the CSS (.css) file you wish to attach to the document. If the style sheet you select is outside the current site—for example, you’ve selected a style sheet you like from another one of your Web sites—Dreamweaver offers to copy the style sheet file into your site’s root folder; click Yes.
The Attach External Style Sheet window provides two other options: how to attach the style sheet, and what type of “media” you want the styles to apply to. The “media” setting is optional and dictates when the styles from the style sheet are applied (for example, you can apply a different set of styles when a page is printed vs. when it displays on a computer monitor). You’ll find in-depth information on media types and how to use them on Styling for Print.
Figure 4-7. Adding styles from an external style sheet is as simple as browsing for the file, and then clicking OK. Choosing a media type is optional.
When attaching an external style sheet, you can either “link” it or “import” it. These two choices are nearly identical; they’re simply two different methods of attaching an external style sheet to a Web page. To save you one extra click, just go with Dreamweaver’s suggestion: link.
Tip
You can preview the effect of the style sheet on your page by clicking the Preview button in the Attach External Style Sheet window.
After choosing your options, click OK, and Dreamweaver adds the necessary HTML code to the head of the Web page, and automatically formats any tags in the document according to the style sheet’s HTML tag styles. You see the formatting changes take place in the document window immediately after attaching the external style sheet.
If the style sheet contains class styles, on the other hand, then you don’t see their formatting effects until you apply them to an element on the page, as described on Applying a Class Style.
As with anything in Dreamweaver, styles are easy enough to edit, delete, or duplicate; all you need is a map of the terrain.
While building a Web site, you almost always continually refine your designs. That chartreuse color you assigned to the background of your pages may have looked great at 2 a.m., but it loses something in the light of day.
Fortunately, one of CSS’s greatest selling points is how easy it makes updating the formatting on a Web site.
Tip
Although this section focuses mainly on how to style your text, you also use CSS styles to add background colors, background images, borders, and accurately position elements on page. The next few chapters show you how to style links, images, tables, forms, and other page elements with CSS.
Dreamweaver provides many ways to edit styles:
In the CSS Styles panel, select a style (Figure 4-1), and then click the Edit Style button to open the Rule Definition window (Figure 4-3). (This is the same window you used when first creating the style.) Make your changes, and then click OK to return to the document window. Dreamweaver reformats the page to reflect any changes you made to styles used in the current document.
Double-clicking the name of a style in the CSS panel also opens the Rule Definition window. Actually, depending on a preference setting—or a setting someone else may have tweaked while using your computer—double-clicking a style in the CSS panel may display the—eeck!—raw CSS code in Code view. To change this behavior, open the Preferences window (Ctrl+U [⌘-U]), click the CSS Styles category, and then select the “Edit using CSS dialog” button.
In the CSS Styles panel, right-click (Control-click) the name of a style, and then, from the shortcut menu, choose Edit, which also opens the Rule Definition window. Make your changes to the style, and then click OK to return to the document window.
Tip
The properties pane in the CSS Styles panel offers yet another, faster method of editing a style. This advanced technique requires a bit of CSS savvy and is discussed on Fast Style Editing With the Properties Pane.
At some point, you may find you’ve created a style that you don’t need after all. Maybe you redefined the HTML <code> tag, and realize you haven’t even used the tag in your site. You don’t need to keep it around, taking up precious space in the style sheet.
To delete a style, make sure the CSS Styles panel is open (Window → CSS Styles), and the All button is highlighted (see Figure 4-1). Click the name of the style you wish to delete, and then press your keyboard’s delete key (you can also click the Trash can icon at the bottom of the panel). You can also remove all the styles in an internal style sheet (as well as the style sheet itself) by selecting the style sheet—indicated by “<style>” in the CSS Styles panel (see Figure 4-1)—and pressing Delete (or clicking the Trash can icon). If you “trash” an external style sheet, however, you merely unlink it from the current document without actually deleting the .css file.
Unfortunately, deleting a class style doesn’t delete any references to the style in your site’s pages. For example, if you’ve created a style called .company and applied it throughout your site, and you then delete that style from the style sheet, Dreamweaver doesn’t remove the <span> tags or class properties that refer to the style. Your pages are still littered with orphaned code like this—<span class="company">CosmoFarmer</span>—even though the text loses the styling. (See how to solve this problem using Dreamweaver’s powerful “Find and Replace” tool on Advanced Tag Searches.)
You can rename any style by selecting it in the CSS Styles panel, pausing a second, and then clicking the name again. This makes the name editable, at which point you can type a new name in its place. Of course, if you change a style named p to a style named h1, you’ve essentially removed a p tag style and added an h1 tag style—in other words, all paragraphs would lose the style’s formatting, and all <h1> tags would suddenly change appearance. Alternatively, you could open the .css file in Code view, and then edit the name. However, when it comes to class styles just changing the name doesn’t do much good if you’ve already applied the style throughout your site. The old class name still appears in the HTML in each place you used it.
What you really need to do is rename the class style, and then perform a find-and-replace operation to change the name wherever it appears in your site. Dreamweaver includes a handy tool to simplify this process.
To rename a class style:
On the Property inspector, in the Class menu (Figure 4-5), choose Rename.
The Rename Style window appears (Figure 4-8).
From the top menu, choose the name of the style you wish to rename.
This menu lists all class styles available on the current page, including external and internal styles.
In the “New name” box, type the new style name.
You must follow the same rules for naming class styles described on Phase 2: Defining the Style. But, just as when creating a new class, you don’t need to precede the name with a period—Dreamweaver takes care of that.
Click OK.
If the style whose name you’re changing is an internal style, Dreamweaver makes the change. Your job is complete.
However, if the style belongs to an external style sheet, Dreamweaver warns you that other pages on the site may also use this style. To successfully rename the style, Dreamweaver must use its “Find and Replace” tool to search the site and update all pages that use the old style name. In that case, continue to step 5.
If you get cold feet, click Cancel to call off the name change, or click Yes to open the “Find and Replace” window, where you should click Replace All.
One last warning appears, reminding you that this action can’t be undone.
Click Yes.
Dreamweaver goes through each page of your site, dutifully updating the name of the style in each place it appears.
Dreamweaver makes it easy to duplicate a CSS style, which is handy when you’ve created, say, an HTML tag style, and then decide you’d rather make it a class style. Or you may want to use the formatting options from one style as a starting-off point for a new style. Either way, you start by duplicating an existing style.
You can duplicate a style in two ways. The easiest method is to open the CSS Styles panel (Window → CSS Styles), right-click (Control-click) the name of the style you wish to duplicate, and then, from the shortcut menu, choose Duplicate.
The Duplicate CSS Rule window appears (Figure 4-9), where you can give the duplicated style a new name, reassign its Type setting, use the “Define in” menu to move it from an internal to an external style sheet, and so on.
Figure 4-9. The Duplicate CSS Rule dialog box looks and acts just like the New CSS Rule box (Figure 4-2). You can select a new style type, name it, and then add it to an external or internal style sheet. The only difference is that the duplicated style retains all the original style’s CSS properties.
When you click OK, Dreamweaver adds the duplicate style to the page or external style sheet. You can then edit the new style just as you would any other, as described on Manipulating Styles.
As if learning Dreamweaver, HTML, and CSS weren’t big enough challenges, Web designers also have to contend with the fact that not all browsers display CSS in the same way. What looks great in Firefox may look terrible in Internet Explorer—and vice versa. Unfortunately, a lot of CSS display problems aren’t the fault of the Web designer or CSS, but are caused by bugs in the browsers. This sad fact of browser life usually forces Web designers to spend lots of time testing Web pages in different browsers to identify and fix problems.
Fortunately for you, Dreamweaver includes a tool to help diagnose CSS problems, and advise you on the best way to fix them, saving you many hours of testing and troubleshooting. The Check Browser Compatibility tool scans a page’s HTML and CSS, and determines if one or more browsers are likely to have trouble displaying your page. It actually checks two things: whether you’ve included any CSS properties or values that one or more browsers don’t understand, and whether the particular combination of HTML and CSS you’re using might trip up a particular browser.
For example, the blink value of the CSS Decoration property (Block Properties) isn’t supported by Internet Explorer or Safari. If you place that value in a style on a page, and then use the Check Browser Compatibility tool, Dreamweaver lets you know those browsers won’t do anything with the blink setting. These types of errors are straightforward: You either change the property (or remove it) so that the style works in all browsers, or live with the fact that the specified browser will ignore the particular style instruction.
The second type of problem is more nebulous. Dreamweaver also warns you of potential browser problems that might arise because of the way you’ve used HTML and CSS. The warning Dreamweaver gives in this case is not as clear-cut as, "That browser doesn’t understand that CSS property;” it’s more like, “That browser does understand that CSS property, but in this one instance, the browser may get it horribly wrong, and mess up your Web page.”
For example, Internet Explorer knows what a bulleted list is; it also knows what the CSS display property is (see List Properties). In most cases, Internet Explorer has no problem displaying both bulleted lists and items styled with a block value for the display property. But, in one case—when a link inside a list item has a display value of block—the list items appear with a mysterious extra space below them. The result: an unattractive white space between an otherwise orderly stack of navigation buttons…but this happens only with Internet Explorer. These are the types of obscure problems that make Web designers consider new careers.
Fortunately, the Check Browser Compatibility tool is aware of many of the most common, hair-pulling, browser bugs, and can save you lots of time by letting you know when a page might have a problem. To use the tool:
Open a Web page that you’d like to test.
You can open any Web page; if the page has an external style sheet, Dreamweaver checks that as well. You can even open an external style sheet (.css) file and run this command on it to identify CSS properties and values that some browsers might not understand.
Choose File → Check Page → Browser Compatibility.
Alternatively, from the Check Page menu at the top right of the document window, you can choose Check Browser Compatibility (see Figure 4-10). In either case, Dreamweaver analyses the HTML and CSS for the page, and spits out the results in the Results panel’s Browser Compatibility tab (see Figure 4-11).
Figure 4-10. The Check Page menu lets you examine a page and see how compatible its HTML and CSS are with a variety of Web browsers. To change the browsers Dreamweaver uses for its analysis, select the Settings option. A window listing the most common browsers appears, from which you specify the earliest version of the browser you wish to check against. For example, if you don’t worry about Internet Explorer 5 any longer, choose 6 from the menu. Now Dreamweaver checks only for problems that occur in version 6 or later. Unless you’re catering to some old Macs, uncheck the Internet Explorer for Mac checkbox—that browser is only rarely used anymore and hasn’t even been available for years.
Each issue that Dreamweaver discovers is displayed with an icon indicating the severity of the problem, the line number in the HTML code where the potential problem occurs, and a short description of the issue.
An icon in the far left column of the results panel indicates the type of issue and its likelihood of causing a browser problem. An ! mark indicates an error—a problem with the CSS such as a property or value that’s either invalid or isn’t understood by a particular browser. Problems identified by a red pie graph are warnings, and they indicate the likelihood of encountering a problem in a particular browser: A single slice means that yes, the page has something that might cause difficulty for a particular browser, but then again the browser may display the page just fine. You see this icon for an issue that’s rare or crops up only when a very particular set of HTML and CSS are in place (and Jupiter’s rising while Mars descends).
A fully red circle indicates that you’re likely to see a problem in the specific browser. For example, the Internet Explorer problem related to links, lists, and the display property mentioned previously is nearly a sure thing. If you’ve set up your CSS and HTML in that way, you will see that problem in Internet Explorer.
You should always test any page that shows an error or warning, even if Dreamweaver thinks the problem is only slightly likely to occur.
In the Results panel, select an issue (Figure 4-11).
After selecting an issue in the Results panel, a detailed explanation of the problem appears in the right side of the panel; in addition, you see a list of which browsers this problem may affect, and the likelihood that the problem will crop up. In Figure 4-11, the issue “Three pixel text jog” is selected. You can see what causes it and see that it affects Internet Explorer 6.
Figure 4-11. Don’t bother with the Save Results button in the left edge of the Results panel. Clicking this button creates a hard-to-read and not so useful XML file that lists the same information you find in the Results panel. (That said, perhaps this file could come in handy if you want to report back to your pet robot about how your day went.)
Fix the problem.
Dreamweaver just identifies the problem; it doesn’t, alas, fix it. However, Adobe hasn’t left you totally in the lurch. When you select a problem in the Results panel, at the bottom right of the panel, a link (“View solutions”) appears (see Figure 4-11). Clicking that link launches a Web browser, and opens a page on Adobe’s CSS Advisor site. This Web site is an ever-evolving catalog of CSS browser problems and recommended solutions. Dreamweaver’s Results panel integrates with this site, so the link on the panel takes you to a page that addresses the very problem you’re trying to solve. Nice.
In most cases the solution to an issue involves adding an additional style or editing an already created style. You shouldn’t try to make too much sense out of the solutions—many don’t make any technical sense. For example, the solution for the “Extra White Space in List Links” bug is to create two styles (both of which target the link tag inside the affected list), and apply two different display properties (see List Properties): The first style uses the inline-block value, and the second applies the block value. It’s not logical, but it does knock some sense into IE. Most of the solutions are the results of countless hours of trial and error by exasperated and industrious Web designers. Just be thankful the answers to these problems are just a click away.
One of the best uses for Cascading Style Sheets is to convert the drab appearance of HTML text into lavishly designed prose. Or, if you like a somber, corporate style, CSS can help with that too. Whatever your design inclination, you can improve the look of your Web text using CSS.
You can access six different text-related CSS properties using the CSS mode of the Property inspector (see Figure 4-4), or use the full-blown CSS Rule Definition window to deploy over 64 different CSS properties. The most commonly used properties for text are stored in the Type (Figure 4-14) and Block categories, while the List category offers several options for formatting bulleted and numbered lists.
Note
You can apply nearly every CSS property to text. For example, you can use the border property to underline text, and the margin property to remove space between paragraphs. Those properties and others not listed in the Type or Block categories are introduced later in this book (don’t want to blow your circuits too quickly). For now, you’ll learn the most type-centric properties.
Formatting fonts for the Web is very much like using fonts in a word processor. Sadly, it carries some of the same drawbacks. For example, if you create some beautiful document in Microsoft Word, using fancy fonts you just bought from a small font company in Nome, Alaska, you’re in for a rude surprise when you email the document to your boss. He won’t see anything resembling what the memo looked like on your screen. Because he doesn’t own the same fonts, he’ll see some default font on his computer—Times, perhaps. Fonts show up in a distributed document only if each recipient has the same fonts installed.
On the Web, you’re in the same predicament. You’re free, as a Web designer, to specify any font you want in a Web page, but it doesn’t show up on a viewer’s computer unless she’s installed the same font on her system. If she hasn’t, your visitor’s Web browser shows your text in a default font, which is usually some version of Times, Arial, or Courier.
You have several solutions to this dilemma. One is to convert your text into graphic images—unfortunately that process takes time and forces your Web visitors to download byte-hogging images just to read your Web page. Another option is to specify the font you’d like to use; if your viewer’s computer has the specified font installed, that’s what she’ll see. You can specify secondary or tertiary font choices if the preferred font isn’t available. In fact, Dreamweaver offers prepackaged lists of such “first choice, second choice, third choice” fonts, as you’ll find out in the following section.
You can use either the Font menu in the Property inspector’s CSS mode (Figure 4-4) or the CSS Rule Definition window’s Font-family menu (Figure 4-14). In either case what you’re actually doing is either creating a new style as described on Creating Styles or updating an already existing style.
You’ll soon discover that Dreamweaver’s font menus aren’t quite what you’re used to. When you apply a font to text, you have to choose from one of the prepackaged lists just described; a typical choice is something like “Arial, Helvetica, sans-serif”. In other words, you can’t just choose a single font, such as Helvetica.
If the first font isn’t installed on your visitor’s computer, the browser looks down the list until it finds a font that is. Different operating systems use different fonts, so these lists include one font that’s common on Windows and another, similar-looking font that’s common on the Mac. Arial, for instance, is found on all Windows machines, while Helvetica is a similar font for Macs.
That’s it. You’ve just selected one of Dreamweaver’s preinstalled fonts, and any text formatted by the CSS style you just created will use the font you selected. If you’d like a greater degree of control of the fonts your page displays, read on.
Dreamweaver CS4 comes with 13 preset “first choice, second choice, third choice” font lists, which incorporate fonts common to both Windows and Macs. But you can easily stray from the pack and create your own font lists for use in your Web pages. If you proceed with the custom approach, make sure you know what fonts your visitors have—easily done if you’re designing a corporate intranet and know what computers are used in your company—and always specify one font that you know is installed. In this way, your page may not look exactly as you intended, but it’ll at least be readable.
Here’s how you create a new “first choice, second choice, third choice” font list.
Note
Technically, you can specify any number of fallback fonts in one of these lists, not just first, second, and third choices. Your list can range anywhere from just a single font to a long list arranged in order of preference.
Open the Edit Font List dialog box.
From the Property inspector’s Font menu (visible only in CSS mode), choose Edit Font List, or choose Format → Font → Edit Font List. Either way, the Edit Font List dialog box appears (Figure 4-12).
Figure 4-12. Not only can you create your own font lists, but you can also edit, remove, or reorder the current lists in this dialog box. When you click a list in the “Font list” menu, the “first choice, second choice, third choice” fonts appear in the lower-left corner. To remove a font from that list, click the font name, and then click the >> button. To add a font to the list, select a font in the “Available fonts” menu, and then click the << button. Finally, to reorder the font lists as they appear in the Property inspector, the CSS Rule Definition window’s Font menu, or the Format → Font menu, click the arrow keys near the upper-right corner of the dialog box.
Select a first-choice font from the list of “Available fonts”, or type in the font name.
All fonts on your computer are listed in the “Available fonts” menu. Simply click to select the font you wish to add.
Alternatively, you can type a font’s name into the box that appears directly below the list of available fonts—a handy trick if you want to include a font that isn’t installed on your computer (a Windows font when you’re working on a Mac, for example).
Add the font you’ve just specified to your new, custom font list by clicking the << button (or just double-clicking the font name).
Repeat steps 2 and 3 for each font you wish to include in your custom list.
The order in which you add the fonts is the order they appear in the list. These become the “first choice, second choice, third choice” fonts.
Unfortunately, there’s no way to change the order of the fonts once you’ve added them. So if you accidentally put the fonts in the wrong order, you must delete the list by clicking the minus (−) button (at the upper-left corner of the dialog box) and start over.
Add a generic font family.
This last step isn’t strictly necessary, but it’s a good idea. If your Web page visitor is some kind of anti-font radical whose PC doesn’t have any of the fonts you’ve chosen, his browser will substitute the generic font family you specify here.
Generic fonts are listed at the bottom of the list of “Available fonts” and include “cursive”, “fantasy”, “monospace”, “sans-serif”, and “serif”. On most systems, the monospaced font is Courier, the serif font is Times, and the sans-serif font is Arial or Helvetica. Select a generic font that’s similar in appearance to the fonts in your list. For instance, choose “sans-serif” if your list consists of sans-serif fonts like Helvetica or Arial; choose “serif” if you specified fonts like Times or Georgia; or choose “monospace” for a font like Courier.
Click OK.
Your new font package appears in the Property inspector’s Font menu, ready to apply.
Varying the sizes of fonts on a Web page is one way to direct a viewer’s attention. Large type screams “Read Me!”—excellent for attention-grabbing headlines—while small type fades into the background—perfect for necessary but unexciting legal mumbo jumbo like copyright notices.
Unless you specifically define its size, text in a regular paragraph appears at the default size specified by your visitor’s Web browser: In most browsers today that size is 16 pixels. However, not only can people change that default size (much to the eternal frustration of Web designers), but different operating systems have also been known to display text at different sizes. Bottom line: You can’t really trust that text will appear the same size for all the different viewers of your site.
You can use either the Size menu in the Property inspector’s CSS mode (Figure 4-13) or the CSS Rule Definition window’s Font-size menu (Figure 4-14). In either case you’re either creating a new style as described on Creating Styles or updating an already existing style. The choices available from the Size menu break down into four groups:
The None option removes any size information that you may have applied to the text. The text returns to its default size.
The numeric choices—9 through 36—indicate how tall you wish to make the text, in pixels. Nine-pixel-tall text is nearly unreadable, while 36 pixels makes a bold statement. One benefit of pixel sizes is that text appears nearly the same across different browsers and different operating systems, overcoming the problems mentioned above.
The options xx-small through xx-large indicate fixed sizes, replacing the sizes 1 through 7 used with the old HTML <font> tag. The medium size is usually the same as the default size.
The last two choices—smaller and larger—are relative sizes, meaning that they shrink or enlarge the selected text based on the default size. These choices come in handy when you’ve defined a base font size for the entire page using the Page Properties window (see Figure 1-22 on Phase 4: Adding Images and Text).
Suppose the default size of text on a page is 12 pixels. If you apply a “larger” size to a selection of text, then it gets bigger (the exact amount varies by Web browser). If, later, you change the base size to 14 pixels (in Page Properties), all of that “larger” text will also increase proportionally.
Figure 4-13. You can set a dizzying array of font sizes using CSS. When using the Property inspector’s CSS mode to set the size of text, you either create a new style—in which case you see <New CSS Rule> listed in the Targeted Rule field (circled)—or you edit an already existing style, as shown here. In this case, the class style, .product, is listed, so picking a font size edits that CSS style.
To change the size of text, simply select it, and then, from the Property inspector, choose a new size (Figure 4-13), or edit the appropriate CSS style as described on Manipulating Styles. If you applied a number (that is, a pixel value), you have an additional option: If you don’t like any of the sizes listed, you can type any number you wish. In fact, unlike HTML, CSS can handle humongous text—hundreds of pixels tall, if that’s what you’re into.
You’re not limited to pixels, either. The Units pop-up menu (to the right of the Size menu, shown in Figure 4-13) lets you specify pixels, points, inches, centimeters, millimeters, picas, ems, percentages, or exes (an ex is the width of the letter X in the current font). Most of these measurement systems aren’t intended for onscreen display. The most popular options are:
Pixels are great for ensuring that text looks the same size across different browsers and operating systems. The downside, however, is that Internet Explorer 6 and earlier for Windows doesn’t let Web surfers adjust the pixel size. So people who can’t see well, or whose monitors are set to very high resolutions, are stuck with your choice of pixel size. Make it too small, and they won’t be able to read your text. (Fortunately, as Internet Explorer 7 becomes more popular, this becomes less of an issue.)
Ems are a relative measurement, meaning that the actual point size varies.
One em is equal to the default font size. So suppose a Web browser’s default font size is 14 pixels tall. In that case, 1 em would mean 14 pixels tall, 2 ems would be twice that (28 pixels), and 1.5 ems would be 21 pixels.
The advantage of ems is that they let your Web visitors control the size of onscreen text. If it’s too small, they can increase the base font size. (In Internet Explorer, you make this adjustment by choosing an option from the View → Text Size menu [View → Make Text Bigger on Safari on the Mac].) Any text measured in ems then changes according to the Web browser’s new setting.
You can use pixels and ems together. You could, for instance, set the base font size on your page to 16 pixels, and then use ems for other parts of the page. For example, you could set headlines to 2 ems, making them 32 pixels tall. If you later thought the overall text size of the page was too small or too large, you could simply change the base font size for the page, and the headlines and all other text would resize proportionally.
Many Web experts advocate the use of ems, because they let visitors decide how big text should appear, thus making the site more widely accessible. Many designers, on the other hand, don’t like the fact that other people can radically change the design of a page by simply changing a browser setting.
Note
As you get more advanced with CSS, you’ll probably run into some weird problems with em or percentage text sizes due to an advanced concept known as the cascade. The gruesome details begin on The Cascade.
Percentages (%) are another relative size measurement. When applied to text size, they’re functionally equivalent to ems. If you’re more comfortable with the notion of percentages than the typography-inspired ems, use percentage values instead.
The other measurement options, like inches and millimeters, don’t make as much sense as pixels, ems, and percentages, because you can’t consistently measure them on monitors. For example, Windows is set to 96 pixels to the inch, whereas Mac OS X is set to 72 pixels per inch—but even these settings can be changed, so there’s no reliable way to measure an “inch” on a computer screen.
Most color formatting in Dreamweaver, whether it’s for text or for a table cell, makes use of Dreamweaver’s color box.
To set the color of text, use the CSS Color property. You can use the Property inspector’s CSS mode to choose a color, or assign a text color in the Text category of the CSS Rule Definition window (Figure 4-14). In both cases, you encounter Dreamweaver’s color box as described on Phase 4: Adding Images and Text. You can pick a color by clicking the color well and, from the pop-up color palette, selecting a color, or you can type a hexadecimal number (see Phase 4: Adding Images and Text) of the color you want. (Clearly, this is the option for hard-core HTML geeks. After all, surely you’ve memorized the hex number of that light shade of blue you always use—#6699FF, isn’t it?)
You can use the Property inspector to make text bold or italics. However, depending on which mode the inspector is in—HTML or CSS—clicking the B or I button does different things. In HTML mode, the B button wraps selected text with the <strong> HTML tag, while the I button wraps the text with the <em> (for emphasis) tag. However, in CSS mode, the B button sets the CSS Font-weight property to bold, while the I button sets the CSS Font-style property to italic. In other words, those two buttons either insert HTML tags or add CSS properties to a style.
If you want to just change the appearance of text, use CSS mode, but if you actually want to emphasize some text because it’s important for the sentence’s meaning, then use HTML mode. For example, if you just want the word “Monday” to stand out visually on the page, use CSS. But for a sentence like “He never makes mistakes” the emphasis on “never” is important to understanding the sentence; in that case, use HTML mode. The people viewing your site might not notice the difference, but Google, other search engines, and screen reading software will.
Note
If you use the Property inspector’s CSS mode, the B button only makes type bold or removes bold formatting you previously applied. In the case of headlines, which browsers automatically display as bold, clicking the B button has no effect. To remove the bold formatting from headlines you have to use the CSS Style Definition window, and, from the font-weight menu, select normal (see Figure 4-14).
The alignment buttons in the Property inspector’s CSS mode (Figure 4-4) set the CSS text-align property to either left, right, center, or justify. These same options are available under the Block category of the CSS Rule Definition window (Figure 4-17).
As the name implies, the Rule Definition window’s Type category lets you set formatting options that affect text (see Figure 4-14). Most of these settings are the same as those available from the Property inspector in CSS mode and have been discussed in depth starting on Creating a Style with the Property Inspector. But to summarize, this category of CSS properties includes:
Font. You choose a font for the style from the Font menu. As discussed on Choosing a Font, you choose from groups of fonts rather than the specific one you have your heart set on. Dreamweaver also lets you create your own “first-choice, second-choice…” font choices from this menu, exactly as described on Creating custom font lists.
Figure 4-14. While you can set some text formatting using the Property inspector, the CSS Rule Definition window’s Type category offers additional formatting options. For example, you get the ability to control the space between lines of text, and an option to change the case of text—make text upper or lowercase.
Size. As described on Changing the Font Size, you can choose from among many different systems for sizing text, but the most common are pixels, ems, and percentages.
Weight. Weight refers to the thickness of the font. The Weight menu offers 13 different choices. Normal and bold are the most common, and they work in all browsers that understand CSS. See Figure 4-15 for details.
Style. In this peculiar instance, Style means italic, oblique, or normal. Technically, italic is a custom-designed, emphatic version of a typeface, like this. Oblique, on the other hand, is just a computerized adaptation of a normal font, in which each letter is inclined a certain number of degrees to the right. In practical application, there’s no visible difference between italic and oblique in Web browsers.
Figure 4-15. CSS was designed so that each of the nine numeric weight values between 100 and 900 would tweak the thickness of fonts that have many different weights (ultrathin, thin, light, extra bold, and so on). 400 is normal; 700 is the same as bold. However, given the limitations of today’s browsers, you’ll notice no difference between the values 100 and 500 (top text in right column). Similarly, choosing any of the values from 600 to 900 just gets you bold text (bottom text in right column). You’re better off keeping things simple and choosing either “normal” or “bold” when picking a font weight.
Variant. This pop-up menu simply lets you specify small-caps type, if you like—a slightly formal, fancy-looking type style much favored by attorneys’ offices.
Line Height. Line height, otherwise known as leading (pronounced “LED-ing”), refers to the space between lines of text in a paragraph (see Figure 4-16). To create more space between lines, set the line height greater than the font size. (If you type a number without a % sign, Dreamweaver assumes you’re specifying a line height in pixels. You can change the units of measurement using the pop-up menu to the right of the Line Height field.)
Tip
A good approach for line height is to type in a percentage measurement, such as 120%, which is relative to the size of the text; if your text is 10 pixels tall, the space from the base of one line of text to the next is 12 pixels (120% of 10). Now, if you change the size of the text, the relative space between lines remains the same.
“Normal”, the default setting (top paragraph in Figure 4-16), uses a line height that’s slightly larger than the height of the text. You don’t get access to the pop-up menu of measurement units (pixels, points, %, and so on) unless you choose “value” from this menu.
Figure 4-16. Control the space between lines with the Line Height property in the CSS Rule Definition dialog box. In this example, each paragraph’s text is set in 16-pixel Tahoma. With CSS, you can make lines bump into each other by setting a low line-height value (middle paragraph), or spread them far apart by using a larger value (bottom paragraph).
Case. From this menu, you can automatically capitalize text. To capitalize the first letter of each word, choose “capitalize”. The “uppercase” option gives you all-capitals typing, while “lowercase” makes all letters lowercase. The factory setting is “none”, which has no effect on the text.
Decoration. This strange assortment of five checkboxes lets you dress up your text, mostly in unattractive ways. “Underline”, “overline”, and “line-through” add horizontal lines below, above, or directly through the affected text, respectively. Turning on “blink” makes affected text blink on and off (but only in a few browsers); unless you want to appear on one of those “worst Web site of the week” lists, avoid it. You can apply any number of decorative types per style, except with “none”, which, obviously, you can’t choose along with any of the other options. The “none” setting is useful for hiding the underlines that normally appear below links (see Styling Links).
Color. Set the color of the style’s text using Dreamweaver’s color box, which is described on Phase 4: Adding Images and Text.
The Block Properties panel is a hodgepodge of CSS settings that affect how letters and words are displayed (see Figure 4-17).
Tip
To completely remove the space between paragraphs, set the Top and Bottom margin for paragraphs to 0 in the CSS Rule Definition window’s Box category. This setting also helps to remove space that appears before and after headlines. To indent paragraphs, set the Left and Right margin properties.
Figure 4-17. The Block category is an eclectic mix consisting mostly of text properties. However, you can use the Display property on images, tables, and any other selection or HTML tag. Although the list is long, most of these options, alas, don’t work in all browsers.
Despite this category’s name, these properties don’t just apply to block-level elements (paragraphs, headlines, and so on). You can apply a style with these properties to even a single word or two. (The one exception is the Text Align property, which can apply only to paragraphs and other block-level elements.) Here are your choices:
Word spacing. This property helps you clean up text by adding or removing space between words. The default value, “normal”, leaves a normal, single space between words. If you want words in a sentence to be spaced apart like this, then type a value of about 10 pixels. (Choose Value from the first pop-up menu, then the units you want from the second one.) The bigger the number, the larger the gap between words. You can also remove space between words by using a negative number—a great choice when you want to make your pages difficult to read.
Letter spacing. This property works just like word spacing, but governs the space between letters. To add space l i k e t h i s, type a value of about 5 pixels. The result can make long passages of text hard to read, but a little space between letters can add a dramatic flair to short headlines and movie titles.
Vertical alignment. With this property, you can change the vertical placement of an object—such as an image or text—relative to other items around it. For example, you could move text above or below surrounding text to format a trademark, copyright symbol, or footnote reference. The options—“sub” and “super”—can be used in this situation to create subscript and superscript styles. If you wanted to add the trademark symbol to, say, Chia Pet™, then you’d select the letters TM and set the vertical alignment to “super”. In addition, for more accurate control, you can type a value (like 10%) to raise an object above its normal baseline, or a negative value (like −10% or −5 pixels) to move an object down.
Vertical alignment also works with graphics, and designers often use the options top, bottom, and middle with HTML table cells to place content within a cell (see Modifying Cell and Row Properties for details on how that works).
Text align. This property controls the alignment of a block-level element like a paragraph or table. You can choose from among the usual suspects—“left”, “center”, “right”, or even “justify”. (Like the text in this paragraph, justified text has both the left and right edges of the text aligned.)
Use the “justify” option with care, however. Because Web browsers don’t have the advanced controls that page-layout software does, they usually do an awful job of justifying text on a computer screen. The results are often difficult to read, and ugly.
Text indent. This useful option lets you indent the first line of a paragraph. If you enter 15 pixels, each paragraph gets an attractive first-line indent, exactly as in a real word processor.
You can also use a negative number, which makes the first line extend past the left margin of the paragraph, creating a hanging indent (or outdent)—a nice effect for bulleted lists or glossary pages. If you use a negative number, it’s a good idea to set a left-margin (Dreamweaver’s CSS Layouts) for the paragraph that equals the value of the negative text indent, otherwise the first line might extend to the left, off the screen!
Whitespace. This property controls how the browser displays extra white space (spaces, tabs, returns, and so on). Web browsers normally ignore extra spaces in the HTML of a page, reducing them to a single space character between words and other elements (see Multiple Spaces). The “pre” option functions just like the HTML <pre> tag: Extra white space (like tabs, multiple spaces, and carriage returns) in the HTML code appear in the document window (see Preformatted Text for more on this option). The “nowrap” option prevents lines from breaking (and wrapping to the next line) when they reach the end of the browser window.
Display defines how a Web browser should display a particular element like a paragraph or a link. The range of choices for this property may overwhelm you—and you may be underwhelmed when you find out that all browsers don’t support most of these options.
The only three options that work reliably across browsers are “none”, “inline”, and "block”. The “block” option treats any item styled with this property as a block—separated from other content by space above and below it. Paragraphs and headings normally appear this way. But you can apply this value to a link (which normally appears inside a block-level element like a paragraph) to turn it into its own block. Usually, you have to click directly on the text or image inside a link to jump to the linked page. But when you set a link’s display to “block”, its entire width—even areas where no text appears—is clickable.
The “inline” option treats the item as though it’s part of the current block or paragraph, so that any item styled with this property (like a picture) flows together with other items around it, as if it were part of the same paragraph. People frequently use this property to take a bulleted list of links and turn it into a horizontal navigation bar. The Spry Menu bar, discussed on Creating a Navigation Menu, uses this technique to create a horizontal menu. For a good tutorial on this topic, visit http://css.maxdesign.com.au/listutorial/horizontal_introduction.htm.
The “none” option is the most fun: It turns off the display of an item. In other words, any text or item styled with this option doesn’t appear on the page. You can use JavaScript programming to switch this property on and off, making items seem to appear and disappear. In fact, Dreamweaver’s Change Property behavior gives you one simple way to do this (see Change Property).
To exercise greater control over bulleted and numbered lists, use the CSS options in the CSS Rule Definition window’s List category (see Figure 4-18).
Type. Select the type of bullet you’d like to use in front of a list item. Options include: “disc”, “circle”, “square”, “decimal” (1., 2., 3.), “lower-roman” (i, ii, iii), “upper-roman” (I, II, III), “lower-alpha” (a, b, c), “upper-alpha” (A, B, C), and “none” (no bullet at all).
Bullet image. For the ultimate control of your bullet icon, skip the boring options preprogrammed into a Web browser (like disc, circle, square, or decimal) and supply your own. Click the Browse button, and then, from your site folder, select a graphics file. Make sure the graphic is appropriate bullet material—in other words, small.
Figure 4-18. Top: Take control of your bulleted and numbered lists using the CSS Rule Definition window’s List category. With Cascading Style Sheets, you can even supply your own graphic bullets. Bottom: A bullet-crazed Web page, for illustration purposes. Parading down the screen, you can see “inside” bullets, “outside” bullets, and bullets made from graphics.
Tip
The Background Image property (see Background Images) is a more versatile solution to adding bullet images to a list. Since you can accurately position a background image, you can easily tweak the placement of your bullets. Here’s how to do it: Create a style for the <li> tag (or a class style that you apply to each <li> tag); make sure you set the List property type to “none” (this hides the bullet); set the background image to your graphical bullet; and play with the background position values (Horizontal and vertical position). Playing with the padding values (Dreamweaver’s CSS Layouts) helps position the text relative to the image.
Position. This property controls how the bullet is placed relative to the list item’s text. The “outside” option places the bullet outside the margin of the text, exactly the way bulleted lists normally appear on a Web page. “Inside”, on the other hand, displays the bullet within the text margin, so that the left edge of the bullet aligns with the left margin; Figure 4-18 should make the effect clearer.
Tip
If you want to adjust the amount of space Web browsers normally use to indent lists, set the left padding property (see Dreamweaver’s CSS Layouts) to 0, and set the left margin (see Phase 1: Getting Dreamweaver in Shape) to the amount of indent you’d like. Sometimes you want no indent at all—for example, if you’re creating a list of links that should look like buttons, not bulleted items—set both the left padding and left margin to 0 (while you’re at it, set the bullet type to “none” as described above).
In this tutorial, you’ll practice the basic techniques required to create and edit styles. Make sure you grasp the fundamentals covered in the following pages: You’ll be building lots of style sheets in the other tutorials throughout this book using these same methods. For this tutorial, you’ll create an external style sheet for formatting pages on the Chia Vet Web site.
Note
Before getting started, download the tutorial files from www.sawmac.com/dwcs4/. See the Note on Phase 1: Getting Dreamweaver in Shape for more details.
Once you’ve downloaded the tutorial files and opened Dreamweaver, you need to define a site for this tutorial. In the first tutorial back in Chapter 1, you used Dreamweaver’s Site Definition Wizard to step you through the process of defining a site. In this tutorial, you’ll practice the advanced method that provides the fastest way to define a site and get started working.
Choose Site → New Site.
Click the Advanced button and, for the Site Name, type CSS Tutorial.
The only other step that’s required to define the site is to tell Dreamweaver where the site’s files are located on your computer.
To the right of the “Local root folder” box, click the folder icon.
The Choose Local Root Folder window appears (see Figure 1-14 on Defining a Site the Fast Way). This is just a window onto your computer’s file system; navigate to the proper folder just as you would when working with other programs.
Navigate to and select the Chapter04 folder located in the MM_DWCS4 folder. Click the Select (Choose on Macs) button to select this folder, and then, in the Site Definition window, click OK to complete the process of defining a site.
You should see two files—about.html and services.html—in the Files panel. (If you don’t see the Files panel, choose Window → Files to open it.)
In this example, you’ll create a collection of styles for the Chia Vet Web site.
Choose File → Open; click the Site Root button (at the lower left of the open file window).
The Site Root button is a handy tool. It automatically takes you to the local root folder for the site you’re currently working on, saving you the effort of having to manually navigate to that folder.
Double-click the file named services.html.
The Web page contains a listing of services for the Chia Vet company. The page has a few headline tags and a bunch of paragraphs. The page’s text is plain, boring-looking HTML, so you’ll use CSS to spiff it up.
To start, you’ll create a style for the first headline.
Triple-click the headline “Chia Vet Services”.
This selects the entire headline. You’ll now use the Property inspector to select a font.
Make sure the CSS button is pressed in the Property inspector (see Figure 4-4), and then, from the Font menu, choose “Palatino Linotype, Book Antiqua, Palatino, serif”.
Because you’ll be creating a new style, the New CSS Rule window opens (see Figure 4-19). You’ll first pick the type of style you wish to create.
From the Selector Type menu at the top of the window, select Tag.
This step lets you create a style for a particular HTML tag—in this case, the <h1> tag. In other words, you’re going to create a formatting rule that applies automatically to every heading 1 paragraph.
The Selector Name field should have “h1” listed, but if it doesn’t, use the middle drop-down menu to select “h1”.
Next you’ll choose where to store the CSS code for this new style—in this case, in an external style sheet.
From the bottom menu, choose New Style Sheet File as pictured in Figure 4-19. Click OK.
The Save Style Sheet File As dialog box appears. You’re about to create the file—an external style sheet—that stores the styles for this page.
Figure 4-19. The New CSS Rule window has changed a lot since the last version of Dreamweaver, but the three basic tasks it requires are the same: Pick the type of style you want to create; name the style; and pick where the CSS code should be stored. Notice how the large text box explains what Web page elements the style will apply to—in this case all <h1> tags.
In the File Name box (the Save As field on the Mac), type global.css, and then click Save.
Cascading Style Sheet files always end in .css; that’s how Web servers and browsers can tell what kind of files they are.
Notice how the headline now uses the new font. You’ve created a style and added an external style sheet to your site in just a couple steps. Now, you’ll add some color.
Make sure the headline is still selected, and then, in the Property inspector’s Color field, type #779A00 (see Figure 4-20).
You can use the color box to select a color if you prefer.
The New CSS Rule window doesn’t appear this time, because now you’re editing the h1 tag style you created previously. Time to change the size of the font.
Figure 4-20. Choosing properties for an element that already has a style applied to it—like the h1 tag style here—updates that style.
Note
If the New CSS Rule window appears again at either steps 9 or 10, something went wrong. Click the Cancel button. You must have accidentally selected some other text—maybe just part of the headline—before using the Property inspector. To get back on track, triple-click the top headline again, and then repeat step 9 or 10.
In the Property inspector’s Size box, type 48.
The Property inspector should now look like Figure 4-20. You’ve just set the font size to 48 pixels tall. You’ve pretty much reached the limit of what the Property inspector is capable of, but you’ve barely scratched the surface of Cascading Styles Sheets. In the next part of this tutorial, you’ll learn how to edit a style and access the wide range of formatting options that CSS offers.
Make sure the CSS Styles panel is open (Window → CSS Styles), and make sure the All button is selected at the top of the panel.
This displays all the style sheets attached to this page (in this case, just global.css).
If it isn’t already, expand the list of styles in the global.css style sheet by clicking the + icon (arrow on the Mac) to the left of “global.css”.
This lists all the styles you’ve added to the external style sheet—just the one h1 tag style at this point.
In the list, double-click “h1”.
This action opens the CSS Rule Definition window where you can access a wide range of CSS properties (see Figure 4-21). First, you’ll remove the bold formatting from the headline.
From the Font-Weight menu, choose “normal”, and then click the Apply button.
You can preview the look of a tag style without closing the CSS Rule Definition window by clicking the Apply button—just drag the window out of the way of the headline.
When formatting text, you can use many other non-text related CSS properties. For example, you can add border lines to any element on a page.
In the category list, click Border.
The CSS Rule Definition window now displays all the properties used to put a border around a style. You can control each border individually, or use the same line style for all four edges. In this case, you’ll add lines to just the top and bottom of the headline.
Figure 4-21. The CSS Rule Definition window provides access to many more CSS properties than the Property inspector. In addition, you have to use the Font-weight menu to remove bold formatting from a heading tag—no matter how many times you click the B button on the Property inspector, you can’t remove bold from headlines.
Click to turn off all three “Same for all” checkboxes. For the Top border, choose “solid” from the Style menu, type 7 in the Width box, and type #F93 in the color box. For the Bottom border, choose “solid” from the Style menu, type 2 in the Width box, and type #F93 in the color box.
The window should now look like Figure 4-22. As mentioned on Phase 4: Adding Images and Text, #F93 is shorthand for #FF9933. If you click the Apply button now, you may notice that the top border is a little too close to the top of the headline. You can add a little breathing room using the CSS Padding property.
In the Rule Definition window, click the Box category. Uncheck the “Same for all” box underneath Padding, and then, in the Top padding box, type 5.
Padding is the space between the edge of an element (where the border appears) and the stuff inside the element (like text). In this case, adding 5 pixels of top padding adds 5 pixels of space between the top border line and the headline’s text. You’ll learn more about padding on Dreamweaver’s CSS Layouts.
Click OK to close the window and complete editing the style.
Now you have a distinctive looking headline. But you’ve just started building styles for this page.
Choose File → Save All.
The Save All command can be a real lifesaver when working with external style sheets. Even though you’re looking at and working on the Web page (services.html), each time you add a style, Dreamweaver updates the external style sheet file (global.css). So most of the work you’ve done so far in this tutorial has caused Dreamweaver to update the global.css file. Unfortunately, the regular keyboard shortcut to save a file, Ctrl+S (⌘-S), saves only changes to the Web page (the file currently visible to you). Make sure you invoke the Save All command frequently, otherwise if Dreamweaver or your computer crashes, you could lose all the changes you’ve made to an external style sheet. (You can even set your own keyboard command for the Save All command. See Keyboard Shortcuts for details.)
The Property inspector isn’t the only way to create a style—in fact, since it offers only a limited number of formatting options, it isn’t even the best way to create a style. The CSS Styles panel provides a faster method with more comprehensive choices.
At the bottom of the CSS Styles panel, click the New Style button (the + button pictured in Figure 4-1).
The New CSS Rule window appears. You’ll be creating another tag style for the heading 2 tag.
From the top menu, choose Tag; in the Selector Name field, type h2 (or select “h2” from the menu); and, in the bottom menu, make sure “global.css” is selected. Click OK.
This action adds a new tag style to the global.css style sheet. You’ll set a few text properties next.
From the Font-family menu, choose “Palatino Linotype, Book Antiqua, Palatino, serif”.
You’ll use the same font as the heading 1, but you’ll change its size and color.
In the Size box, type 24 and, in the Color box, type #EC6206.
This action creates medium-sized, orange text. To make the headline stand out a bit, you’ll make all the text uppercase. Fortunately, you don’t have to hold down the caps-lock button and retype each headline to make them uppercase—there’s a CSS property that can do that for you.
From the Text-transform menu, choose uppercase.
One problem with this design is the large gap between the subheads and the paragraphs following them. The heading 2 paragraphs (“Preventative Care”, for example) introduce the paragraph that follows. Removing the gap that appears between the heading and the following paragraph would visually tie the two together better. To make this change, you must first remove the margin below each headline.
In the left hand list of CSS categories, select Box. In the Margin area, turn off the “Same for all” checkbox; in the Bottom box, type 0.
This action should remove any space that appears below the heading 2 tags.
Click OK to close the Rule Definition window and finish editing the style.
The space between the headlines and the paragraphs hasn’t changed a bit. What gives? Paragraphs and headlines have space both above and below. The space you’re seeing is actually the top margin of the paragraph tag.
Top and bottom margins have a peculiar feature: They don’t add up like 1+1=2. In other words, the bottom margin of the heading 2 isn’t added to the top margin of the paragraph in order to calculate the total space between the two blocks of text. Instead, a Web browser uses the margin with the largest value to determine the space between paragraphs (a lot of text layout programs, including word processors, share this behavior).
For example, say the <h2> tag has a bottom margin of 12 pixels, while the paragraph following has a top margin of 10 pixels. The total space between the two isn’t 22 pixels (10+12)—it’s 12 pixels (the value of the larger margin). So, if you remove the top margin of the paragraph, the gap between the two blocks of text is still 12 pixels (the h2’s bottom margin). That’s exactly what’s happening here, so you need to modify the paragraphs’ margins. You can do that by creating another style.
In the CSS Styles Panel, click the New Style button.
The New CSS Rule window appears. You’ll create a tag style to control the formatting of paragraphs.
From the top menu, choose Tag; in the Selector Name box, type p, and then, in the bottom menu, make sure “global.css” is selected. Click OK to create the style.
Before getting to that pesky margin, first set some basic type options.
From the Font-family menu, choose “Trebuchet MS, Arial, Helvetica, sans-serif”, and then, in the Font-size box, type 14.
CSS provides a lot of control over type, including the ability to adjust the leading, or space, between lines in a paragraph.
In the Line-height box, type 150, and then, from the pop-up menu to the right, choose %.
The line-height property controls the space between lines of text. In this case, you’ve set that space to 150%, which means that each line will be 150% (or 1.5 times) the size of the font. A setting of 150% adds more space than usual between each line of text in a paragraph—the result is more white space and a more luxurious feel.
Now back to that margin problem.
Click the Box category; in the Margin section, uncheck the “Same for all” box. Type 5 in the Top box, and 75 in the Left box.
The window should now look like Figure 4-23. The 5 pixel top margin adds just a small amount of space between the paragraph and the <h2> tag above it—completely removing all space between the two would make them seem crowded together. The 75 pixel left margin is just for fun. This margin indents the paragraphs from the left edge of the page by 75 pixels, creating a distinctive look that makes the heading 2 paragraphs stand out more.
Click OK; choose File → Save All.
The page is nearly complete. Just one more style to create.
Now you’ll create a style to format the copyright notice at the bottom of the page. It’s inside a regular paragraph (<p> tag), so it’s getting all its formatting from the p tag style. Here’s an instance where you’d like to style a single paragraph, without affecting the other paragraphs on the page. A class style is perfect for this kind of specific styling task.
On the CSS Styles panel, click the New CSS Style button (+).
The New CSS Rule window opens. This time, you’ll create a class style rather than an HTML tag style.
From the top menu, select Class. In the Selector Name box, type .copyright (with a period before it).
Class styles always begin with a period—however, if you leave it out, Dreamweaver puts the period in there for you.
Note
Some beginners think that whenever you create a new style, you also need to create a new external Style Sheet. On the contrary, you can—and should—store more than one style in a single external style sheet. In fact, if you’re creating a set of styles for an entire site, put them all in the same external style sheet.
Make sure “global.css” is selected in the bottom menu, and then click OK.
You’re adding yet another style to the external style sheet you created at the beginning of this tutorial. The CSS Rule Definition window appears. You’ll add a few new properties to make this style look different from the rest of the text on the page.
In the size box, type 12; from the Font-weight menu, choose “bold”; and for the Color, type #666666 or use the Color box to select a gray color.
The smaller text and lighter gray color make the copyright less prominent on the page; the bold setting makes it stand out from the other paragraphs. Finally, you’ll add a line above the copyright to separate it from the page.
In the category list, click Border.
The CSS Rule Definition window now displays all the properties used to put a border around a style. In this case, you’ll add a line above the copyright notice.
Click to turn off all three “Same for all” checkboxes. For the Top border, choose “dashed” from the Style menu, type 1 in the Width box, and type #93BD00 in the color box.
You have several different styles of borderlines, including dashed (see Adding Borders for the different types of borders). Lastly, you’ll add a little space between the border and the text.
In the left hand list of CSS categories, click the Box category. Uncheck the “Same for all” box in the Padding area, and then, in the Top box, type 5.
While margins control the space between elements (like the gap between paragraphs), padding controls the space from the content to the content’s border. In other words, adding padding pushes a border further away from the text (or other content) you’re styling.
You’ll change the copyright notice’s margin settings as well.
In the Margin area, uncheck the “Same for all” box, and then type 25 in the Top box and 0 in the Left box.
The window should look like Figure 4-24. The 25 pixels of top margin pushes the copyright notice away from the bottom of the paragraph of text above it. In addition, since all the paragraphs are indented 75 pixels from the left edge, you need to set the left margin of the copyright notice to 0. This action essentially overrides the 75 pixel margin from the p tag style and lets the copyright notice hug the left edge of the page.
Figure 4-24. The difference between padding and margin is subtle, but important. Both properties add space around the content that’s being styled. And if you don’t have a background color, image, or border, both properties pretty much act the same. However, when you do have a background color, image, or border, padding adds space between the content and the edge of the backgrounds and borders. Margins add space outside the border and background.
Click OK.
The Rule Definition window closes, but this time, nothing’s changed in the document window. Unlike HTML tag styles, class styles don’t show up anywhere until you apply them by hand.
Scroll to the bottom of the page, and select the last paragraph with the copyright notice.
This action sets you up for applying the style. You can also just click anywhere inside the paragraph (without selecting any text) to apply a class style to it.
In the Property inspector, click the HTML button, and then, from the Class menu, choose “copyright” (see Figure 4-25).
Boom—the copyright notice suddenly changes size, color, and grows a line above it. Magic. You may also notice that the copyright still uses the same font as the other paragraphs. In fact, it has “inherited” that font type from the p tag style—you’ll learn about inheritance, an advanced CSS concept, on More about CSS.
Figure 4-25. The Class menu in the HTML mode of the Property inspector lists all class styles. It also displays the style name using the style’s text formatting—in this case, bold, gray text. Notice that only class styles are listed; tag styles don’t appear in this menu, since you don’t apply them manually. You can also apply a class using the Property inspector’s CSS Mode as described on Applying a Class Style.
Now that you’ve created these styles, you may be wondering how you can use them on other pages—after all, that’s the beauty of external style sheets. Once created, it’s a simple process to add a style sheet to other pages in the site.
Choose File → Save All; close the services.html Web page.
You’ll need to open a new Web page to attach the external style sheet.
Choose File → Open. In the Chapter04 folder, double-click the file about.html.
This file is another page for the Chia Vet Web site. It has no formatting yet, so you’ll attach the external style sheet you just created.
On the CSS Styles panel, click the Attach External Style Sheet button (see Figure 4-1).
Click the Browse button.
The Select Style Sheet dialog box appears.
Navigate to the Chapter04 folder (or click the Site Root button), and then double-click the global.css file.
Don’t forget the Site Root button. It appears on every window in which you need to save, open, or select a file. It’s a great shortcut to make sure you’re working in the correct folder for your site.
You can ignore the other settings in the Attach External Style Sheet window for now (they’re described on Linking to an External Style Sheet).
Click OK to attach the style sheet to the page.
Dreamweaver instantly formats the headlines and main text of the story. Pretty cool—and very efficient. You need to apply the .copyright class style only to the last paragraph on the page.
Scroll to the bottom of the page, and then click anywhere inside the paragraph with the copyright notice.
Next you’ll add a style to the tag.
From the Class menu on the Property inspector, select “copyright” (see Figure 4-25).
This page is done. Time to view it.
Press F12 (Option-F12 on Mac) to preview the page.
Dreamweaver probably prompts you to save your files; go ahead and do that. The finished page should look something like Figure 4-26. If you’d like to compare your finished product to the completed version, you’ll find those pages in the Chapter04_finished folder in the tutorials folder.
Note
You may need to hit your browser’s refresh button to see the most recent changes you made to the style sheet. This is one problem related to designing with external style sheets—they’re often cached by a Web browser (see Download Statistics). Normally that’s a good thing—it means visitors to your site have to wait only once for the file to download. But when you’re in the midst of a design, frantically switching back and forth between Dreamweaver and a Web browser preview, the browser might retrieve the older version of the external style sheet that’s saved in its cache, rather than the newly updated file on your computer.
You can work around this problem: Open the Preferences window (Edit → Preferences [Dreamweaver → Preferences on Mac]); select the “Preview in Browser” category, and then turn on the “Preview using temporary file” box. Now, when you preview the page, Dreamweaver actually makes a temporary file on your computer that incorporates both the CSS and HTML of the page. This defeats a browser’s cache so that now you’re seeing the very latest changes. This setting has the added benefit of stopping Dreamweaver’s annoying “You must save your file before previewing” dialog box each time you preview a page.
Get Dreamweaver CS4: The Missing Manual now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
