5

Introducing Cascading Style Sheets

In This Chapter

Introducing CSS

Comparing internal and external style sheets

Looking at CSS rule options

Working in the CSS Styles panel

Switching between CSS and HTML

Working with style sheets

Want to add a little style to your pages? Cascading Style Sheets (CSS) offer the best way to create websites that are accessible, flexible, and designed to work on a wide range of screen sizes and devices. Today, CSS is the clear choice when it comes to formatting web pages.

Unfortunately, most people find working with styles far more complicated and confusing than previous approaches to web design. In my experience, this confusion fades after you learn the basics and start working with styles, but brace yourself as you start into these next few chapters. CSS is confusing to everyone at first. Until you start to understand all the basics, none of it makes much sense.

If you’ve used a previous version of Dreamweaver, you should note that the CSS features were completely redone in version CC. Many of the dialog boxes that were in previous versions have been removed, and all CSS panels have been revised. The good news is that the new CSS Designer panel is a definite improvement, most notably because all style tools are consolidated into one area of the program, which makes adding and editing styles more efficient. If you’ve used previous versions of Dreamweaver, however, you may have to unlearn a few habits as you work with the new features. Either way, CSS is a fundamental part of any modern website.

This chapter explains how styles work, the different kinds of styles (and what they’re best used for), and how to use the features in Dreamweaver to create and edit styles. In Chapter 6, you apply these basic skills to creating CSS layouts and complete page designs, and in Chapter 7, you discover how to add the latest CSS3 features, including drop shadows and gradients.

Introducing Cascading Style Sheets

The concept of creating styles has been around long before the web. Desktop publishing programs, such as Adobe InDesign, and even word processing programs, such as Microsoft Word, have long used styles to manage the formatting and editing of text on printed pages. In a word processor, you can create and save styles for common features, such as headlines and captions. In print design, styles are great timesavers because they enable you to combine a collection of formatting options, such as Arial, bold, and italic, and then apply all those options at once to any selected text in your document using a single style. In addition, if you change a style, you can apply the change automatically — and everywhere you’ve used that style in a document.

On the web, you can do all that and more with CSS because you can use style sheets for more than just text formatting. For example, you can use CSS to create styles that align images to the left or right side of a page, add margins and padding space around text and images, and change background and link colors. For all these reasons (and more), CSS is the preferred method of designing web pages among professional web designers.

CSS is a powerful tool because you can use it to make global style changes across an entire website. Suppose, for example, that you create a style for your headlines by redefining the <h1> tag to create large, green, bold headlines. Then one fine day, you decide that all your headlines should be purple instead of green. If you aren't using CSS, changing all your headlines could be a huge undertaking — a matter of opening every web page in your site to make changes to the font tags around your headlines. But if you're using CSS in an external style sheet, you can simply change the style that controls the headline in the style sheet and — voilá — your headlines all change from green to purple automatically.

If you ever have to redesign your site (and believe me, every good site goes through periodic redesigns), you can save hours or even days of work if you’ve created your design with CSS.

Understanding the basics of styles

Many people find CSS confusing at first because it’s such a different approach to design than what they may be used to if they’ve worked in print. Following are four of the more confusing aspects of CSS for beginners:

Getting used to thinking about the styles on your site separately from your text, images, and other content: For example, you can type text right into the design area in Dreamweaver, and you can format that text with HTML tags, such as the heading 1 tag, which adds the <h1> tag to the code next to the text. However, if you want to change the size or color of your text beyond these basic HTML tags, you do that in a separate area of the program (using the CSS panels covered in this chapter) and that style information is not saved anywhere near the text that if formats in the HTML code. In the early days of the web, we used HTML attributes to format text in a page, but the latest versions of Dreamweaver won't even let you use HTML attributes anymore. If you want to change things such as the size or color of text, you have to use CSS.

Understanding how you combine CSS and HTML to create web pages: It's easy to confuse HTML and CSS because they are used so closely together, but they are very different animals and the better you appreciate the difference, the more all of this makes sense. Think of HTML as the building blocks that you use to create the structure of your web page and to put basic space and just a little formatting around your text. For example, when you format a headline with the <h1> tag, it changes to 24 pt and bold because that basic formatting is included in the HTML tag. Similarly, the <div> tag divides elements on a page. However, if you want to change the spacing between the content in <div> tags, or add a border around each box created by a <div> tag, you do that by defining a style and applying it to the <div> tag.

Understanding all the different kinds of style selectors you can choose from, such as class, ID, and tag selectors: No matter how you create your styles, each style definition, or rule, contains a selector and a declaration. The selector identifies the name and type of style, for example, #container or .caption. (Multiple types of style selectors are available so that you can create different kinds of styles depending on what kind of formatting you want to do with the style.) The declaration defines the style and describes its properties, such as bold, blue, or 300 pixels wide. If those terms don't mean much to you yet, don't worry — Dreamweaver's four selector types are described later in the chapter in the Understanding style selectors section. And as you discover how styles work, new terms such as selectors and declarations begin to make a lot more sense.

Understanding when it’s best to create external style sheets, internal style sheets, or inline styles: Internal style sheets are saved in the HTML file where the formatting is applied. External style sheets are saved as separate files that can be attached to the pages in your website. External style sheets offer the greatest advantages because they enable you to use the same styles across any or all pages in a website. Sometimes, however, internal style sheets are useful, such as when you want to apply a style to only a single page. The section Using internal versus external style sheets explains how best to use the different types of style sheets.

