Dreamweaver CS5.5: The Missing Manual

Chapter 4. Introducing Cascading Style Sheets

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 you create a document in even the most basic word processing program.

Fortunately for web designers, you can change the ho-hum appearance of HTML using a technology called Cascading Style Sheets (CSS). CSS gives you the tools you need 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 pages. Using it, 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, centralized 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 it, 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’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. In Chapter 9, you’ll learn how to harness the power of CSS to fully control the layout of a web page. And in Chapter 10, you’ll learn how to troubleshoot CSS problems with Dreamweaver.

Cascading Style Sheet Basics

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 a browser should format a particular HTML tag. 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 images; for instance, you can create a style that aligns an image along the right edge of a web page, surrounds the image with a colorful border, and adds a 50-pixel margin between the image and the surrounding text.

Once you create 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 apply a style to it to instantly change the text’s size, color, and font. You can also create styles for specific tags, so that, for example, a browser displays all <h1> elements in the same style, no matter where they appear on your site.

Why Use CSS?

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 style their pages. In fact, the older HTML tags used to format text and other page elements have been phased out by the World Wide Web Consortium (W3C), the organization that defines Web standards, in favor of CSS. And following along with industry practice, Dreamweaver CS5.5 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 HTML. With it, you can format paragraphs to resemble those that appear in a book or newspaper (with the first line indented and no space between paragraphs, 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. CSS usually shaves off a lot of kilobytes from text-heavy pages, while maintaining a high level of formatting control. As a result, your pages look great and load faster.

Style sheets also make it easier to update your site. You can collect all your styles into a single file linked to every site page. When it’s time to change every <h2> tag to lime green, you edit a style in the style sheet file, and that change immediately ripples throughout your site, wherever you used that style. You can thus completely change the appearance of a site simply by editing a single style sheet.

UP TO SPEED: Getting to Know (and Love) CSS

Cascading Style Sheets are an exciting—and complex—addition to your web-building toolkit, worthy of entire books and websites. For example:

• For an excellent tutorial on CSS, visit W3 Schools’ CSS tutorials at www.w3schools.com/css/.

• If you want to get help and learn more about CSS, the Sitepoint CSS Forums (www.sitepoint.com/forums/css-53/) are always busy with advice from a great community of CSS enthusiasts.

• Sitepoint also provides a great online CSS reference at http://reference.sitepoint.com/css. This site is a dictionary-like resource of all CSS properties, including information on which browsers support which CSS properties.

• You’ll also find a helpful collection of wisdom generated on the CSS-Discuss Wiki at http://css-discuss.incutio.com. This site provides insider tips, tricks, and resources for solving many common CSS problems.

• For the ultimate source of information, turn to the World Wide Web Consortium’s website: www.w3.org/Style/CSS. The W3C is the body responsible for many of the standards that drive the Web—including HTML and CSS. (Beware: This site is the ultimate authority on the matter, and reads like a college physics textbook.)

• For a great list of CSS-related sites, visit the Information and Technology Systems and Services website at the University of Minnesota, Duluth: tinyurl.com/jg2fe.

• If you just love to curl up by the fireplace with a good tech book, try CSS: The Missing Manual by David McFarland (hey, that name rings a bell!). It’s written in the same style as this book, with in-depth coverage of CSS and step-by-step tutorials that guide you through every facet of this complicated technology.

CSS may sound like a cure-all for HTML’s anemic formatting powers, but truth be told, it’s a bit tricky to use. For example, CSS support varies from browser to browser, so you need to test your pages thoroughly on a variety of browsers.

Fortunately, Dreamweaver is better than ever at displaying complex CSS-based designs, so you can develop your general design in Dreamweaver and then use its preview feature to fine-tune your designs for different browsers. Even better, use Adobe’s BrowserLab service to generate screenshots of your page taken from a wide range of browsers on both Windows and Mac computers. You’ll learn how to use this service on Previewing Web Pages in BrowserLab.

Internal vs. External Style Sheets

As you create new formatting styles, you’ll add them to a style sheet that you store either in the web page itself (in which case it’s an internal style sheet), or in a separate 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, if the marketing department wants a one-page online “flyer” with a unique format and its own distinctive look.

Tip

When you create a new page design, it’s often easier to add styles to an internal style sheet. Once you’re satisfied with the design, you can export the styles to an external style sheet—for use by all your site’s pages—as described on Moving and Managing Styles.

An external style sheet, on the other hand, contains only styles—no HTML—and you can link numerous pages to it. In fact, you can link every page on your site to it, giving your site a uniform, sitewide set of styles. For instance, you can put a headline style in an external style sheet, and link every page on the site to that sheet. 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 style sheet (for styles that apply to the whole site) and an internal style sheet (to format just that page). You can even attach multiple external style sheets to a single page.

Types of Styles

Styles come in several flavors. The most common are class, ID, and tag styles.

A class style is one you create, name, and attach manually to an HTML tag or to selected text (in other words, text you select with your cursor). Class styles work much like styles in word processing and page layout programs. If you want to display the name of your company in bold and red wherever it appears in a web page, you can create a class style named company that formats text in boldface and red letters. You would then select your company’s name on the page, and apply this style to it.

An ID style 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 website’s logo, copyright notice, main navigation bar, banner, or a particular field in a form. Designers frequently use IDs when they create CSS-based layouts like those you’ll learn about in Chapter 9. An ID style is similar to a class style in that you name the style and apply it manually. But you can apply a class to many different elements on a page, and you can apply an ID to only one tag or object per page. (It’s okay to use multiple IDs on a single page, so long as each ID name is different.)

The other major type of CSS style is called a tag style, and it applies to an individual HTML tag globally, as opposed to individual pages or 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 a tag style for the <h1> tag. In effect, you redefine the tag so that a browser displays it in Arial.

The main benefit to redefining an HTML tag 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, a browser displays <h1> tags in Arial wherever it encounters them.

These HTML tag styles are the easiest way to format a page. For one thing, there’s no need to select the tag manually and apply the style; wherever the tag appears, a browser automatically applies the style.

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 (and every other paragraph on your site). 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 one way, and all the other paragraphs on the page a different way, you create a class style and apply it to that first paragraph. (Another solution is a slightly more complicated, but more flexible, type of style called a descendent selector—you’ll read about those later, on Descendent Selectors.)

Note

In addition to class 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.

Creating Styles

Dreamweaver gives you several ways to create CSS styles. For text, you can use the Property inspector’s CSS mode to apply a font, font size, font color, font weight, and alignment to selected text. To create styles for elements other than 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, you’ll look at both methods—starting with the more versatile CSS Styles panel, then moving on to the Property inspector.

Phase 1: Set Up the Style

Dreamweaver gives you many ways to create a new style: On the CSS Styles panel, click the new style button (which Dreamweaver calls the New CSS Rule button; see Figure 4-1); right-click anywhere in the CSS Styles panel, and then, from the menu that appears, select New. Alternatively, choose Format→CSS Styles→New. The New CSS Rule dialog box appears (Figure 4-2), where you begin creating your new style. (In the technical language of CSS, a style is actually called a rule, but for simplicity’s sake this book 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 the styles the current page uses, including those in both external and internal style sheets. Here, one external style sheet—main.css—contains five styles. The first two are tag styles (notice that the names match various HTML tags), while the next three are ID styles (note the # at the beginning of the name), and the last three are class styles (note the period before the name). 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 (see page 319); the three buttons at the bottom left of the panel (circled) control how Dreamweaver displays the Properties list.

Figure 4-2. In the New CSS Rule dialog box, you choose a type of style, give it a name, and decide whether to put the style in an internal or external style sheet. You use the two dimmed buttons, labeled Less Specific and More Specific, when you type a special type of CSS selector, called a descendent selector (see page 315).

Here’s a quick tour of your choices:

• Selector Type. From the Selector Type menu, choose the kind of style you want to create. Class creates a style that you manually apply to page elements, ID creates a style that you can use only once on the page, and Tag creates an HTML style that Dreamweaver applies to each occurrence of the tag.

  You’ll want to use a fourth type of CSS style, Compound, to create more advanced style types, such as pseudo-classes, attribute selectors, and descendent selectors. You’ll learn about these styles in various parts of the book; you can find a detailed discussion starting on Compound Selectors.

  In addition, if you select something on a page (such as a paragraph, an image, or a headline), 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 applies formatting to nested page elements, that is, to page elements within other HTML tags. For example, div p is a descendent selector that formats any paragraph (that’s where the p comes from) that appears within a <div> tag. So in cases where you want a descendent selector, choose Compound selector.

• 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, you have to start class style names with a period—.copyright, for example—and ID style names with the # 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, and #column2 all work fine. Dreamweaver lets you know if you use any invalid characters.

  If you chose the Tag style instead, choose the HTML tag you want to redefine from the Selector Type pop-up menu.

  Note

  If you’re an HTML guru, you may find it faster to skip the Selector Name pop-up menu and just type the tag (minus the brackets) in the text box. For example, if you want to create a style for all unordered (bulleted) lists, type ul.

  If you select the Compound option, Dreamweaver lets you type any valid CSS selector type in the Selector field (you’ll learn about more selectors on Compound Selectors). You use this feature for some advanced CSS tricks, but you can also use it just to create a class, ID, or tag 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 it will apply the selector. 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 Dreamweaver will apply this rule to all the HTML elements to which you assigned the class property .copyright (in other words, to all the text and tags to which you applied the class copyright, 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 helps 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 you want to put the CSS code for the style you’re about to create. Choose “This document only” if you want to use the style only on the current web page (creating an internal style sheet, as described on Internal vs. External Style Sheets). To create a new external style sheet, choose New Style Sheet File from the Rule Definition pop-up menu. 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 previously linked an external style sheet to this document, then that style sheet’s name appears in the pop-up menu, indicating that Dreamweaver will add the new style to this style sheet file.

  Note

  If you create a bunch of internal styles on 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 indicate that you want to create an external style sheet, clicking OK brings up a Save Style Sheet As dialog box. Navigate to your site’s folder, and then type in a name for the new external CSS file. Just as HTML files end in .html, so CSS files end in .css.

  Note

  If you’ll use 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, main.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 Selector Type option you select (Class, ID, Tag, or Compound), clicking OK brings you to the CSS Rule Definition window, discussed next.

Phase 2: Defining a Style

The CSS Rule Definition window lists all the available properties for styling text, graphics, tables, and other HTML tags (see Figure 4-3). You’ll learn about each of the properties throughout this book.

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, you can find the Type properties shown here discussed on page 146.

When you finish defining a style, click OK at the bottom of the Rule Definition window. Dreamweaver adds the style to the specified style sheet, and displays it in the CSS Styles panel (Figure 4-1).

The real trick to defining a style is mastering all the properties available, such as borders, margins, and background colors, and then learning how to use them reliably in different browsers. You’ll learn about different CSS properties starting on Text Formatting with CSS.

Creating a Style with the Property Inspector

The Property inspector’s CSS mode lets you quickly create (or modify) styles, such as choosing a font or a font size (see Figure 4-4) for text you select. In CSS mode, the Property inspector looks a lot like a formatting bar in a word processing program: dedicated buttons let you make text bold or italic, control alignment, and set font type, size, and color. All these options rely on CSS properties.

Figure 4-4. The Property inspector’s CSS mode either creates a new style when you select a formatting option like font size (top) or it adds the formatting property to an already existing style (middle). You can tell which action Dreamweaver will take by looking at the Targeted Rule menu—if it says <New CSS Rule>, Dreamweaver lets you create a brand new class, ID, tag, or other style. However, if a style name (like p or .copyright in the middle image) appears in that menu, you’re editing an already existing style. If you want to create a new one, select <New CSS Rule> from the menu before you select a formatting option. Normally you want to avoid the <New Inline Style> style, since it adds CSS directly to an HTML tag, making the web page’s file size larger, slower to load, and harder to update. However, inline styles come in handy when you need to create HTML emails, since that’s the most reliable way to add CSS to an email message.

To use the Property inspector’s CSS mode, select some text on the page (drag your cursor to select a swath of copy, double-click to select a word, and triple-click to select an entire paragraph or headline). Then, from the Property inspector, select an option—for example, choose a set of fonts from the font menu. If you don’t have a 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), and when you apply a format, Dreamweaver opens the New CSS Rule dialog box.

Now it’s up to you to pick the type of style (class, ID, and so on), name it, and decide where to store it; just follow the same steps you used to create a new style using the CSS Styles panel, as described on Creating Styles. You’re free to create a class, ID, tag 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 format settings you selected (for example, the font you chose appears in the Font menu).

Look at a basic example: Suppose you want to format a copyright notice at the bottom of a 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, Dreamweaver opens the New CSS Rule dialog box and, from the Selector Type 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, Dreamweaver applies the new class style named copyright to the paragraph and the Size box in the Property inspector displays “12” to denote the text’s pixel size.

The Property inspector’s CSS Mode behaves differently, however, if you already have a style applied to the selected text. In that case, the style appears in the Targeted Rule menu. For example, in Figure 4-4 (middle), you already applied the class style product to the selected text, so you see “.product” 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, it simply adds this new format to the existing style.

For example, say you create a .copyright class style with a font size of 12 pixels. If you select that copyright text again and then select a font color, Dreamweaver updates the .copyright class style—it adds the CSS color property to the style. Making additional formatting choices also updates the style.

Using Styles

Once you create 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 Anatomy of a Style) automatically dictate which tags they affect.

Applying a Class Style

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.

Applying a class style to text

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).

Figure 4-5. The easiest way to apply a class style is through the Property inspector. 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 the Class menu if the Property inspector is in HTML mode (top) or the Targeted Rule Menu when it’s in CSS mode (bottom). Dreamweaver uses only the bottom section of the Targeted Rule Menu (the stuff below “Apply Class”) to add (or remove) a class from a text selection. The other items listed let you create new styles, or view the styles that apply to the selection.

To style an entire paragraph, triple-click within the paragraph (or heading) to select it, and then use the Property inspector to select a 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).

