Defining Style Rules | Macromedia Studio MX Bible

< Day Day Up >

Defining style rules for selectors, classes, IDs, and contextual selectors begins with options chosen in the New CSS Style dialog box shown in Figure 36-3. To open it, add a new style (click the plus button on the bottom of the CSS Styles panel). Choosing a type of style and selecting either an external or embedded origin is required for every new style.

Figure 36-3: The New CSS Style dialog box and options

Type of style

Earlier in this chapter, you learned about the different kinds or types of selectors for which style rules can be defined. You use the Type options to determine the nature of the rule you are creating:

Use Make Custom Style (Class) to define classes.
Choose Redefine HTML Tag to create style rules for simple selectors.
Select Use CSS Selector when grouping simple selectors, defining ID styles, working with pseudo classes or elements, or building contextual selectors.

Style sheet origin

The second required step to creating a new style is setting the origin of the style rules. In this case, you are choosing whether the rules are saved in an external file or are written to the head of the current document.

To create an external style sheet, choose Define In: New Style Sheet File.
To embed a style rule, choose Define In: This Document Only.

On the CD-ROM

Save the Habitat Alert36 folder from the chapter36_exercise folder to your hard drive. Define a new site. Hint: If you already have another Habitat Alert site defined, then choose the Edit Site option in the Site panel of the Site Definition drop-down menu and change the path to the Local Root folder.

Habitat Alert site In this section, you build a style by creating an external style sheet to redefine the <body> tag used in the project homepage layout. To do this, follow these steps:

Open the home page (site/index.htm) and choose Modify®Page Properties. Remove any reference to a background image by selecting and deleting the path used. Delete all text, link, visited link, and active link values; then click OK.
Add a New Style by clicking the Add (+) button at the bottom of the CSS Styles panel (in the Design panel group).
In the New CSS Style dialog box, select Redefine HTML Tag and type body into the top field or choose the body tag from the menu of selectors.
Select Define In: External Style Sheet File; then click OK (Figure 36-4).

Figure 36-4: The CSS Style dialog box filled out for the new style
Dreamweaver prompts you to save the new external style sheet file to the site. Navigate into the stylesheet folder and save the file as main.css. You finish this style in the next section, so leave it open.

When you save an external style sheet, a document-relative path is created that must be maintained when the site is published. Later you see that code is placed in the head of the document that references the path to the page. This is what the code looks like:

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

Redefine HTML tag

A nice new feature in Dreamweaver is the title given to the Style Definition window when developing a style, shown in Figure 36-5. The labeled window makes it clear which style you are developing and where that rule is saved.

click to expand
Figure 36-5: Style Definition for body in main.css

When defining properties for a selector, realize that not all properties need to be set. The goal when setting up your styles should be to let inheritance and specificity play as large a role as possible while still addressing the site's needs and any browser inconsistencies that might exist for your target browsers. Since the Habitat Alert site targets Netscape 4x browsers in addition to the newer Internet Explorer 5+ and Netscape 6+ browsers, this is a demanding task that you address as you develop styles for the site.

Habitat Alert site For the project site, all pages make use of the Verdana, Arial, Helvetica, sans-serif font list. Adding this information to the body declarations doesn't hurt and ensures that any text in the pages uses one of these font families:

In the Type category (the category list is on the left side), add the Verdana, Arial, Helvetica, sans-serif font-family list. CSS is powerful, but the users must still have a font in their machine for that font to be used.
Click to the Background category. The site's pages use a white background. Select #FFFFFF (white) using the Color picker for background color.
Each page also uses a background image that tiles along the top of the document to create the gold and blue textured area with the dark stripe along the bottom. Click the Browse button for the Background Image and navigate to the shared images and backgrounds folders, to locate banner_bg.gif. This adds a document-relative path (../sharedimages/backgrounds/banner_bg.gif) in the Background Image field. Note the ../ that indicates that the image will be found outside the stylesheets folder, in the sharedimages/backgrounds folders.
If you press the Apply button at this point, you see the properties in your page because the <body> tag already exists in the document. The page turns white and the background image tiles and repeats horizontally and vertically. To prevent the vertical tiling, set the Repeat menu to use repeat-x.
Click OK; then Save. Preview the page in all the target browsers.

On the CD-ROM

Habitat Alert site To overcome this NN4x browser issue, define Background-Image (URL) in the document where the style will be used. The following steps show you how to adjust the project body style to address the problem in NN4x:

Double-click the body style listed in the Edit mode of the CSS Styles panel (click the Edit Styles radio button). When the Style Definition dialog box opens, click the Background category and remove the path in the Background Image field. Click OK to accept the change.
Now add a new style. Select Redefine HTML Tag, choose the body tag, and select Define In: This Document Only. Click OK.
Click to the Background category and Browse to locate the same background image file. Notice that the path created is different? No ../ is present. This style is measured from the current document and all browsers correctly interpret this URL.
Click OK. Notice in the CSS styles panel that there are now two styles. One is for the index page specifically and one is in the style sheet.
Save and preview the page in NN4x to be sure that the new URL works correctly. Test in the other target browsers, too, to be sure that no problems exist there, either.

As shown in Figure 36-6, the image tiles along the only x-axis, because the repeat-x value in the main.css external page still applies. It is not in conflict and therefore accumulates as one of the properties of the body style. The same is true of the white background page color.