If you’re starting to feel baffled already, hang in there. I’m just giving you an overview before I take you farther and farther down the rabbit hole. CSS is a topic that’s hard to grasp until you learn a number of basic concepts. Even if you’re not quite sure you understand everything I’ve described, keep reading. As you make your way through the three chapters on CSS, it should all start making more and more sense.

Combining CSS and HTML

Essentially, web pages are created by combing HTML and CSS. You can also add more advanced programming, such as PHP or JavaScript, but the basic structure and formatting of just about every page on the web is created using HTML and CSS. Here’s the simplified version of how the two work together:

1. Use HTML to create the structure of a page with tags, such as division (<div>), heading (<h1>, <h2>, and so on), and paragraph (<p>).

2. Create styles in CSS that specify the size of these elements, where they appear on a page, and a variety of other formatting options, such as the color, size, and font face.

Similarly, you use HTML to insert images and create links, and then add styles to change formatting options, such as adding more space around your images or removing the underline from your links.

Understanding style selectors

When you create new styles, you first have to choose which selector to use for which job. The selector corresponds to the kind of style you create. Each selector option has its own naming conventions, restrictions, and uses. If you’re completely new to working with styles, this may not make much sense yet, but understanding the basics of selectors is a fundamental part of working with styles. I encourage you to read through all these descriptions of selectors so you can appreciate your options before you move on.

Don't feel you have to memorize all this, however. Instead, consider folding down the corner on this page so you can refer to this list of selectors as you create and edit styles later. If you don't have this book handy, you can refer to this page I created as a CSS selector reference on my website: www.digitalfamily.com/tutorials/css-selectors/.

The following sections offer descriptions of each of the four selection types that you can use when you create styles.

Class selectors

The class selector is the most versatile selector option. Class styles can format any element (from text to images to multimedia), and you can use them as many times as you like on any page in a website.

Class style names always begin with a period (often called a “dot”). You can create class styles with any name as long as you don’t use spaces or ­special characters. (Hyphens and underscores are okay.) Thus, if you create a style called caption for the text that appears under your pictures, it should be written like this with the dot followed by the name:

.caption

When you create styles with the class selector, you must include a dot at the beginning of the name, but don’t include any space between the dot and the style name. In the style sheet, and in Dreamweaver’s CSS panels, class style names appear with the dot in front of the name.

However, the dot appears only in your style sheet code. When you apply a class style to a <div> tag, or to any other element in a web page, the dot doesn't appear with the name in your HTML code. If you think that's inconsistent, you're not alone, but upon closer inspection of the HTML code, you will notice that all class styles are indicated by the word class in HTML code. Thus, if you applied the .caption style to a paragraph tag to format the text under an image, the HTML code would look like this:

<p class="caption">Flooding is on the rise, even in places that have never flooded before.</p>

Class styles must be applied to an element, such as the paragraph tag shown in this example. Class tags can also be used in combination with other styles, making it possible to apply more than one style to an element.

When you create a class style in Dreamweaver, the style is displayed in the CSS Designer panel on the right side of the workspace, as shown in Figure 5-1. You can apply class styles by using the CSS drop-down list in the Property inspector at the bottom of the workspace, also shown in the figure.

Photo by Janine Warner

Figure 5-1: Styles created with class selectors are available from the CSS drop-down list in the Property inspector.

For more details and step-by-step instructions for creating and applying styles with class selectors, see Chapter 6.

ID selectors

Think of styles created with the ID selector as the building blocks of most CSS page layouts. ID styles, unlike other styles, must be unique, so they can be used only once per page. This characteristic makes them well suited to formatting <div> tags and other block-level elements that are used to create distinct sections, such the header or footer of a page, which will be used only once. You can create as many ID styles as you want for each page, and you can use them on as many pages as you like, but you can use each one only once on each page.

Being unable to use ID styles more than once per page has some advantages, especially when you are creating complex websites with many compound styles, because this rule can help you avoid style conflicts. But this limitation is also the reason why many designers use the ID selector sparingly, opting instead to create most styles with the class selector, which can be used as many times as you want on any page.