Tip

You can also add a class style 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 a piece of text, or Dreamweaver applies the style just to the selected text, not the entire paragraph.

UP TO SPEED: Anatomy of a Style

When you style a page, Dreamweaver automatically handles the details of adding the proper CSS code to it, but if you’re looking for a way to impress your neighbors, here’s the behind-the-scenes scoop on how it works.

When you create an internal style sheet, Dreamweaver adds a pair of <style> tags to the head of the page. The opening <style> tag tells a web browser that the following information isn’t HTML—it’s CSS code. When the browser encounters the closing </style> tag, it knows that it’s at the end of the style definition.

Within the <style> tag, you see one or more styles (reminder: in CSS-speak, styles are also called “rules”). An HTML tag style for the Heading 1 tag (<h1>), for example, might look like this:

h1 {
    font-size: 24px;
    color: #003399;
}

The first part—h1—is called a selector in CSS-speak, and it identifies the style’s target. In this case, a browser applies this style wherever an <h1> (Heading 1) tag appears in a web page’s code.

The information between the braces—{}—defines the formatting the browser should apply. The preceding code contains two formatting instructions for the <h1> tag. Each is called a declaration and is composed of a property and a value. For instance, font-size: 24px is one declaration, which has a property of font-size and a value of 24px. In other words, this rule tells a browser that it should make the text inside an <h1> tag 24 pixels tall. The second declaration makes a browser display the text of all <h1> tags in the color #003399.

