Introducing CSS
Looking at CSS rule options
Working in the CSS Styles panel
Creating and editing CSS styles in the Property inspector
Working with tag, class, and advanced style selectors
Comparing internal and external style sheets
Want to add a little style to your pages? Cascading Style Sheets (CSS) are all the rave on the Web and with good reason. CSS is the way to create Web sites today if you want to follow the latest standards and develop sites that are accessible, flexible, and designed to work on a wide range of devices.
The concept of creating styles has been around since 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. Using styles 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, into one style and then apply all those options at once to any selected text in your document using a single style. You also have the advantage that if you change a style, you can automatically apply the change 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 styles sheets for even 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 padding around text or images, and change background and link colors. You can even create more than one style sheet for the same page: one that makes your design look good on computers, another for cell phones, and a third a printed page.
For all these reasons (and more), CSS has quickly become the preferred method of designing Web pages among professional Web designers. If you haven't jumped on the CSS bandwagon yet, this chapter is designed to help you understand the basics of CSS, to introduce you to Dreamweaver's many CSS features, and to show you how to create and apply tag and class styles to text. Even if you've been working with CSS for a while, you may appreciate the review of CSS and Dreamweaver's style features before moving on to the more complex aspects of CSS covered in the next chapter. In Chapter 6, you find instructions for creating ID and Compounds styles, which enable you to use CSS to control the position of elements and to create styles that apply only to specific sections of a page. The lessons in Chapter 6 will help you design page layouts by combining HTML <div> tags and styles, and show you how to customize the predesigned CSS layouts included in Dreamweaver.
One of the most powerful aspects of CSS is the way you can use it to make global style changes across an entire Web site. Suppose, for example, that you create a style for your headlines by redefining the <h1> tag to create large, blue, bold headlines. Then one fine day, you decide that all your headlines should be red instead of blue. 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 turn red 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.
CSS has many other advantages and a remarkably broad scope. The following partial list shows some of what you can do with CSS:
Make global changes anywhere a style is applied simply by changing the original style in an external style sheet.
Create styles for commonly used elements, such as headlines and captions, to create a more consistent design and speed the development process.
Define styles that align and position elements, including images, tables, and
<div>tags.Control padding and margin spacing with greater precision and add different amounts of space to each side of an element.
Define font sizes in fixed or relative sizes with percentages, pixels, picas, points, inches, millimeters, ems, and exs (described in the sidebar, "Understanding CSS size options," later in this chapter).
Add and remove borders around images, tables,
<div>tags, and more. You can even add borders to only one side of an element to create dividing lines between elements and add visual interest to a page.Redefine existing HTML tags, such as the unordered list tag, which you can redefine to appear in a browser as a horizontal or vertical list with or without bullets. You can also replace standard HTML bullets with a variety of other bullet styles or an image.
Control the display of a background image defining how and if it repeats on a page or within a container, such as a
<div>tag or table.Change link colors, remove link underlining, and create rollover effects using text links.
Create multiple styles for the same page. For example, you can create one style that uses a large text size for anyone who has trouble reading small print on the Web and another that's optimized for display on a small screen, such as a cell phone.
Many people find CSS confusing at first because it's such a different approach to design than what you may be used to if you've worked in print. The following are three of the more confusing aspects of CSS for beginners:
Getting used to thinking about the styles on your site separate from your text, images, and other content. For example, instead of simply applying formatting directly to a headline to make it bold, green, and 24 point, in CSS, you create a style for your headline that includes bold, green, and 24 point, save that style in a separate place in your document or in a separate file called an external style sheets, and then you apply the style to one or more headlines as a separate step. As a result, if you want to change the way your headline looks later, you don't go to the headline itself in your page to make the change. Instead, you edit the style in the style sheet, and it automatically changes any headlines formatted with that style.
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, the selector would be something like
#containeror.caption. The declaration defines the style and describes its properties, such as bold, blue, or 300 pixels wide. Dreamweaver's four selector types are described in detail in the section that follows.Understanding when it's best to create external style sheets, internal style sheets, or inline styles, described in the section "Understanding rule definition options."
And ultimately, you need to understand how CSS and HTML work together. So, for example, you can control the positioning and appearance of an HTML <div> tag by applying an ID style to the tag, or you can redefine a tag, such as the <h1> tag to change the way headlines look on a page.
If you're starting to feel baffled already (or at any point in this chapter), hang in there. After you read through the basic concepts and start creating and applying styles, all this should start making more sense. And remember, you can always come back and read through any or all these points again. After you've been using styles for a while, the details in the following sections are likely to have more meaning to you, but it's really hard to start using styles before you have a good overview of how they work.
One of the first things you need to understand when you create new styles is which selector to use for which job. Each of the selector options has different naming restrictions and purposes. If you're completely new to working with styles, this may not make much sense yet, but I encourage you to read through all these descriptions of selectors so that you can appreciate your options before you move on.
Tip
Don't feel you have to memorize all this. Instead, consider folding down the corner on this page so you can refer to this list of selectors when you create your styles.
The following sections offer a description of each of the four selector option available from the New CSS Rule dialog box (as shown in Figure 5-1) in Dreamweaver CS4.
The class selector is the most versatile selector option. Class styles can be used to format any element (from text to images to multimedia), and they can be used as many times as you like on any page in a Web site.
Class style names always begin with a period, and 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 you could create a style called caption for the text that appears before your pictures, and you could create a style called photo-credit to format the name of a photographer differently from the caption. In that case, your class styles would look like this:
.caption .photo-credit
Dreamweaver helps you with the period (or a dot). If you choose class as the selector type and forget to include a dot at the beginning of the name, Dreamweaver adds one for you. (Note: Don't include any space between the dot and the style name.)
One other thing that can make styles confusing is that when you apply a class style to text or another element, the dot doesn't appear in the name when it's added to your HTML code. Thus, if you applied the .caption style to a paragraph tag to format the text under an image, it would look like this:
<p class="caption">This is a photo of an Egret in flight.</p>
Class styles must be applied to an element, such as the Paragraph tag shown in this example. Class tags can even be added to elements that are already defined by other styles.
When you create a class style in Dreamweaver, the style is displayed in the CSS Styles panel (as shown in Figure 5-3), and added to the CSS drop-down list in the Property inspector (as shown in Figure 5-2).
You can apply class styles using the CSS drop-down list, as shown in Figure 5-2. It's common to create styles to align images and other elements to the right or left of a page, and styles with the names .float-right and .float-left are included in most of the predesigned CSS layouts in Dreamweaver. These styles commonly include margin spacing to create a little white space between an image and text when text is wrapped around the aligned image, as shown in Figure 5-2.
For more details and step-by-step instructions for creating and applying styles with class selectors, see the section, "Using Class and Tag Styles in Dreamweaver," later in this chapter.
Think of ID styles as the building blocks of most CSS layouts (you find out how to create layouts with these styles in Chapter 6). ID styles must begin with a pound (#) sign, and, similar to class styles, Dreamweaver adds a pound (#) sign to the beginning of the style name automatically if you forget to include it. (Note: Don't include any space between the # and the style name.)
The ID selector option is a new addition to the CSS Rule dialog box in Dreamweaver CS4 (in CS3, you had to choose the Advanced option to create an ID style). 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). Thus an ID style used to identify the sidebar section of a page could look like this:
#sidebar
Similar to class styles, the # sign is not used in the HTML code when a style is applied to an element, such as a <div> tag like this:
<div id="sidebar">Between these tags with the sidebar ID style, you would include any headlines, text, or other elements in your sidebar.</div>
What's special about ID styles is that they should be used only once per page. This makes them ideally suited to formatting <div> tags and other block-level elements that are used to create distinct sections in a page. Thus, ID styles are great for creating page layouts where you want to define each section of a page only once.
In the predesigned CSS layouts included in Dreamweaver, all the designs are created by combining a series of <div> tags with ID styles using names like #container, #header, and #footer to identify the main sections of the design. In Figure 5-3, you can see how a collection of ID and Class styles are displayed in the CSS Styles panel after they're created. ID styles are also added to the ID drop-down list in the Property inspector, making them easy to apply to a selected element.
The tag selector is used to redefine existing HTML tags. Select this option, shown in Figure 5-4, if you want to change the formatting options for an HTML tag, such as the <h1> (heading 1) tag or the <ul> (unordered list) tag.
In many cases, redefining existing HTML tags with CSS has advantages over creating new styles. For example, content formatted with the Heading 1 tag is well recognized on the Web as the most important text on a page. For that reason, many search engines give priority to text formatted with the Heading 1 tag. Similarly, the hierarchical structure of the <h1>–<h6> tags helps ensure that even if a visitor to your site changes the text size in his or her Web browser, text formatted with the Heading 1 tag is still larger relative to text formatted with an Heading 2 tag, which is larger than text formatted with the Heading 3 tag, and so on.
The ability to change the appearance of headings and other tags with CSS makes it possible to retain these advantages while still being able to use the font, size, color, spacing, and other formatting options that you prefer in your Web design. 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 headline with the <h1> tag and then create a new <h1> style, the formatting you used to define the style will apply automatically to the headline as soon as the style is created.
For details on working with tag selectors, see the section "Using Class and Tag Styles in Dreamweaver" later in this chapter.
The compound selector can be used to combine two or more style rules to create a style definition that displays only when one style is contained within another. Compound styles are useful when you want to do something like use the Heading 1 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 then create another style for headlines that appear in the sidebar on the page and still use the Heading 1 tag to format both.
Compound styles are created by combining ID, class, or tag styles and look like this:
#sidebar h1
(See Figure 5-5 for an example of how an <h1> style defined like this within a #sidebar ID style looks in the New CSS Rule dialog box.) Note that you must include a space between each name or tag in a compound style and that you don't include the brackets around tag in a style name. In this example, the style definition will apply only to <h1> tags that appear within another element, such as a <div> tag with an ID style #sidebar.
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 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 the #sidebar ID. A compound style like this makes it possible to create links that look different when they appear in a headline in the sidebar of a page than when they appear 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 Web pages with CSS in Dreamweaver. (Find more information about compound styles in Chapter 6.)
You also 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.
Internal styles: If you create internal styles, the CSS code is stored in the
<head>area at the top of the HTML page you're working on, and the styles can be applied only to the page in which they were created.External styles: If you save your styles in an external style sheet, they're stored in a separate file with a
.cssextension. External style sheets can be attached to any or all the pages in a Web site in much the same way as 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.Inline styles: Inline styles are created within a document at the place that a style is used and only apply to the element they're attached to in the document. These are generally considered the least useful of the three style sheet options because any changes to the defined style must be made to the code that contains the element, which means you lose many of the other benefits of styles, such as the ability to make global updates and create very clean, very fast-loading HTML code. For example, creating one style for all your headlines and saving it in an external style sheet is better than applying the style formatting options to each headline separately.
At the bottom of the New CSS Rule dialog box, shown in Figure 5-6, you find a Rule Definition drop-down list. Use this list to specify where and how you want to save each new style that you define. The options are:
Choose This Document Only to create an internal style that can only be used in the open document.
Choose New Style Sheet File to create the new style in an external style sheet and create a new external style sheet simultaneously.
Choose any existing external style sheet that is attached to the page by selecting the name of the style sheet from the Rule Definition drop-down list. In Figure 5-6, I am selecting an existing style sheet with the name main.css.
Tip
If you are creating a style that you are likely to want to use on more than one page in your site, saving the style to a new or existing external style sheet is your best choice. If you save a style in an internal style sheet and later decide you want to add it to an external style sheet, you can move the style using the CSS Styles panel. You find instructions in the "Using External Style Sheets," section later in this chapter.
Why so many fonts?
Although you can specify any font you want for text on your Web pages, you don't have complete control over how that font appears on your visitor's computer. That's because the font you apply is displayed properly only if your visitors have the same font on their hard drives. To help ensure that your text appears as you intend, Dreamweaver includes collections of common fonts, grouped together in families, such as Arial, Helvetica, sans-serif, Georgia, Times New Roman, Times, and serif.
Here's how it works. When you apply a collection of fonts like these, 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 Georgia and your visitors have Georgia on their hard drives, they'll see your text in Georgia. If they don't have Georgia, the text is displayed in the next font on the list that your visitors do have. In this case, Times New Roman; if they don't have that font, either, the text is displayed in Times; and if they don't even have Times (which would be very unusual), the browser looks for any serif font. (In case you're not familiar with font terms, 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 like Arial.)
You can create your own font collections by selecting the Edit Font List option from the bottom of the Font-Family drop-down list in the Property inspector or the Type category of the CSS Rule definition dialog box. In the Edit Font List dialog box, shown here, use the plus and minus buttons at the top of the Edit Font List dialog box to add or remove a font collection. To add individual fonts to a collection, select the font name from the bottom right of the dialog box and use the double-left arrows to add it to a font list (use the double-right arrows to remove a font from a collection).
The only way to ensure that text appears in the font you want is to create the text in a graphic in a program, such as Photoshop or Fireworks, and then insert the graphic with the text into your page. That's not a bad option for special text, such as banners or logos, but it's usually not a good option for all your text because graphics take longer to download than text and are harder to update later.
If you prefer not to look the code behind your Web pages, it's helpful to at least have some familiarity with different kinds of tags, CSS, and other code that Dreamweaver creates for you when you design Web pages. The following 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, that is named
#container, and is defined as 780 pixels wide with the left and right margins set to auto (a cool trick for centering a CSS design, covered in detail in Chapter 6).A style created with a class selector, that is named
.caption, and is defined as Verdana, Arial, Helvetica, sans-serif, small, italic, and bold.A style created with a tag selector to redefine the HTML tag
<h1>— as Arial, Helvetica, sans-serif, large, and bold. (Note: because the Heading tags already include bold formatting, it is not necessary to include bold in the style definition.)
#container {
width: 780px;
margin-right: auto;
margin-left: auto;
}
.caption {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
font-style: italic;
font-weight: bold;
}
H1 {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}After you determine what selector type is best for your style and you decide whether you want to save it in an external or internal style, you're done with the New CSS Rules dialog box (described in the previous sections). You are ready to move on to the CSS Rule Definition dialog box and define the formatting and other options you want to include in your style. You find step-by-step instructions for creating new style rules later in this chapter. This section continues the overview to help you better understand your choices before you start creating a new style.
The CSS Rule Definition dialog box includes eight different categories, each with multiple options. All these choices can seem a bit daunting at first, which is why I've included this section with a general overview of the options in each category. Again, don't feel you need to memorize all these options; remember, you can always return to this section and use it as a reference when you're creating new styles.
In most cases, you'll only select a few options from one or two categories for each new style you create. Remember, you can always go back and edit styles to add or change options.
Note
Not all the options in the CSS Rule Definition dialog box are supported by all the Web browsers in use on the Web today, so beware that 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 describes the options in each of the categories in the CSS Rule Definition dialog box, shown in Figures 5-7 through 5-14.
The Type category features a collection of options that control the display of (you guessed it) the text in your pages. With the Type category selected (see Figure 5-7), you have the following formatting options:
Font-Family: Specifies a font, a font family, or a series of families. You can add fonts to the list by choosing Edit Font List in the drop-down list. (For an explanation of why Dreamweaver includes font collections and how to create new ones, see the sidebar, "Why so many fonts?" earlier in this chapter.)
Font-Size: Defines the size of the text. You can choose a specific numeric size or a relative size. Use the drop-down arrow to select from a list of options including pixels, picas, and percentages. For more on these options, see the sidebar "Understanding CSS size options."
Font-Style: Enables you to choose whether the text appears as normal, italic, or oblique. (Italic and oblique are rarely different in a Web browser, so stick with italic unless you have a specific reason not to.)
Line-Height: Enables you to specify the height of a line on which the text is placed (graphic designers usually call this leading). You can specify line-height in a variety of ways including pixels, picas, and percentages. For more on these options, see the sidebar "Understanding CSS size options."
Font-Decoration: Enables you to specify whether text is underlined, overlined (a line appears over the text), displayed with a strikethrough, or displayed with the blink effect (which makes text appear to flash on and off). You can also choose None, which removes all decorative effects.
Tip
None is the option you should choose if you want to remove the underline from linked text. And please, use the other decoration options sparingly, if at all. Links are underlined automatically, so if you underline text that isn't a link, you risk confusing viewers. Overlined and strikethrough text can be hard to read. 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.
Font-Weight: Enables you to control how bold the text appears by using a specific or relative boldness option.
Font-Variant: Enables you to select small caps. Unfortunately, this attribute isn't supported by most browsers.
Font-Transform: Enables you to globally change the case of selected words, making them all uppercase, all lowercase, with initial caps, or with no capitalization.
Color: Defines the color of the text. You can use the color well (the square icon) to open a Web-safe color palette in which you can select predefined colors or create custom colors.
After you select the Type options for your style sheet, click Apply to apply them, and click OK to save the settings and close the CSS Rule Definition dialog box.
The Background category in the CSS Rule Definition dialog box (see Figure 5-8) enables you to specify a background color or image for a style and to control how the background will be displayed on the page. You can use background style settings for any element of your Web page that can display a background, including <div> tags and Heading tags. For example, you could alter the <body> tag and include background settings that apply to the entire page, or you could create an ID style with a background setting that would add a background color only to an individual <div> tag. By including the background in the ID style of a <div> tag, you can limit the background to only display where the <div> tag is used.
In the example shown in Figure 5-8, I've defined the rule for an ID style named #mainContent to include a background image, which I'm further defining with the No-Repeat option. Another advantage of CSS is that it includes more precise control of background images than is possible with HTML, which by default, repeats a background image across and down a page.
You can choose from these Background options:
Background-Color: Specifies the background color of a defined style. You can use the color well to open a Web-safe color palette in which you can select predefined colors or create custom colors.
Background-Image: Enables you to select a background image as part of the style definition. Click the Browse button to select the image.
Background-Repeat: Determines how and whether the background image tiles across and down the page. In all cases, the image is cropped if it doesn't fit behind the element to which the style is applied. The Repeat options are
No-Repeat: The background is displayed once at the top, left of the element.
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.
Background-Attachment: This property determines how the background behaves when the page is scrolled.
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.
Background-Position (X): Enables you to align the image left, center, or right, or to set a numeric value to determine the precise horizontal placement of the background. You can use horizontal positioning only with no-repeat or with repeat-y.
Background Position (Y): Enables you to align the image top, center, or bottom, or to set a numeric value to determine the precise vertical placement of the background. You can use vertical positioning only with no-repeat or repeat-x.
The Block category (see Figure 5-9) defines the spacing and alignment settings and is commonly used for styles that will define the display of text on a Web page.
You can choose from these Block category options:
Word-Spacing: Defines the amount of white space inserted between words in points, millimeters (mm), centimeters (cm), picas, inches, pixels, ems, and exs.
Letter-Spacing: Defines the amount of white space inserted between letters in points, millimeters (mm), centimeters (cm), picas, inches, pixels, ems, and exs.
Vertical-Align: Aligns inline elements, such as text and images, in relation to the elements that surround them. Your options are Baseline, Sub, Super, Top, Text-Top, Middle, Bottom, and Text-Bottom, or you can set a numeric value. Note that not all Web browsers support all these options.
Text-Align: Enables you to left, right, center, or justify your text. You can use this setting, for example, as part of the definition of an ID style when you want to align the contents of a
<div>tag, such as centering the text in a footer.Text-Indent: Specifies how far the first line of text is indented. Negative numbers are allowed if you want the first line to begin off the page.
White-Space: Tells the browser how to handle line breaks and spaces within a block of text. Your options are Normal, Pre (for preformatted), and Nowrap, which prevents elements from being separated if they must wrap to fit within a browser window or other container.
Display: Indicates how to render an element in the browser. For example, you can hide an element by choosing None and change the positioning of an unordered list from horizontal to vertical, by choosing Inline.
The Box category (see Figure 5-10) defines settings for positioning and spacing. As you can read in Chapter 6, these settings are ideal for creating page layouts with ID styles to position <div> tags.
You can use the Box category properties to set:
Width: Enables you to specify a width for any element that can have its dimensions specified, such as a
<div>tag. You can use pixels, points, inches, centimeters, millimeters, picas, ems, exs, or percentages for your measurements.Height: Enables you to specify a height for any element that can have its dimensions specified. Note: The height field is often left empty to enable elements, such as
<div>tags, to expand to fit their contents.Float: Enables you to align elements, such as images and
<div>tags, to the left or right of a page or other container causing text or other elements wrap around it.Clear: Prevents floating content from overlapping an area to the left or right, or to both sides of an element. This is a useful option for preventing overlapping of elements, especially when the Float option is used.
Padding: Sets the amount of space within the borders of an element. 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.Margin: Sets the amount of space around the outside of an element. 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.
The Border category defines settings — such as Width, Color, and Style — and are commonly used to define borders around images, tables, and <div> tags. As shown in Figure 5-11, you can specify border settings on all four sides of an element or create borders only on one, two, or three sides of an element. With this technique, 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 List category defines settings, such as the size and type of bullets for list tags. You can specify whether bullets are disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, or none (see Figure 5-12). Choose None if you want to use the list tag with no bullet. If you want to use a custom bullet, you can use the Browse button to insert an image to be used as the bullet. You can also control the location of the list bullet in relation to the list item. In Chapter 6, you find instructions for redefining the unordered list tag to create rollover effects for links, a popular option for creating navigation rows and other collections, or lists, of links.
The Positioning category (see Figure 5-13) enables you to alter the way elements are positioned on a page. As you can read in Chapter 6, positioning can dramatically change the way block-level elements appear in a browser. Block-level elements include table, list, header, paragraph, and <div> tags. For example, AP Divs in Dreamweaver are simply <div> tags that use absolute positioning to place elements in a specific part of a page.
Note
To understand how positioning works, it's important to know that 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 whether the element is inside another element, such as a <div> tag. Here are the Positioning options:
Position: Enables you to specify the position of an element, such as a
<div>tag. Options includeAbsolute: Uses 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: Positions 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: Uses a position relative to the point where you insert the element into the page or relative to its container.
Static: By default, all HTML elements that can be positioned are static, which simply places the content at its location within the flow of the document.
Width, Height: Enables you to specify a width and height that you can use in styles you apply to images,
<div>tags, or any other element that can have its dimensions specified. These settings are the same as the Width and Height in the Box category and entering a value in either category caused the same value to appear in the other.Placement: Defines the size and location of an element within its containing element. For example, you can set the right edge of the element to line up with the right edge of the element that contains it. You can specify the Top, Right, Bottom, and Left options separately and you can use pixels, points, inches, centimeters, millimeters, picas, ems, exs, or percentages for your measurements.
Visibility: Enables you to control whether the browser displays the element. You can use this feature, combined with a scripting language, such as JavaScript, to dynamically change the display of elements. For example, you can cause an element to appear on a page only when a user clicks a button and then make it disappear when the button is clicked again. The Visibility options are
Z-Index: Controls the position of an element, such as an AP Div, on the Z-coordinate, which controls the stacking order in relation to other elements on the page. Higher-numbered elements overlap lower-numbered elements.
Overflow: Tells the browser how to display the contents of an element if the container, such as a
<div>tag, can't fit the entire elements entire size.Visible: Keeps content, such as an image or text, visible, even if it expands beyond the defined height or width of a container.
Hidden: Cuts off the contents if they exceed the size of the container. This option doesn't provide scroll bars.
Scroll: Adds scroll bars to the container regardless of whether the contents exceed the element's size.
Auto: Makes scroll bars appear only when a container's contents exceed its boundaries.
Clip: When the content of an element overflows the space allotted and you set the Overflow property to Scroll or Auto, you can set the Clip settings to specify which part of the element is visible by controlling which part of the element is cropped if it doesn't fit in the display area.
Extensions (see Figure 5-14) include filters and cursor options:
Page-Break: Can be set for before or after an element to insert a point in a page where a printer sees a page break. This option enables you to better control the way a page is printed.
Cursor: Defines the type of cursor that appears when a user moves the cursor over an element.
Filter: Enables you to apply special effects, such as drop shadows and motion blurs. These are visible only in Microsoft Internet Explorer.
Note
Now that you have the overview of all these options, here's another tip. You don't have to specify any of these settings when you create a new style in Dreamweaver. Any options you leave blank are controlled by the browser's default settings or other styles already applied to the page. For example, if you don't specify a text color in a class style named .caption, the text formatted with the style will remain black, the default color in most Web browsers, unless it has already been formatted by another style, such as a style that changes the color of all the text on a page. (You find instructions for changing the text color for an entire page in the "Using Page Properties to create styles for page-wide settings," later in this chapter.)
The CSS Styles panel, as shown in Figures 5-15 and 5-16, provides a great place to view, manage, organize, and edit CSS rules. To open the CSS styles panel, choose Window
Warning
You can also rename styles in the CSS Styles panel, but be careful. There are two ways to rename styles in the CSS Styles panel, and only one automatically changes the corresponding HTML code. If you don't change the name of a style in the style sheet and any place the style's used in your Web site code, the style no longer works. See the section, "Editing an existing style," later in this chapter, for details on this important difference and how to rename styles without breaking them. You find instructions for organizing style sheets in the section, "Moving, copying, and editing styles in an external style sheet," later in this chapter.
When you work with the CSS Styles panel, you can switch between two modes, accessible by clicking the All or Current tabs at the top-left of the panel. The following sections explain each mode in more detail.
The All tab, which is selected by default, displays a list of all the CSS rules defined in a document's internal style sheet and any attached external style sheets. When the CSS Styles panel is in All mode, you can do the following:
See the styles in a style sheet: To view the styles in an internal or external style sheet in the CSS Styles panel, click the plus sign (the triangle on the Mac) to open the style sheet within the panel. You'll find the arrow (or triangle) next to the
<style>tag if you're using an internal style sheet or next to the style sheet name if you're using an external style sheet attached to the page. Figure 5-15 shows a page with both internal and external style sheets.View style properties: Select a style in the CSS Styles panel, and its properties are displayed in the Properties pane at the bottom of the CSS Styles panel.
Edit styles: Notice in Figure 5-15 that the h1 style is selected in the CSS Styles panel, and the definition of the style is displayed in the Properties pane at the bottom of the panel. You can edit existing styles by typing or using the drop-down lists in the Properties pane (these handy lists appear when you place your cursor in a field and are great for making quick changes). If you prefer to edit a style in the CSS Rule definition dialog box, described in detail in the previous section, double-click any style name and it opens automatically in the CSS Rule definition dialog box.
Tip
If you don't see any styles listed in the CSS Styles panel when the All tab is selected, you probably haven't defined any styles for the document or attached an external style sheet. Occasionally, however, the styles in an external style sheet won't display, even if the name appears in the Styles panel. (I've seen this happen sometimes when I open a file that was created in a previous version of Dreamweaver.) In this case, an easy solution is to simply reattach the style sheet by clicking the Attach Style Sheet icon (as shown in Figure 5-15), browsing to find the style sheet, and selecting it.
When you select the Current tab at the top left of the CSS Styles panel, you can view the styles currently applied to any selected element on a page, as shown in Figure 5-16.
Tip
Current mode is useful for identifying how styles are applied to a particular element and for troubleshooting when styles conflict.
The Current mode has three sections: the Summary for Selection pane, the About pane, and the Properties pane.
In the Summary for Selection pane, you see the rules currently defined for the selected style. This pane is especially useful when you've created a complicated layout and are trying to understand how different styles may be affecting the same element.
In the About pane, you see a text description of where a formatting option is defined for any rule selected in the Summary of Selection.
In the Properties pane, you can edit, add, or delete style rules just as you can in All mode.
In the bottom left of the CSS Styles panel, as shown in Figure 5-15, you see three small icons that make it easy to change among the Show Category, Show List, and Show Only Set Properties views. These options apply to the Properties pane in both Current and All modes. Here's how they work:
Show Category View: Dreamweaver displays all the properties available for a selected rule organized by the category to which they belong. For example, all the font properties are grouped into a Font category.
Show List View: Dreamweaver displays all the properties available to use for a rule organized alphabetically.
Show Only Set Properties: In this view, Dreamweaver displays only the properties you've defined for a selected rule. This is the default setting, and the option shown in Figure 5-15. With this view option, get a quick look at the settings for the selected style.
The second set of icons, on the bottom right of the CSS Styles panel (also shown in Figure 5-15) aren't dependent on the view settings. From left to right, these icons represent
Attach Style Sheet: Click this icon and browse to find any existing style sheet in a site to attach it to the open page.
New CSS Rule: Click this icon to open the New CSS Rule dialog box and create a new style.
Edit Style: Click this icon to open any style selected in the CSS Styles panel in the CSS Rule definition dialog box where you can edit it.
Delete CSS Rule: Select any style name in the CSS Styles panel and click this trash icon to delete it.
In CS4, Dreamweaver added new CSS controls to the Property inspector, a welcome addition designed to make it easier to create and edit styles as you format text and other elements on your pages.
In previous versions of Dreamweaver, the Property inspector displayed all the settings at once, but in CS4, the Property inspector was split into two sections. In Figure 5-17, you see the HTML mode of the Property inspector. In Figure 5-18, you see the CSS mode. Notice that there are buttons on the left side of the Property inspector to make switching between these two modes easy.
If you're new to CSS and HTML, it can be a little confusing at first to understand the differences between these two modes. Essentially, if you use the formatting icons, such as bold and italic, in HTML mode, Dreamweaver adds HTML tags and attributes. If you use these same icons in CSS mode, Dreamweaver launches the New CSS Rule dialog box so that you can create a style that includes these formatting options.
In CSS mode, you can also choose to edit existing styles to add new formatting options to styles that are already applied to the page. This means that you can edit existing styles by simply selecting the style from the Targeted Rule drop-down list and then using the Font, Size, and other fields in the Property inspector to make any changes or additions.
Note
Any time you edit an existing style that has already been applied to elements on a page, the changes you make to the style are automatically applied anywhere the style is used.
On the other hand, say you want to apply an existing style to an element on the page. For example, if you want to align an image with a class style or apply an ID style to a <div> tag, you want to be in HTML mode. To apply a style in this mode, select the 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, if you want to apply an HTML tag, such as the Heading 1 tag, you want to be in HTML mode, but if you want to create or edit a CSS rule for the H1 tag, you want to do that from the CSS mode.
In the following sections, you find instructions for putting Dreamweaver's style features to use to create, apply, and edit styles with the class and tag selectors. In Chapter 6, you find instructions for working with styles created with the ID and compound selectors.
Note
As you go through the steps to create a new style in Dreamweaver, you may be surprised by the number of options in the many panels and dialog boxes available for creating CSS. Remember, you can always refer to the descriptions of these many options, which are covered in detail in the earlier sections of this chapter.
Using styles to format text in Dreamweaver is a relatively simple process. First, you define a style and then, as you see in the following steps, you apply it to an element on the page. In this section, you walk through the process of creating a class style that can be applied to any element on a page. In this example, you'll create a .caption class style and then, in the next section, you'll use .caption to format the text under a photo.
To define a new class style, create a new document or open an existing file, and then follow these steps:
Choose Format
Alternatively, you can click the New CSS Rule icon at the bottom of the CSS Styles panel (refer to Figure 5-15).
The New CSS Rule dialog box appears, as shown in Figure 5-19.
Choose a selector type.
To create a class style, choose (you guessed it) Class from the Selector Type drop-down list.
In the Selector Name field, type a new name for the style beginning with a dot (.).
For this example, type .caption.
Note
You can name a class style anything you like, as long as you don't use spaces or punctuation, but class style names must begin with a dot (.). If you choose the Class option and neglect to enter a dot at the beginning of the name, Dreamweaver adds one for you.
From the Rule Definition drop-down list, choose This Document Only to create the new style in an internal style sheet.
Note
An internal style sheet applies only to the current page. When you select this option, the style will be created and added to the top of the open HTML page in the
<head>section.If you prefer, you can choose the New Style Sheet File option to create a new external style sheet as you create the style, or you can use the drop-down list to select any existing style sheet already attached to the page and add the new style to it.
Click OK.
The CSS Rule Definition dialog box opens, as shown in Figure 5-20.
Choose a category from the left of the CSS Rule Definition dialog box.
For this example, choose the Type category, as shown in Figure 5-20. (For a detailed description of each of the categories, refer to the "Comparing CSS Rule Options" section, earlier in this chapter.)
In the Font-Family field, choose a font list collection from the drop-down list or enter the name of a font.
For this example, I chose Arial, Helvetica, sans-serif. To use a font that isn't included, choose the Edit Font List option from the drop-down list and create a new font list using your own fonts. (For more on using fonts on the Web, see the sidebar, "Why so many fonts?" earlier in this chapter.)
In the Font-Size drop-down list, choose the size you want for your caption style.
For this example, I chose Small. You can specify text sizes in pixels, picas, mm, and several other measurements. For an explanation of options, see the sidebar "Understanding CSS size options," earlier in this chapter.
In the Font-Style drop-down list, choose a font style.
In this example, I chose Italic.
In the Font-Weight drop-down list, choose a weight.
For this example, I chose Bold.
Click the color well and choose a color for the style.
Sticking to the default color swatches in the color well (the square icon) is certainly the quickest way to choose a color, but you can also create custom colors by clicking the icon that looks like a rainbow-colored globe in the upper-right corner of the color well and selecting a color from the System Color Picker. For this example, I chose a dark green color.
Click OK.
The new style name is added to the CSS panel, as shown in Figure 5-21, a little later in this chapter. If the new style isn't visible, click the plus sign (+) (or triangle on the Mac) next to the
<style>tag to reveal the rules in the current style.
Note
When you create a class style, such as the .caption style in this example, it's also added to the Class drop-down list in the Property inspector, as you see in the following section.
Defining class styles in Dreamweaver is the time-consuming part. Applying them after you define them is the time-saving part. How you apply a style depends on the kind of style you've created. To apply a class style in Dreamweaver, follow these steps:
Open an existing document or create a new one and add some text, and then click and drag to select the text or other element to which you want to apply a style.
In this example, I've selected the text under the photograph in the page shown in Figure 5-21.
In the Property inspector (with the HTML features displayed), select the style from the Class drop-down list.
Notice that Dreamweaver provides a preview of the style by formatting the name in the drop-down list based on the specified options in the style definition (in this example, the
.captionstyle is displayed as bold, italic, and green). When you choose a style, the selected text or other element automatically changes in the Document window to reflect the application of the style. In Figure 5-21, you see the caption style created in the previous exercise applied to the text below the photograph.
Tip
Another way to apply a style is to select an image, text, or other element and then choose the name of the style from the menu you see when you choose Format
To remove a class style from a selected text block or other element, make sure the Property inspector is in HTML mode, select the element where the style is applied in the Web page, and choose None from the Class drop-down list in the Property inspector (you can see this option in Figure 5-21).
You can also remove a style by right-clicking the tag the style is applied to in the tag selector at the very bottom of the workspace. The tag selector is a great feature for quick edits and for identifying elements on the page. As you see in Figure 5-22, when you right-click a tag name, a pop-up menu appears. If you don't see the tag that you want to edit in the tag selector, click to select the element in the Web page and the corresponding tag should appear in the tag selector. To remove or change a style using the tag selector, right-click the tag and then choose Class
In addition to creating new class styles, you can create styles that redefine existing HTML tags. When you create a style in the New CSS Rule dialog box using the tag selector option, you can alter the appearance, position, and other features of any an existing HTML tag.
Figure 5-22. You can use the tag selector at the bottom left of the Dreamweaver workspace to remove a style or tag.
Because HTML tags already include formatting options, (for example, the Heading tags include formatting to style text in large and bold), when you create a style with a Tag selector, you have to consider the formatting options already associated with that tag. Any options you specify in the CSS Rule Definition dialog box will either be added to the existing formatting created by the tag, or the new rules will override the existing style. For example, in the exercise that follows, I redefine the <h1> tag by changing the headline font to Georgia, which will take the place of the default font Times, but I don't need to make bold part of the style definition because it's already included in the style for an <h1> tag.
When you redefine an existing HTML tag, you don't need to apply the style for the formatting to change. Wherever you've applied the HTML tag, the style definition settings are applied automatically.
You may ask "Why would I redefine the <h1> tag instead of just creating a new headline style as a class style?" or "What's the best scenario for using each of these options?" In "Creating styles with the class selector" earlier in this chapter, you find out how to create a new style class that you can selectively apply to any block of text on your page. But at times, using an existing HTML tag is better. Heading styles are especially important because they're well recognized on the Web as indicators of the most important text on a page.
To redefine an HTML tag, such as the <h1> tag, with the tag selector, create a new file or open an existing one and then follow these steps:
Choose Format
Alternatively, you can right-click (Option-click on a Mac) anywhere in the CSS panel and choose New, or you can click the New CSS Rule icon at the bottom right of the CSS panel. The icon looks like a small plus (+) sign.
The New CSS Rule dialog box opens, as shown in Figure 5-23.
Choose the HTML tag you want to redefine from the Selector Name drop-down list.
You can also type to enter the name of a tag into the Selector Name field. In this example, I selected h1 to redefine the H1 heading tag.
From the Rule Definition drop-down list, choose the This Document Only option to create the new style in an internal style sheet.
If you prefer, you can choose the New Style Sheet File option to create a new external style sheet as you create the style, or you can use the drop-down list to select any existing style sheet already attached to the page and add the new style to it.
Note
An internal style sheet applies only to the current page. When you select this option, the style is created and added to the top of the open HTML page in the
<head>section.Click OK.
The CSS Rule definition dialog box opens.
Choose a category and specify the options you want to use to redefine the new tag style.
For this example, I redefined the
<h1>tag to use the Georgia font instead of the default browser font, changed the size to extra large, and changed the text color to dark green.Click OK.
Any text or other element that you've already formatted with the HTML tag immediately changes to reflect the formatting in the new tag style definition.
Note
If you want to be able to use the same HTML tag with different style definitions, you can create compound styles, as described in Chapter 6. See "Understanding style selectors" earlier in this chapter for an introduction to the different types.
You can change the attributes of any style after you create it by editing its style definitions. This is where some of the biggest advantages of Cascading Style Sheets come into play. You can make global changes to a page or even to an entire Web site by changing a style because when you edit the style, the changes are automatically applied to every element where you used the style. This is one of the reasons that external style sheets are so valuable because you can create styles that are used on any or all the pages in a site. Beware, however, that this can also lead to problems. If you decide that you want to edit a style when you use it on a new page, don't forget that you'll be changing the formatting everywhere else you've already used that style. In some cases, you may be better off creating new styles, rather than editing old styles.
Note
You can create new styles by duplicating an existing style, giving it a new name, and then altering the style definitions. This is a time-saving trick when you want to create a new style that is similar to an existing one.
To edit an existing style, follow these steps:
Open the CSS Styles panel by choosing Window
Select the name of an existing style in the CSS panel.
The corresponding definition settings are displayed in the Properties pane below it.
Select any of the settings in the Properties pane and edit them.
Alternatively, you can double-click the name of any style in the CSS Styles panel to launch the CSS Rule Definition dialog box and edit the style there.
If you edit a style definition in the Properties panel, the changes are applied automatically as soon as you press the Return or Enter key or click outside the formatting field in the panel.
If you edit a style in the CSS Rule Definition dialog box, changes are applied automatically when you click the Apply button.
Click OK to apply the changes and close the dialog box.
Warning
You can rename a CSS style in the CSS Styles panel in much the same way you'd rename a filename in the Files panel, by clicking to select the name and then typing a new name. Beware, however, that renaming a style in this way doesn't change its corresponding reference in the HTML code of your Web pages. If you change a name in the CSS Styles panel by simply typing a new name like this, you must also manually change the name in the corresponding page code, which can get complicated if you've used the style in many places.
For example, if you create an .imagecaption style and apply it to text in your Web page, and then later you decide to shorten the name of the style to .caption, make sure that every place you've used that style in your site is updated in the code where it's been applied, or the link to the style sheet will be broken.
Note
If you want to rename a style and update the style references in the code at the same time, open any page where the style is used and follow these instructions:
Open the CSS Styles panel by choosing Window
Right-click (Control-click) the name of an existing style in the CSS panel.
Choose Rename Class, as shown in Figure 5-24.
The Rename dialog box opens. (If you select a style created with another selector type, the options change. For example, if you select an ID style, the option will be Rename ID.)
Type a new name in the New name field and click OK.
If you've already applied the style and the style is saved in an external style sheet, a dialog box opens offering to "Use Find and Replace to fix the documents that use this style?".
Warning
If the style you want to rename is saved in an internal style sheet, the name will automatically be changed in the code anywhere the style has been applied. With internal style sheets, the Find and Replace dialog box does not open and you do not have all the options in this exercise. However, any changes that are made will be displayed in the Results panel, which automatically opens at the bottom of the workspace.
Click Yes to automatically update references to the style in the code with the new style name.
The Find and Replace dialog box opens (see Figure 5-25) with the necessary search strings already filled in. Don't change these settings unless you know what you're doing with these advanced search strings and want to alter the way Dreamweaver renames the style.
Click Replace All to automatically update all references to the style in the code.
Dreamweaver warns you that this operation can't be undone, but you can always rename the style again by repeating these steps if you change your mind.
If you're like many designers, you probably don't like the underline that automatically appears under all the linked text in a Web page. In this section, you discover how easy it is to remove that underline and change the color, font face, and size for the links with Dreamweaver's Page Properties dialog box. You can also change other page-wide settings, such as the background color and page margins, from the Page Properties dialog box.
Although you can change link styles by redefining the anchor tag, as you'd create any style with a tag selector, the easiest way to alter all your link styles at once is to change them in the Page Properties dialog box. When you use this option, Dreamweaver automatically creates the corresponding tag selector styles and lists them in the CSS Styles panel. Other page-wide settings in this dialog box work similarly.
To change hyperlink and other styles with the Page Properties dialog box, open an existing page or create a new one and follow these steps:
Choose Modify
Alternatively, you can click the Page Properties button in the Property inspector. The Page Properties dialog box appears.
In the Appearance (CSS) category, which is displayed when the Page Properties dialog box opens, you can specify page-wide font options, set a background color or image, and adjust the margins on a page.
Note
When you alter these settings, Dreamweaver automatically creates a new style rule for the Body tag. If you want to edit these settings further in the future, you can do so by editing the Body tag or by returning to the Page Properties dialog box.
Select the Links (CSS) category on the left of the Page Properties dialog box, as shown in Figure 5-26.
Specify a font face and size for your links.
Tip
If you want to use the same font size and face for your links as you use in the rest of the text on your page, it's best to leave these options blank; then if you change the text settings for the page, you won't have to remember to change them for your links as well.
Specify colors for each hyperlink state by clicking in the corresponding color well and selecting a color from the Color dialog box.
You can change any or all the link color settings. If you don't specify a link color, the browser uses the default link color. Here's an explanation of each of the four link states:
Link Color: The color in which your links appear when the page is first loaded and the linked page hasn't yet been visited by the browser. The corresponding HTML tag is
<a:link>.Visited Links: The color your links change to after a browser has already viewed the linked page. The corresponding HTML tag is
<a:visited>.Rollover Links: The color a link changes to as a user rolls a cursor over a link. The corresponding HTML tag is
<a:hover>.Active Links: The color a link changes to as a user is actively clicking a link. The corresponding HTML tag is
<a:active>.
Select a style from the Underline Style drop-down list.
Many designers prefer to remove the underline that automatically appears under linked text by choosing Never Underline, as shown in Figure 5-26.
Click OK.
The Page Properties dialog box closes, the style settings are automatically applied to any links on the page, and the corresponding styles are added to the CSS panel.
Note
To fully test link styles, preview your page in a Web browser or click the Live View button at the top of the workspace. It's good practice to test link settings in a browser when you make changes like the ones in the preceding exercise. Take a look at how your links appear; for example, do the active and visited link colors look good against the background color of the page. Remember that any styles you create using the Page Properties dialog box affect all links on your page unless you specifically apply a different style to an individual link that overrides the redefined tag style. If you want to use different link styles in different parts of the same page, you can create compound styles, covered in Chapter 6.
External style sheets (or linked style sheets) offer the greatest advantages with CSS. You can define styles for common formatting options used throughout an entire site, such as headlines, captions, and even images, which makes applying multiple formatting options to elements fast and easy. Using external style sheets also makes global changes easier because when you change a style in an external style sheet, you automatically change every element to which you applied the style throughout the site.
Note
Internal style sheet information is stored in the Head section of the HTML code of the document you're working on, and styles in an internal style sheet can be applied only to the current document. If you want to create styles that you can share among multiple documents, use external style sheets. Don't worry if you've already created a bunch of styles in an internal style sheet and now wish they were in an external one — as you'll discover in this exercise, it's easy to move styles from one kind of style sheet to another.
You create external style sheets almost exactly the same way you create internal style sheets, except that external style sheets need to be saved as separate files. When you use Dreamweaver to create a new style, you have the option of creating that style in a new or existing external style sheet. If you choose to create a new style in a new external style sheet, Dreamweaver automatically creates the new file as you create the style and attaches the new style sheet to the page you're working on.
If you prefer, you can create a new CSS file just as you'd create any other new file in Dreamweaver by choosing File
Note
You must attach an external style sheet to every page where you want the styles to be used. When a style sheet is attached to a Web page, all the style definitions included in the style sheet become available for that page from the CSS Styles panel.
To create an external style sheet as you create a new style, follow these steps:
Choose Text
Choose a selector from the Selector Type drop-down list.
The four options — Class, ID, Tag, and Compound — are described in detail in the "Understanding style selectors" section, earlier in this chapter.
Type a name into the Selector Name field or select an option from the Selector Name drop-down list.
Choose New Style Sheet File from the Rule Definition drop-down list.
This is the crucial step in creating a new external style sheet as you create the new style.
Click OK.
The Save Style Sheet File As dialog box opens.
Select a location in which to save the style sheet file.
Note that you should save the style sheet in the root folder of your Web site. You can save your CSS files in a subfolder, but remember that you must upload the CSS file to your Web server when you publish the site for the styles to work. (For more information on the root folder and how to define a site in Dreamweaver, see Chapter 2.)
Enter a name for the style sheet in the File Name field.
You can name your style sheets anything you like; just don't use any spaces or special characters (hyphens and underscores are okay). Dreamweaver automatically adds the
.css; just make sure you don't delete it.Click Save.
The CSS Rule Definition dialog box opens.
Define the new style rule specifying all formatting options you want applied with the new style.
You find detailed descriptions of these options in the "Comparing CSS Rule Options" section earlier in this chapter.
Click OK to save the new style, close the dialog box, and create the new external style sheet simultaneously.
Your new style is automatically saved in the new external style sheet and listed in the CSS Styles panel.
After you create an external style sheet, you'll likely want to attach it to additional Web pages. Begin by opening the page to which you want to attach the style sheet and then follow these steps:
Choose Window
The CSS panel appears.
The Attach External Style Sheet dialog box appears (as shown in Figure 5-27).
Click the Browse button and locate the CSS file in your site folder.
You can also enter a URL if you want to use a remote CSS file located on another Web site, but it's most common to use a style sheet contained within the Web site you're working on. Either way, Dreamweaver automatically sets the link to the style sheet for you, includes the style sheet link code at the top of the HTML file, and lists all the styles in the external style sheet in the CSS panel.
Select the Link or Import option.
If you're attaching a style sheet to an HTML file, your best choice is almost always to choose Link, which is the default option. Choose Import if you want to create one master external style sheet that contains references to other style sheets, an advanced option that enables one style sheet to refer to another.
In the Media drop-down list, choose an option.
With the Media drop-down list, you can specify the intended use for the style sheet. For example, if you've created a style sheet that formats your page for printing, choose the Print option. You can leave this option blank if you're attaching a style sheet to control the way the page will appear in a browser.
Click OK.
The dialog box closes, and the external CSS file is automatically linked to the page. Any styles you've defined in the external style sheet appear in the CSS Styles panel, listed under the name of the style sheet, and all the styles automatically become available for use on the page. In Figure 5-28, you can see that the main.css style sheet has been added to the CSS Styles panel. Internal style sheets are simply listed as
<style>.
Tip
You can attach multiple style sheets to the same HTML page. For example, you can save all your text styles in one style sheet and all your layout styles in another and then attach both to the same document to make all the defined styles available to the page. Similarly, you create different style sheets for different purposes, such as one for printing the file and another for browser display.
After you attach an external style sheet to a document, you can move, copy, and edit styles as follows:
Moving styles: Move any internal styles into the external style sheet by simply clicking the name of a style in an internal style sheet in the CSS Styles panel and dragging it onto the name of an external style sheet. In Figure 5-28, you can see that I'm moving a body style from the internal style sheet, which by default is
<style>, into the external style sheet main.css. If you have attached more than one external style sheet to a document, you can also move styles from one external style sheet to another using click and drag.Copying styles: You can copy styles from one document to another by right-clicking (Control-clicking on a Mac) a style name in the CSS Styles panel, choosing Copy, and then opening the document where you want to add the style, right-clicking (Control-clicking on a Mac) the name of an internal or external style sheet in the CSS Styles panel, and choosing Paste.
Editing styles: You edit styles in an external style sheet the same way you edit styles in an internal style sheet: by clicking or double-clicking the style name in CSS Styles panel. (For more detailed instructions, see the section "Editing an existing style," earlier in this chapter.) Any changes you make to a style in an external style sheet are applied automatically to all the files to which the external style sheet is attached (remember, you must upload the style sheet to your Web server for the changes to take effect on the published version of the site).
If you want to edit a remote CSS file, download the file to your hard drive before you open it in Dreamweaver. In Dreamweaver, you open .css files by double-clicking them or choosing File
If you prefer, you can also edit the code by hand directly in code view. Figure 5-29 shows an example of a style sheet opened directly in Dreamweaver. Notice that the CSS Styles panel displays all relevant style information and gives you access to the CSS editing tools.
Adobe includes several sample style sheets for you to use in your Web sites. These come in the form of external style sheets that have been created with some popular styles to give you a jump-start in designing your pages. You can use these styles as-is or modify them to suit your needs.
To create a new external style sheet using one of the sample style sheets provided by Adobe, follow these steps:
Choose File
The New Document dialog box opens, as shown in Figure 5-30.
Choose Page from Sample.
In the Sample Folder list, select CSS Style Sheet to display the list of CSS style collections
Select any of the sample styles listed under Sample Page.
A preview of styles is displayed in the far right of the New Document dialog box, as shown in Figure 5-30.
Select a style you like and click Create.
A new, untitled style sheet opens in code view.
Choose File
To use the styles in a document, attach the new style sheet to an open file by following the instructions in the section "Attaching an external style sheet to a Web page," earlier in this chapter.
When you do save a CSS file created from a sample style collection, Dreamweaver leaves the original style collection unchanged.