ID styles must begin with a pound, or number, character (#). Similar to class styles, you can name ID styles anything you like as long as you don't use spaces or special characters (again, hyphens and underscores are okay). An ID style used to identify the bottom section of a page could look like this:

#footer

Similar to class styles, # isn't used in the HTML code. When a style is applied to an element, such as a <div> tag, the HTML code looks like this:

<div id="footer">Between these tags with the footer ID style, you would include any information you want at the bottom of the page, such as copyright information.</div>

Although using ID styles is common practice in many websites, the predesigned CSS layouts included in Dreamweaver were created by combining a series of <div> tags with class styles using names such as .container, .header, and .footer to identify the main sections of the design. In Figure 5-2, you can see how a collection of class, tag, and compound styles are displayed in the CSS Designer panel.

Photos by Janine Warner

Figure 5-2: The CSS Designer panel displays all class, tag, ID, and compound styles available on any open page.

Tag selectors

The tag selector is used to redefine existing HTML tags. Use this option if you want to change the appearance of an existing HTML tag, such as the <h1> (heading 1) tag or the <ul> (unordered list) tag.

In many cases, redefining existing HTML tags with your desired formatting using CSS has advantages over creating new styles with the class or ID selectors. For example, content formatted with the heading 1 tag is presumed to be the most important text on a page. For that reason, many search engines give priority to text formatted with the <h1> tag. Similarly, the hierarchical structure of the <h1>–<h6> tags helps ensure that, even if visitors to your site change the text size in their web browser, text formatted with the heading 1 tag is still larger relative to text formatted with a heading 2 tag, which is larger than text formatted with the heading 3 tag, and so on.

When you use the tag selector, the style definition is applied automatically to any text or other element that's been formatted with the corresponding tag. Thus, if you've formatted a heading with an <h1> tag and then create a new <h1> style, the formatting you used to define the style will apply automatically to the heading as soon as the style is created.

As you type the name of any HTML tag in the selector panel in Dreamweaver, a drop-down list appears providing easy access to the HTML tags. This shortcut can save on typing and help ensure that you enter the name correctly. After the tag names appear, simply choose the tag you want to use, as shown in Figure 5-3.

Creating compound styles

The compound selector can be used to combine two or more style rules to create a style definition that is displayed only when one style is contained within another. Compound styles are useful, for example, when you want to use the heading 2 tag multiple times to format headlines in different ways on the same web page. For example, you could create one style for headlines that appear in the main story area of a page and another style for headlines that appear in the sidebar on the page but use the heading 2 tag to format both.

Compound styles are created by combining ID, class, or tag styles. Following is an example:

.sidebar h2

Figure 5-3: Redefine the appearance of any HTML tag by creating a style with a tag selector.

See Figure 5-4 for an example of how the list item tag, the <li> tag, appears when it is defined within a class style named .navbar. For a compound style, you must

Include a space between each name or tag in a compound style

Not include the brackets around the tag in a style name

Figure 5-4: Use the compound style selector to combine styles to apply more specific formatting.

In this example, the style definition will apply only to <li> tags that appear within another element, such as a <div> tag with the .navbar class style. Combining styles in this way enables you to use the same HTML tags with different formatting in different parts of the same page. For example, you might define one set of styles for text in an unordered list in your navigation bar, and another set of styles for text in an unordered bulleted list set off in the main text.

If a compound style combines more than one tag, it’s written like this:

#sidebar h1 a:link

Again, you must include a space between each style name or tag. In this example, you see a style that defines the appearance of the active link tag only when the link is located inside an element formatted with the <h1> tag that's also inside an element formatted with an ID style named #sidebar. A compound style like this enables you to create links in a sidebar headline that look different than links in another part of the sidebar.

---

---

After you figure out the differences among these style selector options and when they’re best used, you’re well on your way to mastering the art of creating and applying styles in Dreamweaver, which is covered in Chapter 6.

Using internal versus external style sheets

In CSS, you have the option of creating internal, external, or inline styles. You can even use a combination of these options, or attach multiple external style sheets to the same web page. Here’s an explanation of these options:

Internal styles: If you create internal styles, the CSS code is stored in the <head> area at the top of the HTML page, and you can apply the styles on only that page. If you're just creating a one-page website or styles used on only one page, an internal style sheet is fine, but for most sites, external style sheets offer many advantages.

External styles: If you save your styles in an external style sheet, they're stored in a separate file with a .css extension. You can attach external style sheets to any or all pages in a website in much the same way that you can insert the same image into multiple pages. You can also attach multiple external style sheets to the same page. For example, you can create one style sheet for styles that format text and another for layout styles. You can also create external style sheets for different purposes, such as one for print and one for screen display. For a web designer, external style sheets offer two big advantages: They enable you to create new pages faster and more easily and to update styles across many pages at once.

Inline styles: Inline styles are created within a document at the place that a style is used and apply only to the element to which they’re attached in the document. Inline styles are generally considered the least useful of the three style sheet options because to change the defined style you must change the code that contains the element, which means you lose the benefits of making global updates and creating clean, fast-loading code. For example, creating one style for all your headlines and saving it in an external style sheet is more efficient than applying the style formatting options to each headline separately.

At the top of the CSS Designer panel, shown in Figure 5-5, you find the Sources panel with a drop-down list that makes it easy to specify whether you want to save each new style that you define in an internal or external style sheet. The options are

Create a New CSS File: Launches the Create a New CSS File dialog box, where you can enter a name, specify a few settings, and click OK to both create and attach a new external style sheet.

Attach Existing CSS File: Launches the Create a New CSS File dialog box, making it easy to browse and select any .css file already on your computer’s hard drive.

Define in Page: Adds <style> tags to the top of the open HTML file, where new styles can be saved in an internal style sheet.

Figure 5-5: When you create new styles you can choose to save them in internal or external style sheets.

You can attach multiple external style sheets to the same HTML page and you can use internal and external style sheets in the same document. When you create new styles, it’s important that you select the name of the style sheet in the Sources panel (refer to Figure 5-5) where you want each new style saved.

If you’re creating a style that you’re likely to use on more than one page in your site, saving the style to a new or an existing external style sheet is your best choice. If you save a style in an internal style sheet and later want to add it to an external style sheet, you can move the style by dragging the style name in the Selector panel to the name of the style sheet list you want to move it into in the Sources panel.

Looking at the code behind the scenes

Even if you prefer not to look at the code behind your web pages, it’s helpful to have at least some familiarity with different kinds of tags, CSS, and other code that Dreamweaver creates for you when you design web pages. For example:

#container {

width: 780px;

margin-right: auto;

margin-left: auto;

}