A class style looks just like a tag style, except that instead of the selector being a tag, it’s a name that you supplied, preceded by a dot, like this:

.company {
    font-size: 24px;
    color: #003399;
}

Styles in an external style sheet look exactly the same; the only difference is that external style sheets are separate files whose names end in .css, they don’t include the <style> tags, and must not include any HTML code. You link an external style sheet to a web page using the <link> tag. For example, to link a style sheet named styles.css to a web page, you could add this HTML code to the web page:

<link   href="styles.css"   rel="stylesheet"
type="text/css">

In Dreamweaver you can easily get a look at the raw style information of an external style sheet:

Near the top of the document window, in the list of related files, just click the CSS file’s name (see Figure 1-2).

On the other hand, if you apply a class style to a selection that isn’t a tag—like a single word that you double-click—Dreamweaver wraps that 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 doesn’t have its own tag.

Applying a class style to objects

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.

Note

You can apply any class style to any element, although doing so doesn’t always make sense. If you format a graphic with a style that specifies bold, red Courier type, it doesn’t look any different.

Other class styling options

You can also apply a class style by selecting whatever element you want 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 (circled), and then, from the Set Class submenu, select a class style. In addition, the Tag selector lets you know if a tag has a class style or an ID style already applied to it. If so, the style’s name is added at the end of the tag. For example, in this figure, the body has an ID of catalog applied to it (<body#catalog>) and an unordered list has the class .products applied to it (<body.products>).

Removing a Class Style

To remove a class style from text, select the text and then, from the Property inspector, 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 applied a class style to a selection of text, you don’t 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 that 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, Dreamweaver removes the <span> tag.)

You can’t, however, remove tag styles from HTML tags. For example, suppose you redefined the <h2> tag using the steps outlined on Creating Styles. If your page has three Heading 2 (<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 heading. You need to create a new class style with all the formatting options you want for that heading, and then apply it directly to this particular <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.)

Applying IDs to a Tag

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, the menu lists only unassigned IDs—IDs that exist in your style sheet but that you haven’t applied to a tag on the current 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 unlabeled, 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.

Note

The Tag selector tells you whether you applied an ID to a tag by including the # symbol with the ID name. 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 looks 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, select the element, and then, in the Property inspector’s ID field, delete the ID name.

Linking to an External Style Sheet

Whenever you create an external style sheet while adding a style to a web page, Dreamweaver automatically links it to the current document. To use its styles in a different web page, you must attach it to the page.

To do so, open the web page to which you want 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 want to attach to the document. If the style sheet you select is outside the current site—for example, it’s in another of your websites—Dreamweaver offers to copy the style sheet file into your site’s root folder; click Yes.

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.

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 Dreamweaver applies the styles. For example, you can use one set of styles when you print a page and another set when a browser displays the page. You’ll find in-depth information on media types and how to use them on Styling for Print.

When you attach an external style sheet, you can either “link” it or “import” it. These two choices are nearly identical; they’re simply two different ways to attach an external style sheet to a web page. The method preferred by the pros, linking to the style sheet, is also Dreamweaver’s suggested choice. Save yourself an extra click and go with the link option.

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 to the head of the web page, and automatically formats any tags in the document according to the style sheet’s tag styles. In Design view, you see the formatting changes take place in the document window immediately after you attach the style sheet.

If the style sheet contains class styles, on the other hand, you don’t see their formatting effects until you apply them to an element on the page, as described on Applying a Class Style.

Manipulating Styles

As with anything in Dreamweaver, styles are easy enough to edit, delete, or duplicate; all you need is a map of the terrain.

Editing Styles

While building a website, 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 is to update a website’s formatting.

Note

Although this section focuses mainly on how to style your text, you also use CSS styles to add background colors, background images, borders, and to accurately position elements on a 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 and then click the Edit Style button to open the Rule Definition window (this is the same window you used to create the style). Make your changes, and then click OK to return to the document window. Dreamweaver reformats the page to reflect your changes.

• 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—eek!—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.

FREQUENTLY ASKED QUESTION: When Formatting Disappears

Sometimes when I copy text from one web page and paste it into another, all the formatting disappears. What’s going on?

When you use Cascading Style Sheets, keep in mind that the actual style information is stored either in the <head> of a web page (for internal style sheets) or in a separate CSS file (an external style sheet). If a page includes an internal style sheet, when you copy text, graphics, or other page elements, Dreamweaver copies those elements and any class or ID style definitions that content uses. When you paste the HTML into another page, Dreamweaver writes the styles into the <head> of that page. This feature can save you some time, but it doesn’t solve all your woes. It doesn’t, for example, copy any tag styles you created, nor does it carry over most advanced styles (see Compound Selectors for more on advanced styles). So if you copy and paste some text—say, an <h1> tag styled with an h1 tag style—the <h1> tag and its contents end up in the other page, but the style information doesn’t.

In addition, if you copy and paste text from a page that uses an external style sheet, the styles themselves don’t go along for the ride. So if you copy a paragraph that has a class style applied to it and paste it into another document, the code in the paragraph is pasted (<p class=“company”> for instance), but the actual “company” style, with all its formatting properties, isn’t.

The best solution is to use a common external style sheet for all the pages on your site. That way, when you copy and paste HTML, all the pages share the same styles and formatting. So in the preceding example, if you copy a paragraph that includes a class style—class=“company”—into another page that shares the same style sheet, the paragraphs look the same on both pages. See pages Phase 1: Set Up the Style and The Forums for more on how to create an uber sitewide external style sheet.

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.

Note

The properties pane in the CSS Styles panel offers yet another, faster way to edit a style. This advanced technique requires a bit of CSS savvy and is discussed on Fast Style Editing with the Properties Pane.

Deleting a Style

At some point, you may find you created a style that you don’t need after all. Maybe you redefined the HTML <code> tag and realized that you never use it. You don’t need to keep it around, taking up precious space in the style sheet.

To delete a style, make sure you have the CSS Styles panel open (Window→CSS Styles), and the All button highlighted. 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 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 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 its styling. (See how to solve this problem using Dreamweaver’s powerful “Find and Replace” tool in Chapter 22.)

Renaming a Class Style

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 the style for the <p> tag and added an <h1> style to the style sheet—in other words, all the paragraphs in your pages would lose their 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 already applied the style throughout your site. The old class name still appears in the HTML everywhere you used it.

