| Dreamweaver MX makes it easy to design a Web page using CSS styles. The primary way to access CSS design features is through the CSS Styles panel. You can toggle this panel off and on with Shift+F11. Creating a CSS-based design may require you to think differently about how you assemble a Web page. To start designing, create an HTML page, but don't assign it any specific HTML styles such as colors or alignment you'll set those with CSS styles. Use HTML tags such as <h1> or <strong>, which give meaning to the text they surround, but avoid those which grant only appearance changes such as <font>. After you've got your content in your HTML page, you can start adding CSS styles. The creation process has four steps: -
Create a style sheet file. -
Define the styles you want to use. -
Apply the styles to the HTML page. -
Test the styles in a variety of Web browsers. Dreamweaver MX makes it easy to step through this process, automating your choices and doing the work of writing the CSS language for you. Create a Style Sheet To create a new style sheet in Dreamweaver MX, start by defining a style. Go to the CSS Styles panel in the Design window, and click the Add Style button it looks like a plus (+) symbol next to a document. This opens the dialog window shown in Figure 10.2. Figure 10.2. Creating a new style sheet in Dreamweaver MX.
You have three options for the type of style to create: a custom style, a redefined HTML tag, or a CSS selector. Custom styles, despite the name, are easiest to use; redefined HTML tags and CSS selectors are covered later in this chapter. By default, Dreamweaver MX names the first custom style .unnamed1, as you can see in Figure 10.2. All custom styles have a single-word name, which identifies that style. Custom styles begin with a period, and if you don't add it in, Dreamweaver MX will remind you. In your HTML markup, the class attribute will be set to this style name to identify it, minus the leading period. A custom style can also be thought of as a class style, or a CSS style with a class selector. TIP You can name a class style anything you like; it's basically just an arbitrary word used to group these items. A descriptive name is good, especially one that describes the function instead of presentation details. For example, makes more sense than . Why? Well, you may want to change your styles later, and what if the details are no longer in blue? You should also avoid using style names that are the same as HTML tags or attributes, simply to avoid confusion.
In the sample style sheet in Listing 10.1, I created a class called .person by entering that class name in the New CSS Style dialog box. The other option when creating a new style is to choose the file in which the style is defined. There are initially two options: defining the style in a new style sheet or defining it within the HTML document. The option This Document Only creates an embedded style sheet, which is covered later in this chapter. To make a new style sheet, select New Style Sheet and click the OK button. You will be prompted for a style sheet filename and location. Your CSS file should be named .css because that's the commonly used extension for style sheets. Technically it doesn't need to follow this naming convention, but there's no good reason to go against the grain here. Define Your Styles After you've given a filename to your style sheet, you'll be presented with a window to set the options on your style. As shown in Figure 10.3, there are eight sets of options, and by default, you start on the Type option. You can set any number of text options at this point; in the example, I've chosen to make the text bold and change the color to teal. Figure 10.3. Setting the text options to create bold, teal text.
After you've set the options you desire, click the Apply button. Later in this chapter, I'll cover each option and explain what effect it has on your styles. When that's done, you've created your first style! You can create more styles by selecting New CSS Style again; you won't need to create a new style sheet, because you can store them all in the same style sheet file. Apply Your Styles Dreamweaver MX gives you a number of ways to apply CSS styles to your Web page. The simplest is to use the CSS Styles window. Make sure the window is open by pressing Shift+F11, and check that the Apply Styles option is selected. Then, in your HTML file, choose the text that you want to receive the style. Highlight the section with the mouse, and then click the symbol to the left of the style name. This symbol looks like a short piece of chain next to a stylized S, and it's the symbol for applying a style. The text you selected will change to your new style. You can remove the style by highlighting text and clicking the button next to No CSS Style; this symbol is a red line through the stylized S. TIP To apply a style to an entire paragraph, click anywhere within the paragraph, and then click the Apply Style button. This will apply the style to the whole paragraph at once.
Figure 10.4. Highlight text and then apply a style using the CSS Design panel.
You can also use the Properties window to apply a CSS style. The Properties window operates in two modes HTML properties and CSS properties. To switch to CSS style, you'll need to click the toggle button, which looks like the letter A. You'll then be able to select a style from the pull-down menu, as shown in Figure 10.5. Figure 10.5. Styles can be applied using the Properties window, after toggling to CSS mode.
Three other ways exist to set the style of HTML text. You can select a style from the CSS Styles option on the Text menu; you can highlight the text and right-click (or Ctrl+click) and apply it via the context menu; or you can edit the HTML directly in code view and add an appropriate class attribute. Test Your Designs After you've applied your styles, you'll want to test how they look in a browser. Dreamweaver MX's design view will show you the effects of some styles, but not all of them; to get a real test of your new styles, you need to test in several browsers. Remember that not all browsers treat CSS the same way, so you will need to test in a variety to make sure your designs look decent and can be used reliably. Use the Preview in Browser option from the File menu or the equivalent toolbar button, which looks like a globe to display your HTML page and style sheet in a browser. The screenshot in Figure 10.6 shows how the browser interprets the CSS file and applies it to the Web page. Figure 10.6. Our styles have been successfully applied to the HTML file, as shown by Netscape 6.
If your styles work on the first try, congratulations! In most cases, you may need to do some editing and changing based on the results of testing in a variety of browsers. Don't worry, that's common; it's an unfortunate fact of life for CSS designers that browser testing is an essential chore. | 