.caption {

font-family:  Verdana, Geneva, sans-serif;

font-size: .8em;

font-style: italic;

font-weight: bold;

}

h1 {

font-family: Arial, Helvetica, sans-serif;

font-size: 1.3em;

}

These examples show what the CSS code in an internal or external style sheet would look like in Dreamweaver for the following styles:

An ID style created with the ID selector, named #container, and defined as 780 pixels wide with the left and right margins set to auto (a cool trick for centering a CSS design, covered in Chapter 6).

A style created with a class selector, named .caption, and defined as Verdana, Geneva, sans-serif, small, italic, and bold.

A style created with a tag selector to redefine the HTML tag <h1> as follows: Arial, Helvetica, sans-serif, large, and bold. (Note: Because the heading tags already include bold formatting, it's not necessary to include bold in the style definition.)

Introducing the CSS Designer Panel

The CSS Designer panel provides a great place to create, attach, view, manage, organize, and edit CSS styles. To open the CSS Designer panel, choose Window⇒CSS Styles. If you’ve set your layout options to one of the compact layouts or you’ve diminished the size of the panels in the right side of the workspace, you need to click the small double-arrow at the top of the panel to expand and view the panel.

The CSS Designer panel, a new feature in version CC, combines all Dreamweaver CSS tools in one collection of panels. In Figure 5-6, you see the panels docked on the right side of the page and expanded to take up two columns of space. Like other panels in Dreamweaver, the CSS Designer panel can be adjusted in a number of ways by clicking and dragging the top, bottom, or side of the entire panel set or any of the individual panels, such as the Properties panel, shown in the far right in Figure 5-6.

Figure 5-6: The CSS Designer panel, docked on the right side of the screen in the Designer layout, provides easy access to all CSS features.

Identifying and selecting styles

At the top of the CSS Designer panel, you can view all the style sheets currently applied to any open page in Dreamweaver. In Figure 5-6, an internal style sheet (indicated by the <style> tag) is selected in the Sources panel. For comparison, refer to Figure 5-5 to see an external style sheet, named main.css, selected in the Sources panel.

When you select a style sheet name in the Sources panel, a list of all style rules defined in that style sheet appears in the Selectors panel, just below the Sources and Media panels.

If you don’t see any style rules listed in the Selectors panel, you probably haven’t defined any styles in the selected style sheet. Also note that before you can create a style, you must create or attach a style sheet in the Sources panel. You find step-by-step instructions for creating a style sheet as you create styles in Chapter 6.

Reviewing CSS Selector Options

After you determine what selector type is best for your style — and decide whether you want to save it in an external or internal style sheet — you’re ready to move on to the CSS rule options and define the color, size, and other formatting options you want to include in your style. You find instructions for creating style rules in Chapter 6. This section continues the overview to help you better understand your choices before you start creating a style.

In previous versions of Dreamweaver, most features that are now included in the CSS Property panel were located in a separate CSS Rule Definition dialog box. Although the new CSS Property panel includes a few new visual tools that can help you better understand how CSS properties work, all these choices can seem a bit daunting at first. As you go through the following sections, keep in mind that my goal is to give you an overview of the options in each category of the CSS Property panel so that you’ll have a better understanding as you go through the instructions for using these options in Chapter 6. Again, don’t feel that you have to memorize the details of each feature; you can always refer to this section when you’re creating styles.

Also remember that you don’t have to specify any of the settings in this panel. When you leave an option blank, you let the default browser settings (or other styles) already applied to the page take control. For example, if you don’t specify a text color when you define a style, any text formatted with the style remains black (the default color in most web browsers) unless another style applied to the text contains formatting instructions for a different color.

In most cases, you select only a few options from one or two categories in the CSS Property panel for each new style you create. I’ve included the full list here so you can appreciate all your choices.

Not all options in the CSS Property panel are supported by all the web browsers in use today, so the way styles are displayed on a web page can vary depending on the browser. Similarly, some CSS options aren’t included in Dreamweaver because they’re not commonly supported. The following sections describe the options in each category offered in the CSS Property panel. Remember, if you know how write a CSS rule, you can always edit the CSS code in Dreamweaver’s Code view.

The Layout options

At the top of the CSS Designer Properties panel (see Figure 5-7) you find the CSS properties commonly used to create page layouts. You use these options to specify height, width, alignment, positioning, and spacing. As you can read in Chapter 6, these settings are ideal for creating page layouts with class and ID styles to do things such as align images and position <div> tags to create multicolumn layouts.

You can use the Layout options in the CSS Property panel to set these values:

Width: Specify a width for any element that can have its dimensions specified, such as a <div> tag. Size options are pixel (px), point (pt), pica (pc), percent (%), em, rem, ex, and ch. (See the Comparing CSS size options sidebar, later in this chapter, for the basics of sizing with ems, exs, and percentages on the web.)

Height: Specify a height for any element that can have its dimensions specified.

The Height field is often left empty to enable elements (such as <div> tags) to expand to fit their contents.

Min and Max Width: Specify minimum and maximum widths for <div> tags and other block elements. These options are useful when you specify the width as a percentage of the browser window. For example, you can set the width of your design to take up 80 percent of the browser window, and then set a Max Width of 1000 px to prevent your layout from getting stretched wider than 1000 pixels, even on a very large monitor.

Min and Max Height: Specify minimum and maximum heights for <div> tags and other block elements.

Figure 5-7: The top portion of the Layout options in the CSS Property panel.

Margin: Set the amount of space around an element (refer to Figure 5-7). Margins can be used to create space between the edge of an element and other elements on the page, such as between an image and text or between two <div> tags. You can set the margin separately for the top, right, bottom, and left. Padding is measured in pixels, points, inches, centimeters, millimeters, picas, ems, exs, and percentages.

Padding: Sets the amount of space within the borders of an element (refer to Figure 5-7). For example, you can use padding to create space between the borders of a <div> tag and its contents. You can set padding separately for the top, right, bottom, and left. Padding is measured in pixels, points, inches, centimeters, millimeters, picas, ems, exs, and percentages.

Setting padding and margin spacing can be tricky. When you add margin and padding to an element, such as an image or <div> tag, you increase the overall size of that element and the amount of space it requires in the layout. For help on setting these options to best fit your designs, see Chapter 6.

Position: As shown in Figure 5-8, the Position option, available from the lower part of the Layout section of the Properties panel, alters the way elements are positioned on a page. As you can read in Chapter 6, positioning can dramatically change the way block-level elements (such as table, list, header, paragraph, and <div> tags) appear in a browser.

Positioning is always determined relative to something else, such as another element on the page or the browser window. How you set up positioning depends on where your element is on the page — and on whether the element is inside another element (such as the <h1> tag inside the <div> tag). The Position drop-down menu includes

• Inherit: You do not need to specify this default option. Unless another option is selected, each element inherits the positioning of its parent element.

• Static: Place the content at its location within the flow of the document. By default, all HTML elements that can be positioned are static.

• Absolute: Use the top and left coordinates to control the position of an element relative to the upper-left corner of the browser window or the upper-left corner of an element that contains the element. (For example, the positioning of an AP Div contained within another AP Div is based on the position of the first AP Div.)

• Fixed: Position an element relative to the top-left corner of the browser. The content of an element using fixed positioning remains constant even if the user scrolls down or across the page.

• Relative: Use a position relative to the point where you insert the element into the page or relative to its container.

Float: Align elements, such as images and <div> tags, to the left or right of a page or other container causing text or other elements to wrap around it. Click the icons in the Float field, as shown in Figure 5-8, to specify the following four options: Inherit, Right, Left, or None.

Clear: Prevent floating content from overlapping an area to the left or right, or to both sides of an element. This option is useful when a floated element, such as a <div> tag used to create a sidebar, overlaps another block-level element, such as a <div> tag used to create the footer of a page.

Figure 5-8: The bottom portion of the Layout options in the CSS Property panel.

Overflow-x and -y: Tell the browser how to display the contents of an element if the container, such as a <div> tag, can't fit the element's entire height or width. Overflow options are

• Visible: Keep content, such as an image or text, visible, even if it expands beyond the defined height or width of a container.

• Hidden: Cut off the content if it exceeds the size of the container. This option doesn’t provide scroll bars.

• Scroll: Add scroll bars to the container regardless of whether its content exceeds the element’s size.

• Auto: Make scroll bars appear only when the content of a container exceeds its boundaries.

Display: Indicate if, or how, to render an element in a browser. For example, you change the positioning of an unordered list from horizontal to vertical by choosing Inline or hide an element, rendering it invisible, by choosing None. You can use the Display option with a scripting language (such as JavaScript) to change the display of elements dynamically. For example, you can cause an element to appear on a page only when a user clicks a button — and then make the element disappear when the button is clicked again.

Visibility: Control whether or not the browser displays an element. The Visibility options are

• Inherit: The element has the visibility of the element in which it’s contained (the default).

• Visible: The element is displayed.

• Hidden: The element isn’t displayed.

• Collapse: For use with HTML tables. Collapse can be used to remove a column or row without affecting the rest of the table layout.

An important difference exists between setting the Display to None and setting the Visibility to Hidden. When you set Visibility to Hidden, the element in not displayed on the page but still takes up the same amount of space. In contrast, if you set Display to None, the element is not rendered at all.

Z-Index: Control the position of an element on the Z-coordinate, which controls the stacking order of elements in relation to each other. Higher-numbered elements overlap lower-numbered elements. (Note: This setting works only on elements that use absolute or relative positioning settings.)

Opacity: Control the opacity level for an element from 0.0 (fully transparent) to 1.0 (fully opaque). For example, if you enter .5 in the opacity field, the opacity of an element will be reduced to 50 percent.

The Text panel

The Text panel features a collection of options that control the display of (you guessed it) the text in your pages. You can access the Text panel options by scrolling down the Property panel until you get below the Layout options, or by clicking the T icon at the top of the panel (see Figure 5-9).

The Text panel includes the following formatting options:

Color: Set the text color. You can click the color well and choose a color, use the eyedropper to sample any color on the screen, or enter a hexadecimal color code in the color field. If you enter a hexadecimal color code, include the beginning pound sign (#). For example, you would enter #ffffff for white. You can also abbreviate these codes with shorthand hex notations, such as #fff for white.

Font-Family: Define a font family or a series of families. You can add fonts from your local hard drive or from Adobe TypeKit by choosing Manage Fonts in the bottom of the drop-down list and launching the Manage Fonts dialog box, shown in Figure 5-10. (For an explanation of why Dreamweaver includes font collections — and a look at how to create new ones — see the upcoming section, Why so many fonts?.)

Figure 5-9: The Text panel in the CSS Designer Properties panel.

Figure 5-10: The Manage Fonts dialog box provides access to local fonts and fonts from Adobe TypeKit.

Font-Style: Enter Normal, Italic, or Oblique. However, italic and oblique are rarely different in a web browser, so stick with italic unless you have a specific reason not to.

Font-Variant: Change text to small caps. Test your designs carefully because this attribute is not supported by all browsers.

Font-Weight: Make text appear bold by selecting Bold or Bolder from the drop-down list. You can also enter a number between 100 and 900 to more precisely control how bold the text appears (100 is a light bold, 900 is a dark bold). To remove bold formatting, choose Normal or Lighter.

Font-Size: Define the size of the text. You can choose a specific numeric size or a relative size. Size options are pixel (px), point (pt), pica (pc), percent (%), em, rem, ex, and ch. Pixels, ems, and percentages are the most commonly used options for text sizes. (For more on these options, see the upcoming sidebar, Comparing CSS size options.)

Line-Height: Specify the height of the line on which the text is placed. (The spacing between lines of text is called leading.) Much like text size, you can specify line height in a variety of ways, including pixels, ems, and percentages. It is good practice on the web to add line height because increasing space around your text makes it easier to read on a computer screen. (For more on these options, see the upcoming sidebar, Comparing CSS size options.)

Text-Align: Left align, right align, center, or justify your text by clicking the corresponding icon (refer to Figure 5-9). The first icon, for Inherit, is the default. For example, you could center the text in the footer of your web page by including Text-Align set to Center in the definition of a style you apply to the <div> tag at the bottom of the page. (You find details about styling <div> tags to create footers in Chapter 6.)

Text-Decoration: Specify whether text is underlined, overlined (a line appears over the text), displayed with a strikethrough (Line-Through), or displayed with the blink effect (which makes text appear to flash on and off). You can also choose None, which is frequently used to remove the underline from linked text.

Use the decoration options sparingly, if at all. Links are underlined automatically; if you underline text that isn’t a link, you risk confusing viewers. Overlined and strikethrough text can be hard to read, so use these options only if they enhance your design. And by all means, resist the blink effect; it’s distracting and can make the screen difficult to read.

Text-Indent: Specify the amount that text will be indented from the left side of the page by entering a number in one of the size options, such as pixels, ems, or percentages. (For more on these options, see the upcoming sidebar, Comparing CSS size options.)

Why so many fonts?

You may have heard that you can now use any font you want on your web pages, thanks to the latest version of Cascading Style Sheets, CSS3. This statement is true (at least for anyone using the latest web browsers) but with some limitations: You must have the legal right to publish the font, and the font must be hosted on a web server. In Chapters 6 and 7, you find detailed instructions for using the @font-face options with the included font collections as well as hosted web services, such as Google Web Fonts.

To help ensure that your text appears as you intend, Dreamweaver includes collections of the most common fonts on Windows and Macintosh computers (popular fonts that your visitors are most likely to have). These fonts are grouped in families, such as

Gotham, Helvetica Nue, Helvetica, Arial, sans serif

Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, Times, and serif

When you apply a collection of fonts, the browser displays the formatted text in the first font available in the list. For example, if you choose the font collection that starts with Gotham and your visitors have Gotham on their hard drives, they see your text in Gotham. If they don’t have Gotham, the text is displayed in the next font on the list — in this case, Helvetica Nue. If they don’t have that font either, the text is displayed in Helvetica. And if they don’t even have Helvetica (which is more common on Macintosh computers), the browser uses Arial (which is common on Windows computers). And finally, if they don’t have any of the fonts on the list, the browser looks for any serif font. (Serif describes fonts, such as Times, that have those little curly things on the edges of letters; sans serif means no curly things, which is what you get with a font such as Arial.)

You can create your own font collections using the Manage Fonts dialog box (refer to Figure 5-10), which is accessible by selecting the Manage Fonts option at the bottom of the Font-Family drop-down list in the Text panel in the CSS Designer panel. This dialog box is covered in more detail in Chapters 6 and 7.

In the early days of the web, the only way to ensure that text appeared in the font you wanted was to create the text as a graphic in a program such as Photoshop or Fireworks, and then insert the graphic with the text into your page. That’s still not a bad option for special text, such as logos. For all other text, however, don’t save text in an image because graphics take longer to download than text, text saved in a graphic is harder to update later, and search engines can’t read the text in an image.

---

---

The Text-Shadow section of the Text panel

The Text-Shadow section of the Text panel provides tools for adding text shadows, one of the newest CSS properties included in the CSS3 definition. You find step-by-step instructions for using these options in Chapter 7. The Text-Shadow options are shown in Figure 5-11. The most popular options are the following:

H-shadow: Add a shadow to your text on the horizontal axis. First choose a size option, and then enter a number in the field. For example, enter 2px, to add a horizontal shadow that is 2 pixels wide.

V-shadow: Add a shadow to your text on the vertical axis. First choose a size option, and then enter a number in the field. (See the sidebar Comparing CSS size options.)

Blur: Control the amount of blur in the shadow. The larger the number, the more the shadow is spread out, or blurred.

Color: Enter a hexadecimal color code to specify the color of the shadow, or use the eyedropper to sample any color on the screen.

Figure 5-11: The Text-Shadow and other options at the bottom of the Text section in the CSS Designer Properties panel.

The features at the bottom of the Text panel, which are not as common as the other Text panel options, are as follows:

Text-Transform: Change the case of your text. Options are Capitalize (which capitalizes the first letter), Uppercase, and Lowercase. Click the corresponding icon to set this property.

Letter-Spacing: Defines the amount of white space inserted between letters. Size options are pixel (px), point (pt), pica (pc), percent (%), em, rem, ex, and ch. (See the preceding sidebar Comparing CSS size options.)

Word-Spacing: Defines the amount of white space inserted between words. Size options are pixel (px), point (pt), pica (pc), percent (%), em, rem, ex, and ch. (See the preceding sidebar Comparing CSS size options.)

White-Space: Tell the browser how to handle line breaks and spaces in a block of text. Your options are Inherit, Normal, Nowrap, Pre, Pre-line, or Pre-wrap. Nowrap is especially useful because it prevents elements from being separated if they must wrap to fit within a browser window or another container.

Vertical-Align: Align inline elements, such as text and images, in relation to the elements that surround them. You can set a numeric value or choose Baseline, Sub, Super, Top, Text-Top, Middle, Bottom, and Text-Bottom.

The Border panel

The Border panel defines the appearance of borders around images, tables, <div> tags, and other elements. As shown in Figure 5-12, you can specify border settings on one, two, three, or four sides of an element.

Figure 5-12: The Border section in the CSS Designer Properties panel.

You can use the border settings to create dividing lines between <div> tags that create columns or add separating lines above or below elements. The Border panel options are

Border-Collapse: Specify whether table borders are combined into a single border or detached as they appear in standard HTML when you use the <table> tag. The choices are Collapse, Separate (the default), and Inherit.

Border Spacing: Set the spacing between borders of adjacent table cells when the Border-Collapse option is set to Separate.

Border Color: Specify the border color for all four sides of an element by entering a hexadecimal color or by clicking the color well and using the color picker.

Border Top, Right, Left, and Bottom Color: Specify different colors for any or all borders of an element.

Border Width: Specify the width, or thickness, of the border. You can choose thin, medium, or thick, or you can specify the size in pixels, ems, or any of the other size options.

Border Top, Right, Left, and Bottom Width: Specify different widths for any or all of the borders of an element.

Border Style: Choose from any of the border style options, including Solid, Dashed, or Double.

Border Top, Right, Left, and Bottom Style: Specify different border styles for any or all borders of an element.

Border Radius: Create rounded corners on your borders. Click to place your cursor in any of the four fields located near the corners of the border preview box and enter a number to specify the amount of the radius. You can choose from any of the CSS size options by using the drop-down list.

The Background panel

Using the Background panel in the CSS Designer panel (see Figure 5-13), you can specify a background color or image for a style — and control how the background is displayed on the page. You can use background style settings for any element of your web page that can display a background — including the <body> , <div>, heading, and image tags.

Figure 5-13: The Background section in the CSS Designer Properties panel.

For example, you could alter the <body> tag to include background settings that apply to the entire page, or you could create a style with the class or ID selector and specify a background that appears only behind an individual <div> tag. By including the background in the class or ID style of a <div> tag, you can limit the background to appear on-screen only where the <div> tag is used. Note that the Background option works with an image only if you first set a margin around the image.

You can choose from these Background options:

Background-Color: Specify the background color of a defined style using one of several methods. You can click the color well and select a predefined color or create a custom color. Or use the eyedropper to sample any color on the screen. Finally, you can enter a hexadecimal color code — make sure to include the #, as in #000000 for the color black or #ffffff for the color white. You can also use abbreviated hexadecimal colors, such as #000 or #fff for black and white.

Background-Image: Select an image to serve as the background in your style definition. Enter any URL to an image on your computer or on the Internet, or click the folder icon to browse your hard drive and select an image.

Background-Position: Specify the position of the background image from the left and top of the parent element by entering a number in each field. This option is visible only if you click the small arrow next to the URL field in the Background section to reveal the additional fields that follow.

Size: Select the measurement in pixels, ems, or another option, and then enter the size you want for the background. Leaving the Size field set to auto (the default) displays the image at actual size.

Background-clip: Specify whether the background begins the border, the padding, or the content of a box element, such as a <div> tag.

Background-Repeat: Click the corresponding icon to specify how and whether the background image repeats, or tiles, across and down the page. Background images tile by default, so you must choose an option if you don't want your background to repeat or you want to specify how it repeats. Also note that if the image is larger than the element to which it is applied, only as much of the image as will fit in the display area of the element will be visible. For example, if you use a 600-pixel-wide image as the background of a <div> tag that is set to 300 pixels wide, only half the image will be visible. The Repeat options, listed in order of the appearance of their icons, follow:

• Inherit: Unless another option is selected, each element inherits the behavior of its parent element. This default option does not need to be specified.

• Repeat: The background image repeats vertically and horizontally in the background of the element.

• Repeat-X: The background repeats horizontally, but not vertically, in the background of the element.

• Repeat-Y: The background repeats vertically, but not horizontally, in the background of the element.

• No-Repeat: The background is displayed once at the top left of the element.

Origin: Specify whether the origin of the background begins at the border, the padding, or the content of a box element, such as a <div> tag.

Attachment: Determine how the background behaves when the page is scrolled. The options are

• Inherit: Unless another option is selected, each element inherits the behavior of its parent element. This is a default option and does not need to be specified.

• Fixed: The background remains glued to one place in the viewing area and doesn’t scroll out of sight, even when the web page is scrolled.

• Scroll: The background scrolls along with the web page.

Gradient: Click the color well next to Gradient to open Dreamweaver’s new visual gradient selector, shown in Figure 5-14.

Figure 5-14: The gradient selector opens when you click the color well next to Gradient in the Background panel.

The Box-Shadow panel

The Box-Shadow options (see Figure 5-15) make it possible to add shadows to <div> tags and other box elements. The options are

H-shadow: Add a shadow to your text on the horizontal axis. First choose a size option, and then enter a number in the field. For example, enter 2px to add a horizontal shadow that is 2 pixels wide.

V-shadow: Add a shadow to your text on the vertical axis. First choose a size option, and then enter a number in the field. (See the previous sidebar Comparing CSS size options.)

Blur: Control the amount of blur in the shadow. The larger the number, the more the shadow is spread out, or blurred.

Spread: Control how far the shadow spreads away from the box element.

Color: Enter a hexadecimal color code to specify the color of the shadow.

Type: Display the shadow in the inset or outset style.

Figure 5-15: The Box-Shadow section of the CSS Designer Properties panel includes options for adding shadows to box-level elements.

The List panel

The List panel can be used to define the size and type of bullets displayed with list tags. Use the icons at the top of this section to specify whether the bullet should be inside or outside the list. Use the drop-down list next to List-Style-Type to select the style of the bullet. The options are Disc, Circle, Square, Decimal, Lower-Roman, Upper-Roman, Lower-Alpha, Upper-Alpha, or None (see Figure 5-16). Choose None if you want to use the list tag with no bullet, a common option when you’re formatting a list of links in a navigation bar (covered in Chapter 6). If you want to use a custom bullet made with your own graphic, choose URL from the drop-down list next the List-Style-Image field and then click the Browse button to select an image.

Figure 5-16: The List options are at the very bottom of the CSS Designer Properties panel.

The CSS Transitions panel

The CSS Transitions panel, shown in Figure 5-17, provides access to the New Transition dialog box, also shown in Figure 5-17. Use these features to create and manage CSS3 transitions, which enable you to add gradually changing interactive effects to elements. For example, you can use a CSS3 transition to slowly change the background color of a <div> tag from red to blue.

Figure 5-17: Click the plus sign in the top left of the CSS Transitions panel to open the New Transition dialog box, shown on the right.

The CSS Transitions panel is not grouped with the other CSS Designer panels, but you can dock it there after it’s opened. To open the CSS Transitions panel, choose Window⇒CSS Transitions. To open the New Transition dialog box and create a new transition, click the small plus sign in the top-left corner of the CSS Transitions panel.

The Transition category has the following options:

Target Rule: The CSS style definition, or rule, that contains the properties you want to change with the transition.

Transition On: Choose any option from the drop-down list to specify the action that will trigger the transition. For example, choose Hover if you want the transition to begin when a user rolls a cursor over the element.

Property drop-down list: Specify whether the same transition will apply to all properties defined in the target rule or whether each property will have a different transition.

Property: Specify which CSS property you are targeting with the effect. Click the plus sign (+) to add a property or the minus sign (–) to remove one.

End Value: Enter the final value you want used when the transition is complete.

Choose Where to Create the Transition: Specify whether the transition should be saved in an internal or an external style sheet.

Switching between CSS and HTML Mode in the Property Inspector

The Property inspector, which is accessible from the bottom of the Dreamweaver workspace, displays the properties available to any selected element on the page. Thus, the options in the Property inspector are different when an image is selected than when text is selected, for example.

When nothing is selected, or when you select text on a page, the Property inspector is split into two sections: HTML and CSS. In Figure 5-18, you see the HTML mode of the Property inspector; Figure 5-19 shows CSS mode. Note that buttons on the left side of the Property inspector make switching between these two modes easy.

Figure 5-18: The HTML mode of the Property inspector.

Figure 5-19: The CSS mode of the Property inspector.

If you're new to CSS and HTML, understanding the differences between these two modes can be a little confusing. Essentially, if you use a formatting icon such as bold in HTML mode, Dreamweaver adds the HTML <strong> tag, which makes text appear bold in most web browsers. If you use the same icon in CSS mode, Dreamweaver automatically creates a style rule that includes the bold formatting option.

In CSS mode, you can also choose to edit existing styles to add new formatting options to styles that are already applied to text, images, or other elements on a page. You can edit an existing style by simply selecting the style in the Targeted Rule drop-down list and then using the Font, Size, and other fields in the Property inspector to make changes or additions.

Whenever you edit an existing style that has already been applied to elements on a page, the changes you make to the style are applied automatically anywhere the style is used. This feature is wonderful when you want to change several things at once but can be problematic if you want to make an element (such as a heading) appear one way on one page and another way somewhere else.

Anytime you want to create or edit a style, use the Property inspector in CSS mode. On the other hand, to apply an existing style to an element on the page, make sure you're in HTML mode. For example, to align an image with a class style or apply an ID style to a <div> tag, you need to be in HTML mode. To apply a style in HTML mode, select the image, text, or other element in the page where you want to apply the style and then use the Class or ID drop-down lists to select the style; Dreamweaver automatically applies it.

Similarly, to apply an HTML tag, such as the <h1> tag, you should be in HTML mode. But you create or edit a CSS rule for the <h1> tag in CSS mode. Of course, you don't have to create or edit styles with the Property inspector. Consider this a shortcut method; you may still prefer to use the CSS Designer panel (covered in detail previously in the chapter) to make significant changes to a style.