FAQ: When Undo Won’t Do

Sometimes when I edit a style—say, to change a font color—I can undo that change. But sometimes, I’m unable to undo changes I’ve made to a style. What gives?

You can undo only changes made to a document that’s currently open in the Document window. If you’re working on an HTML file in either Design, Code or Split view, you can undo any changes you make to that file. For example, say you add an internal style sheet (see Internal vs. External Style Sheets) to a document. If you edit one of those styles, Dreamweaver lets you undo those changes. Because the styles in an internal style sheet are a part of the web page you’re working on, choosing Edit→Undo undoes the last change you made.

However, if you’re working on a web page with an external style sheet, you’re actually working on two different files at the same time—the web page you’re building, and the style sheet file in which you add, delete, or edit styles. So if you’re designing a web page and edit a style in the external style sheet, you’re actually making a change to the style sheet file. In this case, choosing Edit→Undo undoes only the last change made to the web page. If you want to undo the change you made to the external style sheet, you need to use Dreamweaver’s related files feature. The name of the external style sheet appears on the Related Files toolbar, which appears below the title of the web page file; click the file’s name to move to its code, and then choose Edit→Undo. Click the Source Code button to return to your web page (you’ll learn more about the Related Files toolbar on The <td> tag).

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:

1. In the Property inspector, choose Rename in the Class menu.

   The Rename Style window appears (Figure 4-8).

   

   Figure 4-8. The Rename Style tool is a fast and easy way to change the name of a class style even if you used the style hundreds of times throughout your site.

2. From the top menu, choose the name of the style you want to rename.

   This menu lists all the class styles in the page’s style sheets, both internal and external.

3. In the “New name” box, type the new style name.

   You must follow the same rules for naming class styles as described on Phase 1: Set Up the Style. But, just as when creating a new class in Dreamweaver’s New CSS Rule window, you don’t need to precede the name with a period—Dreamweaver takes care of that.

4. Click OK.

   If the style whose name you’re changing is an internal style, Dreamweaver makes the change. Your job is complete.

   If the style belongs to an external style sheet, however, Dreamweaver warns you that other pages on the site may also use this style. To successfully rename the style, you have to use Dreamweaver’s “Find and Replace” tool to search the site and update all the pages that use the old style name. In that case, continue to step 5.

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 you can’t undo the find-and-replace.

   Note

   If you click No in the warning box that appears after step 5, Dreamweaver still renames the style in the external style sheet, but it doesn’t update your pages.

6. Click Yes.

   Dreamweaver goes through each page of your site, dutifully updating the name of the style everywhere it appears.

Duplicating a Style

Dreamweaver makes it easy to duplicate a CSS style, which is handy when you create, 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 do that in two ways. The easiest is to open the CSS Styles panel (Window→CSS Styles), right-click (Control-click) the name of the style you want 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.

Text Formatting with CSS

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 define six 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 more than 64 CSS properties. The most commonly used properties for text are stored in the Type 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. You’ll find those properties and others not listed in the Type or Block categories introduced later in this book (you don’t want to blow your circuits too quickly). For now, you’ll learn the most type-centric properties.

Choosing a Font

There are two ways to include fonts on a web page: the traditional method uses fonts installed on a visitor’s computer, while a newer technique lets you use specially prepared fonts—called “web fonts.” The newer technique lets visitors download the fonts they need, either from your site or from another site (Google is one example) that has those fonts available. In other words, you can use any font you want, it’s just that a visitor to your site will have to download them. This second technique, using what are known as “web fonts,” may sound like the answer to a designer’s dreams but there are a few drawbacks to it: first, you need different types of fonts for different browsers (for example, Internet Explorer 8 and earlier require an .eot font, while Safari needs TrueType fonts). Second, font files can be large, forcing end users to wait for lengthy downloads. Lastly, Dreamweaver doesn’t provide any tools for using web fonts: it can only display web fonts in Live View, and you’ll have to write all the CSS code by hand. Still, if you’re interested in using web fonts, see the box on the next page.

The traditional method—and the way that Dreamweaver supports—relies on fonts already installed on a visitor’s computer. This mimics the way you use fonts in a word processor. For example, as you craft a document in Microsoft Word, you can select any font on your computer, even that fancy font you just bought from a small font company in Nome, Alaska. Unfortunately, when you email that document to your boss, she won’t see the same design when she opens the document on her computer. That’s because she doesn’t own the same fonts. She’ll see some default font on her computer—Times, perhaps. Fonts show up in a distributed document only if each recipient has the same fonts installed.

Unless you use web fonts, you’re in the same predicament when crafting web pages. 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.

GEM IN THE ROUGH: Web Fonts

