| In Chapter 3, "Building a Web Page," we discussed the fact that Dreamweaver incorporates two modes of development within its framework. Earlier, I mentioned that Dreamweaver allows you to work in a traditional HTML formatting environment that also incorporates CSS instead of HTML whenever an element from the Properties Inspector is selected for formatting purposes. Out of the box, Dreamweaver attempts to wean developers away from traditional methods of development to a more innovative one in CSS by enabling the Use CSS Instead of HTML Tags option in the Preferences dialog. If you remember, we manually went into the Preferences dialog and disabled the Use CSS Instead of HTML Tags option so that we could discuss the traditional methods up front before moving into CSS. From now on, however, all formatting will be done using CSS. With that said, now would be a good time to revert the Use CSS Instead of HTML Tags option in the Preferences window back to its original state. To do this, choose Edit, Preferences and choose the General category. Enable the Use CSS Instead of HTML Tags check box and click OK to close the Preferences dialog and commit the changes. You won't notice any changes up front, but be aware that significant changes in the way Dreamweaver formats documents and ultimately writes its code under the hood have been made. To prove this point, we'll use the Properties Inspector to format some text just as we've done thus far in the book. To follow along, review these steps: 1. | Create a new blank HTML document by selecting New from the File menu. Choose HTML from the Basic Page category and click Create. A new blank page appears.
| 2. | Add the text Welcome to Dorknozzle to the page and highlight it.
| 3. | From the Properties Inspector, change the Font to Arial, Helvetica, Sans-serif.
Obviously, the text changes to Arial right? But this time, notice that the Style menu now includes a new style called style1. When you work in the CSS formatting mode, Dreamweaver creates new classes in a document-wide style sheet for everything. If a style class doesn't already exist for an element you're attempting to modify, a new class with the syntax style<number> is created for you.
| 4. | To see the document-wide style sheet, complete with the class instantiation and the class reference, switch to Code view. As you can see in Figure 7.4, Dreamweaver adds the same code you saw in the sample shown back in Figure 7.1.
Figure 7.4. Dreamweaver automatically adds the document-wide style sheet, the class instantiation, and the class reference for you. 
|
Of course, the benefit to using Dreamweaver is that we don't have to know how to code HTML or CSS. Instead, we can interact with the windows, panels, and inspectors to run us through the functionality we otherwise would have had to add manually to the code. CSS is no different. To interact with CSS in Dreamweaver, we open the CSS Styles panel (available by choosing the CSS Styles option from the Window menu). The CSS Styles panel appears similar to Figure 7.5 with the All button selected. Figure 7.5. The CSS Styles panel allows you to interact with styles in Dreamweaver. 
Notice that the CSS Styles panel has two buttons that represent two distinct CSS Styles panel views. We'll discuss the Current view later in this section; for now, notice that the CSS Styles panel exposes the following functionality while in the All view: Panel Options menu: Options from this menu include some of the more popular and widely used CSS operations. For instance, you can create a new style sheet, edit an existing style sheet, delete a style sheet, export a style sheet, and more from this menu. All/Current views: Use these buttons to switch between the All and Current views. In the All view, the CSS Styles panel displays all document-wide and external style sheets as well as the rules set out for the entire defined site. In the Current view, the CSS Styles panel displays detailed style information for a selected element. All Rules: After styles have been created, they are listed here. External style sheets appear with the name of the external style sheet file (for example, styles.css). Document-wide style sheets, as you can see in Figure 7.5, appear as <style>. You can expand the style sheet to see all classes, pseudo-classes, IDs, and tag redefinitions in the style sheet. Properties: Use this menu to display a complete or filtered list of properties for a specific style rule. Depending on the view you choose from the Show Category View or Show List View button (described next), this list is customized to display either a category or list view of all available properties for a style rule or is filtered to display only properties that have been set for a selected rule. Show Category View: Click this button to display a categorically sorted view of available properties for a selected style rule. When you select this button, the Properties list changes (see Figure 7.6). Figure 7.6. Use the Show Category View button to display a categorically sorted view of available properties for a style rule. 
Show List View: Click this button to display a complete list view of available properties for a selected style rule. When you select this button, the Properties list changes (see Figure 7.7). Figure 7.7. Use the Show List View button to display a complete list view of available properties for a style rule. 
Show Only Set Properties: Click this button to display only properties that have already been set for a style rule. You can still add properties from this view by clicking the Add Property link. Selecting this link displays a list of available properties for the style rule (see Figure 7.8). Figure 7.8. Use the Show Only Set Properties view to display only those properties that have already been set for a style rule. 
Attach Style Sheet: Selecting this option opens the Attach External Style Sheet dialog. From this dialog, you can browse to and include existing external style sheet files in your document. This option is covered with more detail later in the chapter. New CSS Style: Selecting this option opens the New CSS Rule dialog. In this dialog, you initiate the process of creating a new style sheet complete with classes, pseudo-classes, IDs, and tag redefinitions for your documents. Edit Style: Select this option to edit a style sheet or properties for a class, pseudo-class, ID, or tag redefinition within a style sheet. The appropriate dialog opens depending on what you select from the style list. Selecting the style sheet (represented by either <stylesheetname>.css or <style>) from the style list opens the Style Sheet Editor dialog; selecting a style from the style sheet opens the CSS Rule Definition dialog. Delete CSS Rule: Click this icon to quickly remove an existing style sheet or a style from the style sheet.
Now that you have an idea about how the All view for the CSS Styles panel functions, switch to the Current view by first selecting an element within the Document window that contains a style rule and then clicking the Current button. As you can see from Figure 7.9, the panel changes, exposing options for the Current view. Figure 7.9. Use the Current view to display a list of styles applied to a current selection. 
As you can see from the callouts in Figure 7.9, the following features are exposed within the Current view: Summary for Selection: This menu displays a list of style properties attached to the current selection. As you'll see later in the chapter, you can double-click a specific property to open the CSS Rule Definition dialog to make edits to the current selection. About: Clicking this button changes the pane to display information that coincides with the selected style rule. Rules: Click this button to display the cascade of rules for the particular selection. Rolling over the selection, as shown in Figure 7.10, displays the specificity of the rule as well as where the rule is defined in the page. Figure 7.10. Click the Rules button to display the cascade of rules for a particular selection. 
It's important to note that Dreamweaver 8 includes a new Show CSS button located just to the right of the Style menu in the Properties Inspector. Clicking this button launches the CSS Styles panel in the Current view. Now that you have an idea as to the basic premise behind CSS and the Dreamweaver panel that supports it, let's begin working with CSS in the context of our Dorknozzle project. Of course, you can download these and other project files from www.dreamweaverunleashed.com. You'll want to save the files for Chapter 7 in an easy-to-find location. I'll place mine in C:\Dorknozzle\Chapter07. For this chapter, two files (index.htm and companydirectory.htm) exist with slightly modified table and navigation structures to coincide with the examples. Creating a Style Class in an External Style Sheet As mentioned earlier in the chapter, creating classes in an external style sheet file is the ideal way to work, especially if you're dealing with a site that consists of numerous pages. This makes overall maintenance of the site simpler and much more flexible. Because you've already seen how Dreamweaver handles classes in document-wide style sheets, let's divert our attention to creating and working with classes in external style sheet files. You can create a new external style sheet file by following these steps: 1. | Close the testing page you've been working with and open the index.htm file, included with the files you downloaded for this chapter. As you'll see, the page contains little to no formatting. Remember, we're going to use CSS from here on out to handle the formatting of the page.
| 2. | With the CSS Styles panel open, click the New CSS Rule icon located second from the left in the icon group in the bottom right of the CSS Styles panel. The New CSS Rule dialog appears as shown in Figure 7.11.
Figure 7.11. The New CSS Rule dialog allows you to create new styles and style sheets. 
NOTE Alternatively, you can open the New CSS Rule dialog by right-clicking in the CSS Styles panel to access the context menu and choosing New. Furthermore, you can access the New option from the CSS Styles submenu in both the context and Modify menus. Finally, you can choose the New option from the panel's Option menu located on the right end of the blue title bar for the panel group. | 3. | The New CSS Rule dialog exposes the following functionality:
- Selector Type: Allows you to pick the type of style to create in either a new external style sheet file or a document-wide style sheet. Options include Class, Tag Redefinition, and Advanced. Choosing the Tag option causes the Name menu (mentioned below) to change to a Tag menu, from which you can pick modifiable HTML tags. Choosing the Advanced option causes the Name menu to change to a Selector menu, from which you can pick one of four contextual selectors including link, visited, hover, and active. For our examples, make sure that the Class option is selected.
- Name: Depending on the option you select from the Selector Type radio button group, this menu changes to read Name, Tag, or Selector. With Class selected in the Selector Type radio button group, enter the class name .link here. Remember that the period (.) reserves this style as a class.
- Define in: The first option in this menu, New Style Sheet File, opens the Save Style Sheet File As dialog, effectively allowing you to create a new external style sheet file based on the name you specify. The second option, This Document Only, creates a new document-wide style sheet within the <head> tag of the existing page. For our example, make sure that the New Style Sheet File option is selected.
| 4. | Click OK. When the Save Style Sheet File As dialog appears, navigate to the root of your project (it should already be within the root if you defined your site correctly), and enter the name styles in the File Name text box.
| 5. | Click Save. The CSS Rule Definition dialog appears, similar to Figure 7.12.
Figure 7.12. The CSS Rule Definition dialog allows you to define properties for your new class. 
|
Now that you have a new style sheet file created (styles.css) and you've effectively created a class (.link) within that style sheet file, it's time to start assigning properties for the class. The CSS Rule Definition dialog allows us to set properties for the following categories: Type Background Block Box Border List Positioning Extensions
NOTE It's important to understand that the CSS Rule Definition dialog is only one method for modifying properties within a style rule. As you saw earlier in the chapter, the CSS Styles panel exposes a category and list view as well as an Add Property link in the Properties list that allows you to quickly define properties for a rule directly from the CSS Styles panel without having to open the CSS Rule Definition dialog.
Let's discuss each category before we make any adjustments to our class. Type Options The Type category, shown in Figure 7.12, provides you with the ability to format text-level elements including their type face, size, decoration, weight, color, and more. Here is a detailed list of properties exposed by the Type category: Font: Use this menu to select from one of six available font families including Arial, Times New Roman, Courier New, Georgia, Verdana, and Geneva. If you're working in an intranet environment, you might decide to create your own font group by choosing the Edit Font List option. Choose the Arial, Helvetica, sans-serif font family for our class. Size: Allows you to select from a list of preset values. You can also enter any number you choose and then select a measurement type from the menu to the right. Options include pixels, points, inches, centimeters, millimeters, picas, and European metric system. For our example, enter 14 and choose the option pixels from the measurements menu. Weight: This menu includes numerous options for controlling the weight of text on the page. Options include various bold properties as well as numeric weight values from 100900. Style: Choose one of the options in this menu to control the style of text on your page. Options include Normal, Italic, and Oblique. Variant: Choose from one of two options in this menu to set the variant on text to either Normal or Small Caps. This value is supported only in Internet Explorer. Line height: Traditionally referred to as leading, enter a value here to set the height of the line on which the text is placed. Case: Choose an option from this menu to capitalize the first letter of each word in the selection or to change all selected text to uppercase or lowercase. Decoration: Choose options from this check box group to underline text, overline text, line-through text, or cause text to blink. The blink property is supported only by older Netscape browsers. The default option for text is none while the default option for links is underline. Color: Use the color picker to choose from a palette of 216 web-safe colors including colors from your operating system's color palette. For our example, select the color picker chip and sample the blue color from the Dorknozzle website's header. The color should show as the hexadecimal value of #003366.
When you've completely formatted the Type category, you're ready to move on to the Background category. Background Options The Background category of the CSS Rule Definition dialog, shown in Figure 7.13, provides you with the ability to customize backgrounds for elements and text. Modifying these values gives you control over the color, image, whether or not you want to repeat an image, and more. Figure 7.13. Use the Background category to set a background color or image for elements and text on your page. 
Here is a detailed list of properties exposed by the Background category: Background color: Use the color picker to choose from a palette of 216 web-safe colors including colors from your operating system's color palette. This option effectively sets the background color of the element. Background image: Use the Browse button to locate an image within your site to use as the background image for the element. Repeat: Select an option from this menu to set the tiling of the background image on the element. Options include no-repeat, repeat, repeat-x, repeat-y. The default value is repeat. The no-repeat option places the image as the background to the element but prevents it from repeating horizontally and vertically. The repeat-x option repeats only horizontally, and the repeat-y option causes the image to repeat only vertically. Attachment: Use the attachment option to force a background image to its fixed position or to allow it to scroll along with the content. The scroll option is supported by Internet Explorer but not by Netscape. Horizontal and Vertical position: Use options from these menus to specify the initial position of the background image in relation to the element it's attached to. These options can be used to align a background image to the center of the page, both vertically and horizontally. If the Attachment property is Fixed, the position is relative to the Document window, not to the element. This property is supported by Internet Explorer but not by Netscape.
Block Options The Block category of the CSS Rule Definition dialog, shown in Figure 7.14, provides you with the ability to define spacing and alignment settings for elements on your web pages. Figure 7.14. Use the Block category to modify spacing between paragraphs, lines of text, and more. 
Here's a list of properties exposed by the Block category: Word spacing: Enter a value in this text box to set the spacing between words. After you've entered a value, you can choose one of the measurement options from the menu just to the right. Negative numbers are also allowed but the appearance depends on the browser. Letter spacing: Enter a value in this text box to increase (represented by a positive value) or decrease (represented by a negative value) space between letters or characters. Vertical alignment: Select an option from this menu to specify the vertical alignment of the element to which the class is applied. Dreamweaver displays this attribute in the Document window only when it is applied to an image. Text align: Sets the alignment of text on the page to left, right, center, or justify. Text indent: Enter a value in this text box to have the first line of text in your paragraph indent. You can also enter a negative number to outdent, but the appearance depends on the browser. Whitespace: Select an option from this menu to specify how white space within the selected element is handled. Options in this menu include Normal, Pre, and Nowrap. Choose Normal to collapse whitespace. Choose Pre to retain all whitespace, including spaces, tabs, and returns. Choose Nowrap to specify that text wraps only when a line break (<br>) is encountered. Display: Choose an option from this menu to specify whether an element is displayed and, if so, how it is displayed. There are too many options in this list to explain them all here. For more information, refer to one of the CSS resources presented in Appendix C, "General Resources."
Box Options The Box category of the CSS Rule Definition dialog, shown in Figure 7.15, provides you with the ability to change and customize attributes in tables and the page itself. If you need to modify the width, height, padding, and spacing for a table, row, or cell, you would modify elements in this category. Furthermore, you can set the margins for the page by using the margin properties in this category. Figure 7.15. Use the Box category to modify width, height, padding, and spacing for tables, rows, and cells. 
Here is a list of properties exposed by the Box category: Width and Height: Enter a value and then select a measurement to set the width and height of the element. Float: Choose an option from this menu to set which side elements (such as text, layers, tables, and so on) will float around an element. Clear: Choose an option from this menu in cases when you are inserting images and want to place a description next to the image, but still have to add more text under the image. Padding: Use this group of options to specify the amount of space that should be added in between an element and the element's border. Unlike HTML that forces you to enter one value for all sides, you can enter separate values followed by the measurement independently of other sides. If you'd like to use the same value for all sides of the element, enable the Same For All check box. For our example, we'll disable the Same For All option and enter a value of 5 pixels in the Left text box. Margin: Use this group of options to specify the amount of space that should be added between elements such as cells within a table or the margins for the entire page. Unlike HTML that forces you to enter one value for all sides, you can enter separate values followed by the measurement independently of other sides. If you'd like to use the same value for all sides of the element, enable the Same For All check box.
Border Options The Border category of the CSS Rule Definition dialog, shown in Figure 7.16, provides you with the ability to make changes to borders. This feature works only on items that accept borders for attributes such as textboxes, tables, and layers. Figure 7.16. Use the Border category to make border adjustments to elements that support borders such as tables, text boxes, and layers. 
Here is a list of properties exposed by the Border category: Style: Use this group of options to specify the style of the border. Options include Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, and Outset. Width: Select or enter a value in this text box to set the width of the border. Selectable options include thin, medium, and thick. Of course, you can also enter your own numeric value followed by the measurement type. Color: Use the color picker to select from a palette of 216 web-safe colors. Unlike HTML where border colors are limited depending on the element used, border colors for all elements that support borders can be set independently of one another.
As with the options in the Box category, all options in the Border category support the Same for All check box. By disabling this check box, you can enter separate values followed by the measurement independently of other sides. If you'd like to use the same value for all sides of the element, enable the Same for All check box. List Options The List category of the CSS Rule Defintion dialog, shown in Figure 7.17, provides you with the ability to customize the way lists are created in Dreamweaver. You can customize options for bullets and numbers and even provide your own custom image to use as bullets. Figure 7.17. Use the List category to customize how ordered and unordered lists are created in Dreamweaver. 
Here is a list of properties exposed by the List category: Type: Choose from one of the eight options in this list to identify the type of list that should be applied to the selected element. Options include Disc, Circle, Square, Decimal, Lower-roman, Upper-roman, Lower-alpha, and Upper-alpha. Bullet image: Use the Browse to button to select a custom image to use in place of bullets. Position: Select an option from this menu to set whether list item text wraps and indents (Outside) or whether the text wraps to the left margin (Inside).
Positioning Options The Positioning category of the CSS Rule Definition dialog, shown in Figure 7.18, provides options that allow you to position <div> and <span> tags freely on the web page. Otherwise known as layers in Dreamweaver, the positioning properties allow for pinpoint accurate movement and placement of various elements in your web pages. Figure 7.18. Use the Positioning category to set placement properties for <div> and <span> tags. 
Here is a list of properties exposed by the Positioning category: Type: Choose one of the three options in this menu to set the type of positioning the layer should have in the browser. Options include Absolute, Relative, and Static. Setting the type to Absolute guarantees that the layer's positioning is governed by the top-left corner of the page. Choose Relative when you want to position an element relative to another element's flow in the document. Choose Static when you want to place the layer in a fixed position in the text flow. Width and Height: Sets the width and height of the layer based on a value you enter and a measurement you select. Visibility: Choose an option from this menu to set the display condition of the layer on the page. Options include Inherit, Visible, and Hidden. Inherit guarantees that a nested layer will inherit the visibility properties of its parent layer. If it has no parent layer, the Visibility option defaults to Visible. Choose the Visible option when you want to show the layer regardless of the parent's value. Choose the Hidden option when you want to hide the layer regardless of the parent's value. We'll discuss visibility with more detail in Chapter 11, "Layers in Dreamweaver." Z-Index: One interesting aspect of layers is that they can be stacked and overlapped. Use the Z-index property to set the stacking order of layers. Higher Z-indexed layers appear above lower Z-indexed layers. We'll discuss layer stacking with more detail in Chapter 11. Overflow: Choose an option from this menu to set how content in the layer should be treated if it exceeds the width or height of the layer. Options include Visible, Hidden, Scroll, and Auto. Choose Visible when you want the layer to automatically resize if the content exceeds the width and/or height of the layer. Choose Hidden when you want the content of the layer to appear hidden if it exceeds the width or height of the layer. Alternatively, you can choose Scroll to automatically have scrollbars appear to the right and bottom of the layer, allowing you to scroll the content in the layer. The Scroll option displays scrollbars even if the content doesn't exceed the width or height. Finally, choose Auto when you want to display scrollbars in the layer only when the content exceeds the width or height of the layer. We'll discuss overflow with more detail in Chapter 11. Placement: Enter values in these text boxes to set the physical location of the layer on the page. Although the default measurement is represented by pixels, you can also choose to use picas, points, inches, millimeters, centimeters, percentages, or the European metric system by selecting the appropriate option from the measurement menu. We'll discuss placement with more detail in Chapter 11. Clip: Enter values in this series of text boxes to define the part of the layer that is visible. You can use these properties in conjunction with JavaScript to create visual effects such as transitions.
Extensions The Extensions category of the CSS Rule Definition dialog, shown in Figure 7.19, provides you with advanced CSS functionality. Modifying extensions allows you to make changes to the way page breaks are handled, to customize cursors, and to create opacities, glows, and more. Figure 7.19. Use the Extensions category to work with advanced CSS features such as customized cursors. 
Here is a list of properties exposed by the Extensions category: Page break: Choose options from these menus to force a page break during printing either before or after the element controlled by the style. This property is only supported by Internet Explorer browser versions 5.5 and above. Visual effect: Cursor: Choose an option from this menu to change the pointer image when the pointer is over the element controlled by the style. There are 14 different cursor options to choose from. Visual effect: Filter: Select an option from this menu to apply special effects to the element controlled by the style. Most of the options in this list are supported only by Internet Explorer 4 and above.
Apply Style Classes to Elements on Your Page Now that you have a good idea as to the various properties that can be accessed and modified using the CSS Rule Definition dialog, it's time to apply what we've selected. To review, we modified basic type properties and added a slight 5-pixel padding to the left side of the element. To apply the style class we've created, we must first click OK to close the CSS Rule Definition dialog and return back to our workspace. After you click OK, the new class appears in the CSS Styles panel, as shown in Figure 7.20. Figure 7.20. The new style class appears in the CSS Styles panel. 
Looking at the CSS Styles panel, notice a few interesting points. First, the style is defined as a class. You can see this in the CSS Styles panel by the period (.) in front of the name; this period defines this style as a class. Second, you can see the properties of the class listed below the All Rules list, in the Properties for ".link" list. Finally, you can see that the style class is actually a part of an external style sheet defined by styles.css. Hierarchically, the class appears under, or within, the external style sheet file. If we were using a document-wide style sheet, the class would appear under the heading <style>. NOTE The CSS Styles panel allows you to work with external style sheets and document-wide styles on the same page. An external style sheet is defined by styles.css in the CSS Styles panel, and a document-wide style is defined with the <style> tag. All classes, tag redefinitions, and so on are hierarchically listed under their respective style sheet.
Because we've created a class named .link, this should tip you off to the fact that we've just created a style to handle the left-side navigational links on the index.htm page. To apply the new style to the link, highlight the individual link (the text Home) and choose the link option from the Style menu in the Properties Inspector, shown in Figure 7.21. Figure 7.21. Select the link option from the Style menu to apply the style to an element on the page. 
After you select the style from the list, notice that the link for Home changes based on the properties we defined in the CSS Rule Definition dialog. Now select each of the other links and apply the same link style class. It's important that you highlight and apply the style class to each link individually. If you highlight the cells as a group and apply the style once, the class is applied to the <td> tag instead of each individual <a> (link) tag. Applying the style to the individual links guarantees that pseudo-classes such as hover, discussed later in this chapter, will work properly. To ensure that the class is being applied properly, select the link in the navigation bar and look at the Tag Selector. If the last tag in the list reads <a.link>, the class was applied properly. To guarantee that the class is applied correctly, you can also apply a class directly to a tag using the Tag Selector. For instance, I'll highlight the Admin link, right-click the <a> tag in the Tag Selector, and choose the link option from the Set Class submenu as shown in Figure 7.22. Figure 7.22. Apply the class directly from the Tag Selector. 
You can remove a style class by choosing the None option from the Set Class submenu that appears when you right-click the tag in the Tag Selector. Alternatively, you can choose the None option from the Style menu in the Properties Inspector. Now that you have an idea as to how classes and style sheets are created, and you know how to apply classes to elements in your web pages, let's divert our attention to working with tag redefinitions. In the next section, we'll redefine the default properties for the <body> tag to set the margins and the default text face and size for the page. Designing Styles by Redefining HTML Tags Aside from creating classes within your style sheets, you can also redefine HTML tags. Redefining an HTML tag is the process of changing the properties of a tag (as they're defined by the browser) using CSS. For example, the <body> tag, in which all elements in a typical web page are nested, is defined by the browser as having left and top margins of 5 pixels and the font as having the Times New Roman type face with a size of 3 and a color of black. By redefining this tag using CSS, we can change these properties to anything we want. And because we're redefining a tag, there are no classes or IDs to define and no elements to define them to. Even better, every time we create a new page in our site, that new page will inherit the properties set for the <body> tag (as long as the link between the page and external style sheet file exists). As an example, let's redefine the <body> tag: 1. | Create a new style in your external styles.css file by clicking the New CSS Rule icon (located second from the left in the icon group in the bottom right of the CSS Styles panel). The New CSS Rule dialog appears.
| 2. | Choose the Tag radio button from the Selector Type group. The Name menu becomes a Tag menu.
| 3. | Select the Body option from the Tag menu.
| 4. | Make sure that styles.css is selected from the Define In menu (see Figure 7.23).
Figure 7.23. Choose the Tag Selector Type and then choose the Body option from the Tag menu. 
| 5. | Click OK. The CSS Rule Definition for Body in styles.css dialog appears.
| 6. | In the Type category, choose the Arial, Helvetica, Sans-serif option from the Font menu and enter the value 12 pixels in the Size text box.
| 7. | Switch to the Box category and enter 0 in the Top text box for Margin, making sure that the Same for All check box is selected.
| 8. | You're done. Click OK to close the CSS Rule Definition dialog and return to your workspace.
|
Notice that the margins of the page instantly disappear, and that all the text on the page changes from Times New Roman to Arial in a size of 12 pixels. It's important to note that tag redefinitions aren't applied like classes are, meaning that there isn't anything to select from the Style menu in the Properties Inspector. Instead, tag redefinitions are attached to the tag in a sense and are therefore added by simply choosing the specific formatting option from either the Properties Inspector or the context and Modify menus. In our case, our page (as all pages do) already contains a <body> tag, so the properties of the tag redefinitions are instantly applied. Working with Pseudo-Classes Other rules, such as pseudo-classes, exist for creating CSS styles within Dreamweaver's framework and are represented by the final radio button in the Selector Type radio group in the New CSS Rule dialog. You can use pseudo-classes to define styles for certain tag states. The difference between normal classes and pseudo-classes is that pseudo-classes must be associated with an already defined class and are "attached" to the existing class by a colon. For instance, we've already defined a class named .link. We can use the hover pseudo-class to assign styling to all elements that use our .link class as follows: .link:hover
This code allows us to define a new color for elements that use the .link class when the cursor rolls over them. It's important to note that pseudo-classes already have predefined names as opposed to classes, which you name yourself. The most common pseudo-classes are those that specify styling for hyperlinks. These include: a:link controls the styling given to all unvisited links. a:visited controls the styling given to all links that have already been clicked. a:hover controls the styling given to all links when the cursor rolls over them. a:active controls the styling given to all currently selected links.
For the most part, pseudo-classes (as they are supported in Dreamweaver) are associated with the <a> tag (although this is not always the case when working with pseudo-classes by hand). For this reason, pseudo-classes are listed with the <a> tag, followed by a colon, and then the pseudo-class type. However, as you saw in the preceding example, pseudo-classes can also be associated with existing classes. In our project, we'll want to associate the hover pseudo-class to the .link class. To do this in Dreamweaver, follow these steps: 1. | Create a new style in your external styles.css file by clicking the New CSS Rule icon (located second from the left in the icon group on the bottom right of the CSS Styles panel). The New CSS Rule dialog appears.
| 2. | Enable the Advanced radio button in the Selector Type group. The Tag menu becomes a Selector menu.
| 3. | From the Selector menu, choose the a:hover pseudo-class.
| 4. | Replace the a with .link. Your dialog will resemble Figure 7.24.
Figure 7.24. Use the hover pseudo-class to redefine the rollover state of our navigation bar. 
| 5. | Click OK. The CSS Rule Definition dialog for .link:hover in styles.css appears.
| 6. | This time, change only the Color. I'll use the eyedropper tool that appears to sample the green color from the background image in the Header table.
| 7. | Click OK. The new pseudo-class appears in the CSS Styles panel.
|
Again, like tag redefinitions, you don't select and apply pseudo-classes as you would a normal class. Instead, pseudo-classes are associated with existing classes or tag redefinitions. In our case, our pseudo-class is associated with the existing .link class. What this means is that all links will take on the properties defined under the .link class; as soon as the user's cursor rolls over the links, they will take on any properties that override those defined in the normal classin this case, the color defined by the pseudo-class hover. Save your work and preview the page in the browser. As Figure 7.25 shows, the link color changes when the cursor rolls over it. Figure 7.25. The link changes color when the cursor rolls over it. 
Of course, we've merely scratched the surface. We could also define properties for the other pseudo-classes such as link, visited, and active. Experiment with the other pseudo-classes at your leisure to see how they work. Working with IDs Unlike classes, pseudo-classes, and tag redefinitions, IDs are slightly more difficult to integrate into the context of Dreamweaver's design environment because they are not directly supported. Although you can still work with IDs using the CSS Styles panel, you won't be able to select them as an option from the Style menu in the Properties Inspector. Instead, you must add them using the code hints menu in Code view or by using the Tag Selector. To demonstrate how to work with IDs, let's create a new ID for the header in our company events table: 1. | Create a new style in your external styles.css file by clicking the New CSS Rule icon (located second from the left in the icon group in the bottom right of the CSS Styles panel). The New CSS Rule dialog appears.
| 2. | As you did with pseudo-classes, enable the Advanced radio button in the Selector Type group. The Tag menu becomes a Selector menu.
| 3. | Enter the text #tableheader. Note that the # symbol represents an ID.
| 4. | Click OK. The CSS Rule Definition for #tableheader in styles.css dialog appears.
| 5. | Choose Bold from the Weight menu and click OK. The new ID appears in the CSS Styles panel.
|
Now that the ID has been created, you can apply the style to the text in one of a few ways. First, you can switch to Split view view, place your cursor in the <td> tag that wraps the Upcoming Event text, and type the first part of the attribute docFigureTitle">Figure 7.26. The tableheader ID appears in the code hints menu. 
Press Enter so that the tableheader ID is applied to the <td> tag's ID attribute as a value. Now switch back to Design view. A second way of applying stylesor IDs in this caseis to highlight the text to which you want to apply the style (in our case, the Time & Date header). The <td> tag is highlighted in the Tag Selector. Right-click the <td> tag in the Tag Selector to open the context menu and choose the tableheader option from the Set ID menu, as shown in Figure 7.27. Figure 7.27. Use the Tag Selector to set an ID to a selected element on the page. 
The last method of applying a styleor in this case, an IDis to use the Apply option directly from the CSS Styles panel. To use this method, highlight the last header option in the company events table: Location. Right-click the #tableheader ID in the CSS Styles panel to access the context menu and choose the Apply option (see Figure 7.28). Figure 7.28. Use the Apply option from the context menu in the CSS Styles panel to apply a style directly to a selected element. 
Any method you pick produces the same results. In our examples, we could have easily used classes to accomplish the same results. Remember that IDs are particularly useful when working with client-side scripting languages such as JavaScript because they help us uniquely identify an HTML element for use with JavaScript and apply a CSS style at the same time. Attaching a Style Sheet Rest assured the time will come when you'll work on a site that contains numerous files edited using traditional HTML instead of CSS. The files might exist in a project folder that already contains an external style sheet file. In this scenario, you'll want to remove HTML formatting from all the pages and attach an existing, prewritten CSS style sheet to each page in the project folder. You attach an existing style sheet file to a web page using the Edit Style Sheet dialog. To demonstrate the process, follow these steps: 1. | Open the companydirectory.htm file from the list in the Files panel. As you can see, the page contains no formatting.
| 2. | Select the Attach Style Sheet option from the Style menu in the Properties Inspector. The Attach External Style Sheet dialog appears (see Figure 7.29).
Figure 7.29. The Attach External Style Sheet dialog allows you to browse to and select an existing style sheet to link into a web page. 
| 3. | With the Add As Link radio button selected, browse to the styles.css file located in the root of your project folder. Select nothing from the Media menu and click OK.
| 4. | The page reformats. You'll still need to add the link style to each of the links in the navigation bar. In any case, you've just successfully attached a style sheet file to an existing web page.
|
You probably noticed other options in the Attach External Style Sheet dialog. For the sake of completeness, let's discuss those options here: File/URL: As you have seen, you can use the Browse button to browse to and select the external style sheet file you want to attach to the existing web page. Add as: Link: Select this radio button to attach the style sheet using the <link> tag within the <head> tag of the page. For the most part, this is the option you'll select. Add as: Import: Click this option to attach the style sheet using the following code within the <head> tag of the web page: <style type="text/css"> <! @import url("styles.css"); > </style>
The only real advantage to using Import over Link is that older browsers don't recognize the Import keyword. Because this is the case, you can prevent CSS from being loaded in older browsers, thus freeing up valuable bandwidth. The downside to using Import is that Internet Explorer 6 tends to produce a momentary flash of unstyled page content before actually loading the stylized page. You can read more about this phenomenon by visiting the following URL: http://www.bluerobot.com/web/css/fouc.asp. CAUTION One of the topics we have not yet discussed is that of bandwidth usage as it relates to CSS files. It's important to understand that CSS files are separate files from the HTML file but are used by potentially all the HTML files in your site. What this means in terms of bandwidth and size is that if you had a 5KB HTML file and a 5KB CSS file, the total download size for both files is equivalent to 10 KB. Keep this in mind when you're designing CSS files. Try to avoid storing uneeded style rules in the file and maintain only those style rules you think you'll use often.
Media: Use options from this menu to specify the target medium for the style sheet. For more information on media-dependent style sheets, see the World Wide Web Consortium's website at www.w3.org/TR/CSS21/media.html. Preview: Click this button to preview the selected style sheet in the page. Clicking the Cancel button reverts the page back to its original state before the Preview button was clicked. Sample Style Sheets: Clicking this hyperlink opens the Sample Style Sheets dialog shown in Figure 7.30. Figure 7.30. Use the Sample Style Sheets dialog to browse through and select from a list of prebuilt style sheets. 
You can use this dialog to browse through and select from a set of prebuilt style sheets you can use in your projects. The dialog features a Save To text box that allows you to save the prebuilt style sheet into your project. The Sample Style Sheets dialog is also available by choosing New from the File menu and choosing the CSS Style Sheets category from the General tab.
|