click to expand
Figure 36-6: The page with its tiling background image and white page color

About Background-Image (URL)

When defining styles that include Background-Image, a URL is needed to locate the required image. According to the W3C specification, this URL may be either absolute or relative to where the style is defined. All CSS-capable browsers, except Netscape 4x, get this path right. Netscape 4x browsers incorrectly interpret this type of URL, looking for the image relative to where the style is used. This is a big difference, resulting in the image failing to load.

Grouping selectors

When one or more selectors share the same set of rules, it makes sense to define them by grouping the selectors. Defining styles for grouped selectors is the same as with any other style, except you must use the Use CSS Selector option in the New CSS Styles panel.

On the CD-ROM

Using Color in CSS Styles

The standard HTML specification for colors exists in the CSS standards, too. You could choose a named color, selecting from the 16 cross-platform options listed in the following table, but Dreamweaver uses its standard Color picker. This results in a Hexadecimal value — the other HTML option. The same is true in Dreamweaver's CSS interface, but you can edit any style sheet rule by hand and use a named value. Other options include RGB (Red, Green, Blue) specified in percentage values, but again, Dreamweaver doesn't use this in the Style Definition interface. You may, however, opt to use it by hand-editing. Refer to the W3C.org specification to better understand how RGB is implemented.

White	Navy	Olive	Purple
Yellow	Gray	Green	Lime
Silver	Maroon	Black	Aqua
Teal	Blue	Fuchsia	Red

Habitat Alert site In the following steps, you add a pair of grouped selectors to the project site's external style sheet:

In Apply Styles mode, add a new style and choose Use CSS Selectors in the New CSS Styles dialog box. Be sure that the main.css style sheet file is selected in the Define In: menu.
Type in p, td. When text appears in paragraphs or table cells, you want it to use the same size and color text. Click OK.
Choose #333333 (dark gray) in the color picker; then type 11 into the Size field. Click OK.

Dreamweaver defaults the Size unit menu to select pixels as a unit of measurement for the font size. Many other options are available, however.

About length units

Many CSS properties, such as font size, margins, padding, and other box properties, depend on lengths. Length measurements can be expressed as positive or negative values followed by a length unit, such as pixels, points, and so on. Some properties, such as font size, accept only positive values. You can choose from two types of length units: absolute and relative. When you select a value (or type a value) in the field, you are opting to set lengths.

Absolute length units

Absolute units are probably the easiest units to understand as you use these units on a daily basis. There are five different absolute length units:

Inches (in) — An American standard unit of measurement.
Centimeters (cm) — There are 2.54 cm in an inch. One centimeter equals 0.394 inches.
Millimeters (mm) — There are 10 mm to every cm. One millimeter equals 0.0394 inches.
Points (pt) — This familiar unit is used by most word-processing applications. By definition, there are 72 points to an inch, but Windows-based machines and even some Macintosh browsers render points using a 96-dpi value.
Picas (pc) — A basic typographical unit of measure, one pica is equal to 12 points, and there are 6 picas per inch.

Absolute lengths are the least attractive option in CSS, because they have no relationship to real values but instead are totally dependent upon the settings of the monitor or printer that displays or prints the page. It is not likely that you could hold a ruler up to your monitor and find that text set to use a 12-point size would be exactly one inch tall.

Relative lengths

Relative lengths are called so because their actual measurement change based on the user-agent (browser, printer, and so on) and user preferences. Additionally, some of these lengths are relative to their containers or ancestor/parent selectors. There are four relative lengths:

Pixels (px) — A pixel is a dot or small box that makes up the visual or printed display as in points per inch (ppi) or dots per inch (dpi). Pixels are useful because images are consistently displayed on computer monitors at 72dpi. Because Macintosh and PC platforms use 72dpi when describing pixel measurements, it is generally assumed that choosing pixel values for font size (and other CSS properties) solves the inconsistencies of text sizing between platforms. Although this is not entirely true, there are advantages to using pixel lengths because text sized this way maintains a better relative relationship to images used in the page.

Caution

Netscape 4x browsers sometimes display pixels smaller than normal and printers may misinterpret the pixel values relative to their printing resolutions — equating pixels to ppi, resulting in very tiny text!

Em-Height (em) — Generally used in Font measurements, the em-height is equivalent to the height of the character box for a font — typically a capital M (hence the association). In CSS, a setting of .5em depends on the default font and font size set by a browser and would be 50 percent of that value. Or, if font-family and font-size values exist for the container that holds the text styled with a .5em length, the value of .5em would be equivalent to 50 percent of whatever those measurements were. Although em-height seems complicated, it is a useful length.
X-Height (ex) — The x-height for any font describes the height of any lowercase letter without ascenders or descenders, as in x, but not g or h. Most browsers assume that 1ex is 1/2 or 50 percent of 1em, but this is not true in all cases.
Percentage (%) — Percentages are almost always computed relative to another value set for the containing element. For example, if the default size for text in a page is 12 points, a heading set to 150 percent would use 18-point text.

Larger, smaller, and XXS–XXL

Additional options for setting font size include larger, smaller, and XXS through XXL. Larger and smaller increase or decrease font size based on the containing element. XXS-XXL relates directly to sizes 1-7 in HTML font formatting, and these values depend upon the browser's default settings.

< Day Day Up >