Recently, some web designers have started using what are called “web fonts”—downloadable fonts you can use on your site using special CSS. Basically, you either put the font on your web server or add either JavaScript or CSS code that points to another server (for example, a commercial font service like Typekit [http://typekit.com] or Google Web Fonts [http://www.google.com/webfonts]. When a visitor comes to your site, his browser not only downloads the HTML, but also the fonts needed to view the page.

Astonishingly, web fonts work in all major browsers (and even in IE 5 and up)! There are a few tricks to the process, including using a special IE-only font format for version 8 and earlier of IE, as well as a variety of different formats for other browsers, such as TrueType for Safari and WOFF for Firefox and Opera.

Unfortunately, Dreamweaver doesn’t provide any simple tools for using web fonts on your own pages, so you need to add the proper CSS code yourself, as well as get the proper fonts installed on your server. The easiest way to get started is to use one of the hundreds of “@font-face kits” available from Font Squirrel (http://www.fontsquirrel.com/fontface). These “kits” include all the font files you need (different browsers, unfortunately, require different types of fonts) as well as a starter CSS file that includes the basic CSS required to use the font. You just copy the CSS from the starter file (named stylesheet.css) and paste it into your own CSS file. For example, here’s the code required to use the font Teutonic No.1 Demi Bold:

@font-face {

   font-family: 'TeutonicNo1DemiBold';
   src: url('teutonic1-webfont.eot');
   src: url('teutonic1-webfont.eot?iefix')
format('eot'),

        url('teutonic1-webfont.woff')
format('woff'),
        url('teutonic1-webfont.ttf')
format('truetype'),
        url('teutonic1-webfont.
svg#webfontup94RhXF') format('svg');

   font-weight: normal;
   font-style: normal;
}

Once you add this to your CSS file (and you put the font files on your server) you can reference this font in your own CSS code by specifying the font’s “font-family.” For example, to create an <h1> tag style with the font listed in the CSS code above, you’d add the following:

h1 {
   font-family: 'TeutonicNo1DemiBold';
}

You can also add the name of your new web font to Dreamweaver’s font-family list, as described on Applying font formatting. Once you do that, you’ll be able to select the web font when you create new CSS styles using Dreamweaver’s CSS Rule Definition window (see Figure 4-12).

Google provides an even easier way to use web fonts. The Google Web Fonts service (http://www.google.com/webfonts/) hosts the fonts files on their fast and reliable web servers so you don’t have to. You merely add a link to the fonts to an external CSS style sheet and you can start using them on your web pages. For instructions on how to use Google’s service, visit: http://tinyurl.com/2a6jy7r.

You can deal with this dilemma several ways. 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 is to specify the font you’d like to use; if your viewer’s computer has the specified font, that’s what she’ll see. You can specify secondary or tertiary font choices, too, in case 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.

Applying font formatting

To use a font, you select it from either the Font menu in the Property inspector’s CSS mode or from the CSS Rule Definition window’s Font-family menu. In either case, you’re actually either creating a new style (as described on Creating Styles) or updating an existing one.

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 choose from one of the prepackaged lists just described; a typical choice is something like “Arial, Helvetica, sans-serif.” In other words, you don’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 PCs and another, similar-looking font, that’s common on Macs. Arial, for instance, is found on all Windows machines, while Macs offer the similar Helvetica font.

That’s it. You’ve just selected one of Dreamweaver’s predefined font lists, and any text the CSS style formats will use the font you selected. If you’d like a greater degree of control over the fonts your page displays, read on.

Creating custom font lists

Dreamweaver CS5.5 comes with 13 preset font lists, which incorporate fonts common to both Windows and Macs. But you can easily stray from the pack and create your own list. 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 your company uses—and always specify one font that you know is installed. This way, while your page may not look exactly as you intended, it’ll at least be readable.

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.

UP TO SPEED: Knowing Your Font Types

You can choose from literally tens of thousands of fonts to express your every thought: from bookish, staid, and classical typefaces to rounded, cartoonish squiggles.

Most fonts are divided into two categories: serif and sans-serif. Graphic designers often use serif fonts for long passages of text, as it’s widely believed that serifs—small decorative strokes (“hands” and “feet”) at the extremities of a letter’s main outline—gently lead the eye from letter to letter, making the text easier to read. Examples of serif fonts are Times, Times New Roman, Georgia, and Minion, the font used in most of this book.

Designers often use sans-serif (“without serifs”) fonts for headlines, thanks to their clean and simple appearance. Arial, Helvetica, Verdana, and Formata are all sans-serif fonts (you’re reading Formata right now). Some people believe that you should use only sans-serif fonts on web pages because they think the delicate decorative strokes of serif fonts don’t display well on the coarse resolution of a computer screen. This is an aesthetic judgment, so you should feel free to pick the fonts you think look (and read) the best.

There are other classes of fonts as well, such as script fonts that resemble handwriting and display fonts that are usually bold, fun, and difficult to read at small font sizes. However, the different operating systems have few of these types of fonts in common, so you won’t see them used frequently on web pages.

Here’s how you create a new “first choice, second choice, third choice” font list.

1. 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-10).

   

   Figure 4-10. In the Edit Font dialog box, you can not only create your own font lists, you can edit, remove, or reorder the predefined lists. 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 in the Property inspector, click the CSS Rule Definition window’s Font menu, or Format→Font menu, and then click the arrow keys near the upper-right corner of the dialog box.

2. Select a first-choice font from the “Available fonts” list, or type in the font name.

   Dreamweaver lists all the fonts installed on your computer 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).

   Tip

   You can add a web font when you create a custom font list. For example, using the CSS code listed in the box on Web Fonts, you would type TeutonicNo1DemiBold into the box below the list of available fonts (Figure 4-10) and then click the << button. Once you do so, that web font appears in the font-family menu when you create new styles in Dreamweaver.

3. Add the font you just highlighted to your new, custom font list by clicking the << button (or just double-clicking the font name).

   Your first-choice font appears in the “Chosen fonts” list.

4. Repeat steps 2 and 3 for each font you want to include in your custom list.

   The order in which you add the fonts is the order in which they appear on 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 add 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.

5. 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 computer doesn’t have any of the fonts you chose, 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.

   POWER USERS’ CLINIC: Font Convergence

   While Windows PCs and Macs used to come with very different sets of preinstalled fonts, there’s been some convergence in the past few years. These days, you can count on the average PC or Mac having the following fonts: Arial, Arial Black, Arial Narrow, Comic Sans MS, Courier, Courier New, Georgia, Times New Roman, Trebuchet MS, Verdana, and Webdings.

   If your audience includes people running Unix or Linux, all bets are off. In that case, stick to these three fonts: Helvetica (make sure to also specify Arial for Windows owners), Times (Times New Roman for Windows), and Courier (Courier New for Windows).

   You can find a concise comparison that lists fonts friendly to both Windows and Macs at http://tinyurl.com/3tnu7yvand another useful list at http://tinyurl.com/3jrhr2t. You can find a great article on the subject at http://tinyurl.com/29kosq.

   To jump-start your adventures, here are a few font combinations that work relatively well on both Windows and Macs:

   • Marker Felt Wide, Comic Sans MS, fantasy

   • Century Gothic, Gill Sans, Arial, sans-serif

   • Franklin Gothic Medium, Arial Narrow, sans-serif

   • Optima, Segoe UI, Arial, sans-serif

6. Click OK.

   Your new font package appears in the Property inspector’s Font menu, ready to apply.

Changing the Font Size

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 browser, usually 16 pixels. However, not only can people change that default size (much to the eternal frustration of web designers), but different operating systems have been known to display text at different sizes. Bottom line: You can’t really assume that text will appear at the same size on all your guests’ monitors.

To set a font size, you can use either the Size menu in the Property inspector’s CSS mode (Figure 4-11) or the CSS Rule Definition window’s Font-size menu (Figure 4-12). Whichever you choose, you’re either creating a new style as described on Creating Styles or updating an existing style.

Figure 4-11. You can set a dizzying array of font sizes using CSS. When you use 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.

Figure 4-12. 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—to make text upper- or lowercase.

The choices available from the Size menu break down into four groups:

• The None option removes any size information 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, measured in pixels. Nine-pixel-tall text is nearly unreadable, while 36-pixel copy makes a bold statement. One benefit of specifying pixel sizes is that the resulting text appears nearly the same across different browsers and operating systems, obviating 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 in your page. These choices come in handy when you define a base font size for the entire page using the Page Properties window (see Figure 1-20).

  Suppose you set the default text size for a web page at 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.

To change the size of text, simply select it, and then, from the Property inspector, choose a new size, or edit the appropriate CSS style as described on Manipulating Styles. If you applied a pixel value, you have an additional option: If you don’t like any of the sizes listed, you can type in any number you wish. In fact, unlike HTML, browsers 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-11) lets you use as the unit of measure 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 on-screen 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 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, all other browsers don’t have this problem.)

  Note

  This isn’t entirely true. You can tweak Internet Explorer to allow resizing of pixel-sized text, but you have to change some of the default settings of the browser. That’s something most people would never do.

• 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 16 pixels tall. In that case, 1 em would mean 16 pixels tall, 2 ems would be twice that (32 pixels), and 1.5 ems would be 24 pixels.

  The advantage of ems is that they let web visitors using Internet Explorer 6 (a dwindling minority) control the size of on-screen text. If it’s too small, they can increase the base font size. In Internet Explorer, you make this adjustment from the View→Text Size menu. Any text measured in ems then changes according to the web browser’s new setting.

  Note

  You don’t need to use ems to allow non-IE 6 browsers (in other words, the vast majority of the world) to resize text. In fact, all current browsers have a “Zoom” command that enlarges not only text but all other page elements (pictures, navigation links, and so on).

  You can use pixels and ems together. You could, for instance, set the base font size of 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.

  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—100% is the same as 1 em, 200% is 2 ems, and 75% is .75 ems. If you’re more comfortable with the notion of percentages than the typography-inspired ems, use percentage values.

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 people can change even these settings, so there’s no reliable way to measure “pixels-to-the-inch” on computer screens. The upshot is that if you’re not worried about IE 6’s inability to resize text, you’re safe using pixel values—they’re easier to understand, more consistent across browsers, and work fine with the zoom feature of all currently shipping browsers.

Picking a Font Color

To set the color of text, use the CSS color property. You can choose a color in the Property inspector’s CSS mode, or assign a text color in the Text category of the CSS Rule Definition window (Figure 4-12).

Most color formatting in Dreamweaver, whether for text or the background of a web page, makes use of Dreamweaver’s color box. You can pick a color by clicking the color box and, from the pop-up color palette, selecting a hue (see Figure 4-13). Or click the System Color Picker button to launch the Windows or Mac color-picker dialog box, which lets you choose from a much wider selection of colors.

Figure 4-13. Dreamweaver’s Palette Options menu is of limited use. It lets you select a different set of (very limited) rainbow colors for your palette. The first two choices, for example, contain the outdated web-safe color palette—a limited collection of 216 colors that display accurately on any computer. The web-safe palette made sense back when graphics cards were expensive and dinosaurs ruled the earth. Today, however, most monitors can display millions of colors. Likewise, the Grayscale palette offers 256 somber shades of gray (you’ll find them most useful for Ingmar Bergman tribute sites). To really exercise your color creativity, use your computer’s color-picker, and select from the millions of colorful options available to computers today.

In addition, you can use the eyedropper cursor that appears when you click the color box. This cursor is “loaded,” meaning you can click any spot on your screen—even outside the dialog box—to select a color, a trick that comes in handy when you want to use a color from an image elsewhere in your document (to have headline text match the color in an image, for example). You can even sample a color from another application (from any visible window, Dreamweaver or not): Just move the eyedropper over the color, and then click. (This click may take you out of Dreamweaver. Just return to Dreamweaver, and the color you sampled is listed in the color property box.)

Normally, Dreamweaver uses what’s called “hexadecimal notation” to specify the color you select (see the box below). However, Dreamweaver CS5.5 has expanded the available color options to include hexadecimal (or “hex”), RGB, HSL, RGBa and HSLa colors (see the box on Web Colors). To use one of the other color options, click the contextual menu button in the color selector (circled in Figure 4-13), and select an option from the Color Format menu – you can then sample a color from the page, from the color palette, or even from the System color picker and Dreamweaver will write the correct code for that color.

Warning

Only the RGB and two hex color formats are supported by Internet Explorer versions 8 and earlier. Until Internet Explorer users upgrade to IE 9 or switch to Firefox, Chrome, Safari, or Opera, you’re better off sticking with RGB or hex color values for your pages.

If you decide you don’t want to add color, or want to remove a color you already applied, click the Default Color button. Without a color specified, web browsers use default colors for the element in question. For instance, text on a web page is usually black unless you specify otherwise.

Next to the color box in any Dreamweaver dialog box is a blank text field. If you know your web colors, you can type its value into this box, which is sometimes faster and more precise than clicking the rainbow palette.

Adding Bold and Italic

You can use the Property inspector to make text bold or italic. 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> tag, while the I button wraps it 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, these 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 (and therefore important to the way search engines perceive the sentence), use HTML mode. For example, if you want the word “Monday” to stand out on a 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 that 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.

UP TO SPEED: Web Colors

CSS supports several color formats: hexadecimal, RGB, HSL, RGBa, and HSLa. These formats are just different ways to specify a color, and you can get the same color using any of those formats.

Traditionally, you specified colors in CSS using “hexadecimal notation.” “Hex” notation represents colors using a six-digit code, like this: #FE3400. (Hexadecimal notation is a system computers use for counting. In this system, you count like this: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. The # tells the computer that the following sequence is a series of hexadecimal numbers.) The best way to find a color’s hex value is to choose the color you want by clicking on it in the palette and then looking at the code that Dreamweaver writes in the text box next to it. Hex colors comprise three pairs of numbers. For example, the number above, #FE3400, is really, FE, 34, and 00. Each pair represents a number for red, green, and blue color values, which, when combined, make up a color. You sometimes see only three numbers, like this: #F00—that’s shorthand used when both numbers in a pair are the same. For example, you can shorten #FF0011 to just #F01. In the Color box’s “Color format” menu (see Figure 4-13), Dreamweaver refers to these formats as “six-digit hex” and “three-digit hex.”

However, CSS supports other formats for specifying color. RGB stands for “Red Green Blue,” and is the format most commonly associated with computer graphics. Most graphics programs let you pick colors using RGB, and, in fact, hex colors are really just RGB values specified using hex numbers. For example, the hex color #FF0033, looks like this as an RGB value in CSS: rgb(255,0,51). Each value represents a color and uses a number from 0 to 255, so rgb(255,0,51), means 255 red, 0 green, and 51 blue.

HSL, stands for “Hue, Saturation, Lightness”, and is yet another way to specify colors based on its color (hue), intensity (saturation), and lightness (how close a color is to white or black). The hue is specified using a number from 0 to 360 (representing the degrees around a color wheel with red being 0 and 360, green 120, and blue 240), the saturation is a percentage from 0 (gray) to 100 (full intensity), and lightness is a percentage from 0% (black) to 100% (white). That same hex color, #FF0033, is written as an HSL color like this: hsl(348,100%,50%). Some people find HSL colors to be easier to understand than RGB or hex, but all three let you specify the same colors.

Finally, RGBa and HSLa colors add the dimension of transparency to color: the “a” stands for alpha transparency and refers to how transparent the color is. In other words, you can create “see-through” colors. For example, you could make the color of a headline partially transparent so that a background image on the page shows through the headline. There are many fun and creative effects possible with alpha transparency (for example, the article at http://tinyurl.com/ydj8658 uses RGBa color). Unfortunately, Internet Explorer 8 and earlier don’t understand RGBa or HSLa colors, so use these formats with caution. If you do want to explore them, they work just like their non-transparent counterparts, with the addition of one extra value from 0 (completely invisible) to 1 (completely opaque). So if you wanted a vivid red color that was 50 percent transparent, you’d specify an RGBa value using this notation: rgba(255,0,0,.5). In HSLa notation that color is hsla(0,100%,50%,.5). If you use Dreamweaver’s Color Format menu to select an RGBa or HSLa color, Dreamweaver always sets the transparency to 1; you can change it in the color field to anything from 0 to 1 (such as .25 to get 25 percent transparency).

Aligning Text

The alignment buttons in the Property inspector’s CSS mode 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.

CSS Type Properties in the Rule Definition Window

As its name implies, the Rule Definition window’s Type category lets you format text. Several of the settings are the same as those available from the Property inspector in CSS mode, and you learned about them in depth starting on Text Formatting with CSS. To summarize, this category of CSS properties includes:

• Font. You choose a font for the new CSS style rule from the Font menu. As discussed on Text Formatting with CSS, you choose 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, as described on Applying font formatting.

• Size. As described on Changing the Font Size, you can choose from many different measurement standards to size text, but the most common are pixels, ems, and percentages.

• Weight. Weight refers to the thickness of a font. The Weight menu offers 13 choices. Normal and bold are the most common, and they work in all browsers that understand CSS. See Figure 4-14 for details.

  

  Figure 4-14. 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.

• Style. In this peculiar instance, Style means italic, oblique, or normal text. 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.

• 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-15). 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 measure using the pop-up menu to the right of the Line Height field.)

  

  Figure 4-15. 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 Trebuchet MS. With CSS, you can make lines bump into each other by setting a low line-height value (top paragraph), or spread them far apart by using a larger value (bottom paragraph).

  “Normal,” the default setting (third paragraph in Figure 4-15), 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 type a number in this box.

  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; so if your text were 10 pixels tall, the space from the base of one line of text to the next would be 12 pixels (120% of 10). Now, if you change the size of the text, the relative space between lines remains the same.

• Text-transform. From this menu, you can automatically capitalize text. To capitalize the first letter of each word, choose “capitalize” The “uppercase” option gives you all capital letters, while “lowercase” makes all the 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 text blink on and off (but only in a few browsers); unless you want to appear on one of those “worst website 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.

• Color. Set the color of the style’s text using Dreamweaver’s color box, described on Picking a Font Color.

Block Properties

The Block Properties panel is a hodgepodge of CSS settings that affect how browsers display letters and words (see Figure 4-16).

Note

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 remove space before and after headlines. To indent paragraphs, set the Left and Right margin properties.

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 you define here to even a single word or two. (The one exception is the Text Align property, which applies 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 and 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.

  

  Figure 4-16. The Block category is an eclectic mix of (mostly) 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.

• 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 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 text or an image—relative to the items around it. For example, you could move text above or below the surrounding text to format a trademark character, copyright symbol, or footnote reference using the options “super” and “sub.” 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 position content within a cell.

  Note

  The “sub” and “super” alignment options don’t change the size of the selected text. If you want to create true subscript or superscript characters (for chemical symbols, trademark or copyright symbols, and so on), you should also use a smaller font size in the style; 75% works great.

• 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 aligns copy on both the left and right edges.)

  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 can be 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 a paragraph, creating a hanging indent (or outdent)—a nice effect for a sentence that introduces a bulleted lists or for glossary pages. If you use a negative number, it’s a good idea to set the left margin (Understanding the Box Model) for the paragraph equal to the value of the negative text indent. Otherwise the first line might extend too far to the left, off the screen!

• Whitespace. This property controls how a browser displays extra white space (spaces, tabs, returns, and so on). Browsers normally ignore extra spaces in the HTML of a page, reducing them to a single-space character between words and other elements, as described on Nonbreaking Spaces. The “pre” option functions just like the HTML <pre> tag: Extra white space (like tabs, multiple spaces, and hard returns) that you put in the HTML code appear in the document window. The “nowrap” option prevents lines from breaking (and wrapping to the next line) when they reach the end of the browser window.

• Display. This property defines how a browser displays a particular element, like a paragraph or link. The range of choices here may overwhelm you—and you may be underwhelmed when you find out that browsers don’t support most of these options.

  The only three 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,” guests can click anywhere in the entire width of the block—even areas where no text appears.

  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. For a good tutorial on this topic, visit http://tinyurl.com/as4rk.

  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).

List Properties

To exercise greater control over bulleted and numbered lists, use the options in the CSS Rule Definition window’s List category (see Figure 4-17):

• Type. Select the type of bullet you want 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).

  

  Figure 4-17. 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.

• 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.

  Tip

  The Background Image property, which you’ll learn about on Background Images, is a more versatile solution to adding bullet images to a list. You can’t specify the position of a bullet image, but, you can accurately position a background image, so it’s much easier to tweak the placement of your bullet images using the Background property than the “list-style-image” property. 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 (Background attachment). Playing with the padding values (Understanding the Box Model) helps position the text relative to the image.

• Position. This property controls where 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 look. “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 of the text; Figure 4-17 should make the effect clearer.

Note

If you want to adjust the amount of space web browsers normally use to indent lists, set the left padding property (see Understanding the Box Model) to 0, and set the left margin (see Understanding the Box Model) 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).

Cascading Style Sheets Tutorial

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 in this book using these same methods. In this tutorial, you’ll create an external style sheet that formats pages on the Chia Vet website.

Note

Before getting started, download the tutorial files from www.sawmac.com/dwCS5.5. See the Note on Note for more details.

Setting Up

Once you download the tutorial files and open Dreamweaver, you need to set up a site for this tutorial. You learned how to do this in the first chapter, but here are the few basic steps as a quick recap—practice makes perfect!

1. Choose Site→New Site.

   The Site Setup window appears.

2. For the Site Name, type CSS Tutorial.

   The only other step required to set up a site is to tell Dreamweaver where to find the site’s files.

3. To the right of the Local site folder box, click the folder icon.

   The Choose Root Folder window appears. 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.

4. Navigate to and select the Chapter04 folder located in the MM_DWCS5.5 folder. Click the Select button (Choose on Macs) to select this folder, and then, in the Site Setup 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.)

Creating an External Style Sheet

In this example, you’ll create a collection of styles for the Chia Vet website.

1. In the files panel, double-click the file named services.html.

   The web page contains a list of services that Chia Vet offers. 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.

   Note

   You can, of course, also open a file by choosing File→Open and navigating to the folder where the file you wish to open resides.

2. Triple-click the headline “Chia Vet Services.”

   This selects the entire headline. You’ll now use the Property inspector to select a font.

3. Click the CSS button in the Property inspector and then, from the Font menu, choose “Palatino Linotype, Book Antiqua, Palatino, serif.”

   Because the headline had no style applied it, Dreamweaver opens the New CSS Rule window (see Figure 4-18). You’ll pick the type of style you want to create.

   

   Figure 4-18. The New CSS Rule window requires that you complete three tasks: Pick the type of style you want to create; name the style; and pick where Dreamweaver should store the CSS code. Notice how the large text box explains what web page elements the style will apply to—in this case all <h1> tags.

4. 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 automatically applies to every heading 1 paragraph.

5. 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.

6. From the bottom menu, choose New Style Sheet File, as pictured in Figure 4-18. 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.

7. Click the Site Root button (top of the dialog box on Windows, bottom right on Macs).

   The Site Root button is a handy shortcut. It automatically takes you to the local site folder for the site you’re currently working on, saving you the effort of manually navigating there. (OK, in this example, you’re already in the local site folder, but you should know about this button and what it does—it really does come in handy for getting you to the top level folder of the current site after you open files from other sites located elsewhere on your hard drive, or folders deeply nested inside the current site.)

8. In the File Name box (the Save As field on the Mac), typeglobal.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 created a style and added an external style sheet to your site in just a couple steps. Now, you’ll add some color.

9. Make sure you still have the headline selected, and then, in the Property inspector’s Color field, type#779A00 (see Figure 4-19).

   You can use the color box to select another color if you prefer.

   

   Figure 4-19. Choosing properties for an element that already has a style applied to it—like the h1 tag style here—updates that style.

   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.

   Note

   If the New CSS Rule window appears again at either step 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.

10. In the Property inspector’s Size box, type 48.

    The Property inspector should now look like Figure 4-19. You 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.

Editing a Style

1. Make sure you have the CSS Styles panel open (Window→CSS Styles), and make sure you have the All button selected at the top of the panel.

   This displays all the style sheets attached to this page (in this case, just global.css).

2. If it isn’t already, expand the list of styles in theglobal.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.

3. In the list, double-click “h1.”

   This action opens the CSS Rule Definition window, where you can access a range of CSS properties (see Figure 4-20). First, you’ll remove the bold formatting from the headline.

   

   Figure 4-20. 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.

4. 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.

5. In the category list, click Border.

   The CSS Rule Definition window now displays all the properties that add 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.

6. Click to turn off all three “Same for all” checkboxes. For the Top border, choose “solid” from the top Style menu, type7 in the top Width box, and type#F93 in the top Color box. For the Bottom border, choose “solid” from the Style menu, type2 in the Width box, and type#F93 in the color box.

   The window should now look like Figure 4-21. As mentioned in the box on Web Colors, #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.

   

   Figure 4-21. Use the Border properties to add rules to any or all of the four edges of an object. You can emphasize a headline by underlining it, or give an image a stylish border around its edges.

7. 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 Understanding the Box Model.

8. 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.

9. Choose File→Save All Related Files.

   The Save All Related Files command can be a real lifesaver when you work with external style sheets. Even though you’re looking at and working on a web page (services.html here), 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 has gone into updating the global.css file. Unfortunately, the regular keyboard shortcut to save a file, Ctrl+S (⌘-S), saves only changes to the file you can see—in this case, the web page. Make sure you invoke the Save All Related Files command frequently, otherwise you could lose all the changes you make to an external style sheet if Dreamweaver or your computer crashes. (To make things easier, you can create your own keyboard shortcut for the Save All Related Files command. See Keyboard Shortcuts for details.)

Note

The File→Save All command is also useful. It saves every file you have open with unsaved changes. Feel free to use this command frequently even if you might want to undo some of those changes—Dreamweaver’s smart enough to let you undo changes you made to a file even after you save those changes (but only if don’t close the file in the meantime).

Adding Another Style

The Property inspector isn’t the only way to create a style—in fact, since it offers a limited number of formatting options, it isn’t even the best way. The CSS Styles panel provides a faster method with more comprehensive choices.

1. At the bottom of the CSS Styles panel, click the New CSS Rule button (the + button pictured in Figure 4-1).

   The New CSS Rule window appears. You’ll create another tag style for the Heading 2 tag.

2. From the top menu, choose Tag; in the Selector Name field, typeh2 (or select “h2” from the menu); in the bottom menu, make sure you have “global.css” selected. Click OK.

   This action adds a new tag style to the global.css style sheet. You’ll set a few text properties next.

3. From the Font-family menu, choose “Palatino Linotype, Book Antiqua, Palatino, serif.”

   You’ll use the same font as in Heading 1, but you’ll change its size and color.

4. In the Size box, type24, and, in the Color box, type #EC6206.

   This 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 do so—there’s a CSS property that can do it for you.

5. 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.

6. 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 should remove any space that appears below the Heading 2 tags.

7. 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, a web browser doesn’t add the bottom margin of Heading 2 to the top margin of the paragraph 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 it 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 bottom margin of the headline, the gap between the two blocks of text isn’t gone—it’s now 10 pixels, the top margin value for the paragraph. That’s the situation here: you need to modify the paragraphs’ top margin as well. You can do that by creating another style.

8. In the CSS Styles panel, click the New CSS Rule button.

   The New CSS Rule window appears. You’ll create a tag style to control how browsers format paragraphs.

9. From the top menu, choose Tag; in the Selector Name box, typep, and then, in the bottom menu, make sure you have “global.css” selected. Click OK to create the style.

   Before getting to that pesky margin, first set some basic type options.

10. 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.

11. In the Line-height box, type150, 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 percent (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.

12. Click the Box category; in the Margin section, uncheck the “Same for all” box. Type5 in the Top box, and75 in the Left box.

    The window should now look like Figure 4-22. 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 even more.

    

    Figure 4-22. To remove space that appears above a paragraph, a headline, or other block of text, set the top margin to 0. To completely remove the space that appears between paragraphs, set the bottom margins to 0 as well.

13. Click OK; choose File→Save All Related Files.

    The page is nearly complete. Just one more style to create.

Creating a Class Style

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.

1. On the CSS Styles panel, click the New CSS Rule button (+).

   The New CSS Rule window opens. This time, you’ll create a class style rather than an HTML tag style.

2. 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 it in.

   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.

3. Make sure you have “global.css” 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.

4. 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 notice 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.

5. 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.

6. Click to turn off all three “Same for all” checkboxes. For the Top border, choose “dashed” from the Style menu, type1 in the Width box, and type#93BD00 in the color box.

   You have several different styles of borderlines to choose from, including dashed (see Adding Borders for the different types of borders). Lastly, you’ll add a little space between the border and the text.

7. In the left-hand list of CSS categories, click the Box category. Uncheck the “Same for all” box in the Padding area, and then, type5 in the Top box.

   While margins control the space between elements (like the gap between paragraphs), padding controls the space between the content and the content’s border. In other words, adding padding pushes a border farther away from the text (or other content) you’re styling.

   You’ll change the copyright notice’s margin settings as well.

8. In the Margin area, uncheck the “Same for all” box, and then type25 in the Top box and0 in the Left box.

   The window should look like Figure 4-23. The 25 pixels of top margin pushes the copyright notice away from the bottom of the paragraph of text above it. In addition, since Dreamweaver indents all the paragraphs 75 pixels from the left edge, you need to set the left margin of the copyright notice to 0. This 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-23. The difference between padding and margin is subtle, but important. Both properties add space around content you’re styling. 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.

9. 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.

10. Scroll to the bottom of the page, and select the last paragraph, the one 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.

11. In the Property inspector, click the HTML button, and then, from the Class menu, choose “copyright” (see Figure 4-24).

    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-24. 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 the menu lists only class styles; 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 page 124.

Attaching an External Style Sheet

Now that you’ve created these styles, you may wonder 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 link other pages in the site to that style sheet.

1. Choose File→Save All Related Files; close theservices.html page.

   You’ll open a new web page to attach the external style sheet to it.

2. In the Files panel, double-click the fileabout.html to open it.

   This file is another page for the Chia Vet website. It has no formatting yet, so you’ll attach the external style sheet you just created.

3. On the CSS Styles panel, click the Attach Style Sheet button (the chain link button at the bottom of the CSS styles panel.

   The Link External Style Sheet window appears.

4. Click the Browse button.

   The Select Style Sheet dialog box appears.

5. Navigate to the Chapter04 folder (or click the Site Root button), and then double-click theglobal.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).

6. 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.

7. 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.

8. From the Class menu on the Property inspector, select “copyright.”

   This page is done. Time to view it.

9. 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-25. 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.

Figure 4-25. CSS offers a lot of design tools to produce beautiful typography for your web pages. In addition, an external style sheet lets you quickly, easily, and consistently add style to hundreds of pages without much work.

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 you’ll encounter when you design pages with external style sheets—web browsers often cache them (see Download Statistics). Normally that’s a good thing—it means visitors to your site have to wait only once for the CSS 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 obsolete version of the external style sheet saved in its cache rather than the newly updated file on your computer. (The Safari browser is particularly aggressive at holding onto cached files, so if you preview in that browser, make sure to reload the page when you do.)

You can work around this problem: Open the Preferences window (Edit→Preferences [Dreamweaver→Preferences]); 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 an unsaved page.