Working Smart with CSS

[ LiB ]

CSS is wonderful not only because it's new and efficient, but because it's powerful. To make the most of Cascading Style Sheets, you have to be smart about using them.

Specifying Fonts in HTML (and CSS)

A lot of text-formatting chores got a lot better when CSS came along. Without CSS, you don't have as many text sizes to choose from, you can't indent or set margins, and so on. But the world of font choices is still the same as it always was. The CSS Style Definition dialog box, just like the non-CSS tools you used in previous Dreamweaver versions, gives you a drop-down menu of (not very exciting) font groups to choose from instead of the glamorous list of cool typefaces you desire . Why?

HTML, Fonts, and Browsers

Fonts do not embed themselves in web pages, and there's no mechanism for linking a font to a web page the way you link graphics and other media. (There are lots of technical and legal reasons for that.) This means that the end user will be able to display your beautiful web page using only the fonts that he has installed on his computer. If your page calls for a font that a particular user doesn't have installed, your text will display in his browser's default fontusually Times New Roman.

The first strategy for dealing with this problem is to specify only fonts that your visitors are likely to have on hand. Of course, all computer setups are different, but almost all Windows systems have Times New Roman, Arial, Georgia, Verdana, and Courier New. Almost all Mac systems have times, Arial, Helvetica, Georgia, Verdana, and Courier.

The second strategy is to specify more than one font, leaving the user's browser to go through the list of supplied choices for one that it recognizes as being on the system. This is often called using fallback fonts, font groups, or font lists. Because the browser stops at the first font that it recognizes, the strategy is to start with fonts that maybe not everybody has and work down toward the more common fonts, ending with a generic font category such as serif or sans serif. This system expands the possibilities greatly, even if you stick to the fonts that visitors on different systems are likely to have. Table 11.1 lists some fairly common font choices that can be useful in font lists.

Table 11.1. Reasonably Common Serif and Sans Serif Fonts on Mac and Windows, According to Category

Mac	Windows	Category
Times	Times New Roman	Serif
Georgia	Georgia	Serif
Book Antiqua	Book Antiqua	Serif
Palatino	Palatino Linotype	Serif
New York		Serif
Arial	Arial	Sans serif
Helvetica		Sans serif
Verdana	Verdana	Sans serif
Trebuchet MS	Trebuchet	Sans serif
Comic Sans MS	Comic Sans	Sans serif
	Tahoma	Sans serif

Verdana (sans serif) and Georgia (serif) are both good choices for body text on websites . A type designer named Matthew Carter, who was hired by Microsoft to create two very readable screen-based families, developed them especially for screen reading.

Font Lists in Dreamweaver

Dreamweaver offers you the following font-face combinations:

Arial, Helvetica, sans serif
Times New Roman, Times, serif
Courier New, Courier, mono
Georgia, Times New Roman, Times, serif
Verdana, Arial, Helvetica, sans serif

If none of these strikes your fancy, you can edit these or add your own lists in the Edit Font List dialog box (see Figure 11.26). You can access this window from any drop-down menu of fonts in Dreamweaver by choosing Edit Font List at the bottom of the menu. You can also choose Text > Fonts > Edit Font List.

Figure 11.26. The Edit Font List dialog box.

To create a new font list, select the Add Fonts in List Below entry in the font list area, or click the + button at the top of this area. From the two fields in the bottom half of the dialog box, the Chosen Fonts area on the left shows the fonts in your font list. The Available Fonts area on the right lists the fonts installed on your computer. The text field under-neath this area lets you specify any font not on your system. The idea is, you select or type in a font on the right, press the << arrow, and copy the font to the list on the left. To remove a font from the list, click the >> arrow.

Add as many fonts as you want to your new combination, starting from the most desirable and ending with the most generic. Always finish a font combination with a generic font family; these can be found at the very end of the Available Fonts list.

When you're finished, click OK to close the Edit Font List dialog box.

You can add fonts and can remove fonts, but you can't rearrange fonts in this dialog box. If you get your fonts in the wrong order, you'll have to remove them and add them again to get back to where you want to be.

Specifying Dimensions in CSS

When it comes to specifying the sizes of things, CSS presents you with an embarrassment of riches. Embarrassing because who the heck knows what all of those choices mean? There are many different ways to define sizes, but they generally fall into two groups: absolute and relative. Absolute sizes are unchangeable, no matter where they are used:

Points (pt) and picas (pc) come from the print world. A point is 1/72 of an inch. A pica is 12 picas, or 1/6 of an inch.
Millimeters (mm) and centimeters (cm) are standard metric lengths. A millimeter is 1/100 of a centimeter. (For the nonmetric, 2.54cm equal 1 inch.)
Inches (in) are standard lengths in the regular world, although they're rarely used in the web world. An inch equals .394 of a centimeter.
Pixels (px) are the standard way of defining sizes on computers. Most elements on the web page are defined in pixels. A pixel is one small block of monitor space, the physical building blocks of your screen. A pixel is defined as a fraction of an inch on the screen. The difficulty of using pixels is that Macs and PCs have chosen different fractions for determining size. And to confuse the issue even more, the CSS spec pegs the "reference pixel" at about 90 pixels per inch, which, sadly, neither operating system uses. But pixels remain the most-used measuring entity around.

Relative sizes are bigger or smaller than some defined length:

Percentage (%) A universal concept, a percentage value is X % bigger than a standard value. The question for development is, bigger compared to what? Percent-based sizes always use the default setting of the parent tag as the baseline size. For instance, if the default size of a font is 10 units, setting the font to 120% makes the font show at 12 units. Setting the percent value to 20% shows it at 2 units. Another example is tables. Set a table to be 80% wide, and it will show as 80% of the window because the body tag is the parent element. Set a table cell to 80%, and it will take up 80% of the table because the table tag is the parent element.
Em An em is an obscure but useful value. It is defined as equal to the point size for a given font element. If a font is set as 12 pixels, then 1 em equals 12 pixels. This way, you can set a custom class to be 2 em of a certain settingsay, the previous font. If you apply this class to a piece of text, it will be 2 em big, or 24 pixels.
Ex This is a relative setting that is based on the height of a lowercase x in the chosen font. Although this can be of great help when using a certain font, keep in mind that different fonts have different relative x sizes. One font's x can be half the size of a capital letter, and another font's x can be 6070%. This will make ex render differently between fonts.

CSS and Accessibility

There's nothing inherently inaccessible about CSS; it's just a formatting language. In fact, CSS is so handy that disabled web surfers often use their own style sheets to enhance functionality. For instance, a low-vision person might use a style sheet that specifies very large text, or a color -blind person might use a style sheet that changes all colors to black on white. The job of the web designer, in relation to these people, is to stay out of their way. How do you do this?

According to Section 508, § 1194.22(d):

Documents shall be organized so they are readable without requiring an associated style sheet.

No matter what kind of styles you have applied to your document, it should be readable and functional without them. (It doesn't have to be prettyjust functional.) Also, because user-specified style sheets are external, you don't want to override those styles with styles you've defined internallyuse external style sheets, not internal style sheets or inline styles.

Section 508 doesn't go any further than this, but the W3C's Web Accessibility Initiative guidelines add a recommendation that addresses formatting issues in general:

Use relative rather than absolute units in markup language attribute values and style sheet property values [priority 2].

In other words, set your font sizesand other sizesto percentages or other relative settings rather than points or pixels.

Dreamweaver doesn't offer any magic gadgets to help you design your CSS for accessibility because you don't need them. Just use common sense when creating styles and style sheets. You can, however, use Dreamweaver's Design Time Style Sheets feature to help preview how your pages will fare in an alternate environment. Do it this way:

Create a new CSS style sheet document (choose File > New, and choose Basic Pages/CSS as the document type). With this document open , use the CSS Styles panel to redefine the basic HTML tags for text display in large-print style (200% size, black, Georgia, for instance). Redefine the body tag to have a white background color. Or, choose whatever visibility changes one of your target users might have in a custom style sheet. Save this file with a descriptive name such as access.css .
Now open one of your HTML documents that has been formatted with a beautiful, elegant external style sheet.
In the CSS Styles panel, go to the Options menu and choose Design Time Style Sheets. When the dialog box appears (see Figure 11.27), find the Show Only at Design Time section and click the + button. Browse to select your access.css style sheet.

Figure 11.27. The Design Time style sheets interface.

Now find the Hide at Design Time section and click the + button. Browse to select the style sheet that's currently attached to this page.
When you're done, click OK to close the dialog box. Dreamweaver now displays your document with the alternate style sheet. Wow! Is it readable? Is there some local formatting in there, getting in the way of big, black, bold text (or whatever your accessibility style sheet specified)? If the page is functional like this, you've done an accessible job applying CSS.
To put things back to normal, go back to the CSS Styles panel Options menu, choose Design Time Style Sheets again, and, for both sections in the dialog box, select the style sheet listed. Then click the button.

Getting Specific with Contextual Selectors

Contextual CSS selectorsstyles that take effect only under certain conditionsdrastically expand the power of what you can do with CSS formatting. As was outlined earlier in the chapter, they're easy to create in Dreamweaver. Taking advantage of them is just a matter of getting your mind used to thinking in contextual terms.

Creating Multiple Link Styles for a Page

Imagine this scenario: Your pages all have a navigation sidebar, with CSS-formatted text links instead of images. They also have a footer with some redundant text links. And the main content area of each page may or may not include inline links in the text. Do all of these links have to look the same? No! By defining some contextual selectors, you can create different link styles for each different need. Do it this way:

For the text links in the main content area, either redefine the a tag (and its pseudoclass brethren) or leave it to display using browser defaults. Visitors are used to seeing underlined blue links in text, so don't mess with a good thing.

For the sidebar, create a custom class called .sidebar , and apply it to the table cell or div element that contains the sidebar elements. You can use the sidebar style to apply whatever formatting you likebackground color, text formatting, anything.

Why is it .sidebar a and not a .sidebar? Because the link is going to be inside the table cell or div that has the sidebar class applied to it. The a .sidebar class would control a sidebar-styled element located inside a link. The parent tag comes first; then comes the enclosed , or child, tag.

Now create a contextual selector. In Dreamweaver's New CSS Style dialog box, choose the Advanced option and, in the input field, enter .sidebar a:link as the name of your style. This will affect only links within elements that have the sidebar class applied to themin other words, only the links in your page's sidebar area. These links will be mimicking a traditional navigation bar, so remove underlines, make them bold, change fonts, and do whatever you like.
To give your sidebar links rollover effects, create another new contextual selector. Call this one .sidebar a:hover , and assign whatever color changes or other hover changes you like.
Repeat this procedure for the footer links: Create a custom class called .footer and apply it to the table cell or div that contains the bottom navigation elements. Then define contextual selectors such as .footer a to control the appearance of these links.

Quick Styling of Table Cells

Here's another scenario: You have layout tables throughout your site, but you also have a few dozen very large data tables scattered across the site that you want to display a certain way. And you want to control it all as efficiently as possible. You can use custom classes to format the tables, but the disadvantage of classes is that they must be applied. And the formatting you have in mind must be applied to individual table cells, not just tables. Do you have to create a custom class for data table cells and then go through your entire site, applying custom classes to a dozen or more table cells in each document? No! You apply a custom class to your data tables and use a contextual selector to apply the cell formatting. Do it this way:

Create a custom class called .datatable . Give it whatever formatting characteristics you like for your data tablesmaybe a nice background color or text formatting for table contents. Apply this class to all data tables.
Now create a contextual selector. In Dreamweaver's New CSS Style dialog box, choose the Advanced option and, in the input field, enter .datatable td as the name of your style. Assign centered alignment, assign borders, and assign any formatting that must be applied on a cell-by-cell basis. When you finish, your data table cells are formatted immediately because the custom class has already been applied.

When you start thinking in contextual terms, you'll increase your CSS efficiency and be able to tackle bigger projects without blanching.

Exercise 11.3. Use Contextual Styles to Format Links and Other Page Content

In this exercise, you'll continue to build the Zoo Visit site, using contextual styles to create several different link styles.

The links in the main content area need to be color-coordinated to match the page background bar, but otherwise they should be left alone. The links in the sidebar need different formatting. Those in the footer still need different formatting.

Start with the main text links in the content area. To define those, you'll just redefine the anchor tag. Create a new style that redefines the a tag; make sure the style gets saved in the main.css style sheet, not in the current document. In the Type category of the Style Definition dialog box, select the color chip and sample your page's blue sidebar to create the text link color. When you click OK to close the dialog box, all links on your page turn that shade of blue. The links in the sidebar disappear entirely.
Now it's time to set up the sidebar. Create a custom class called .sidebar , to be stored in the main.css style sheet. You don't want the sidebar content to smash up against the edges of its table cell, so it's time for more padding. Assign a left and right padding of 10 and 20 pixels. Click OK to close the dialog box.

Try applying the class through the Tag Selector this time. Place the insertion point in the sidebar cell. In the Tag Selector, find the td tag that contains the selection, and right-click. From the menu that appears, choose Set Class > sidebar.
Now that there's a custom class, you can create some contextual selectors for what's inside it. Create a new style and, in the New Style dialog box, choose Advanced. For your selector's name, enter .sidebar a:link (don't forget to type the dot at the beginning). Click OK to close the dialog box. Figure 11.28 shows this happening.

Figure 11.28. Creating the .sidebar a contextual style.

When the Style Definition dialog box appears, you get to choose how the links inside the sidebar will appear. Set the color to white, the font to the Arial list, the weight to bold, and the size to 90%. (This means 90% of what the size would be without this style.) Click OK to close the dialog box and create the style. The links in the sidebar are styled!

What if it doesn't work? Open main.css and double-check the name of the contextual style. Is the dot missing? Is anything else wrong? If there's the smallest typo, it won't work.
The sidebar links would also benefit from rollover effects. That requires another contextual style. Create a new style, of the Advanced type, with the name .sidebar a:hover . In the Style Definition dialog box, change the text color to black and set the decoration to Underline. Click OK to close the dialog box.
There are several more opportunities for contextual styles on this page. Do you know what they are? The heading in the sidebar uses an h1 tag because it's the main heading in the sidebar, but it should look different from the real main heading. How can a contextual style help you there? The links in the footer also need their own styling. To contrast with the main content of the page, they should be in Arial and should colored orange to match the divider bar that you added to the footer previously. What contextual style will fix this formatting problem? (Answers: .sidebar h1 and .footer a .)

Your challenge: Can you make these styles happen?

Working with Multiple Style Sheets at Once

Thanks to the properties of inheritance and cascading, you can have an external and internal style sheet, or multiple external sheets, controlling the same document at the same time. Remember that the cascading in CSS means that styles can be additive and that the code closest to the actual element trumps higher-level style rules. Understanding the benefits and drawbacks of combining sheets will enable you to take full advantage of CSS.

Using Internal and External Style Sheets Together

Why would you want to use an internal and an external style sheet? You might have a whole set of site-wide styles that govern the entire look and feel of your pages. But you've got this one page, with content that's unlike any of your other pages and with formatting requirements of its very own. You still want it to have the company look and feel, but you need a few extra tweaks for this page alone.

It's easy to mix and match internal and external when you use the CSS Styles panel to build your styles. Every time you create a new style, use the Define In settings to choose where the style code goes.

Just remember that, according to the rules of cascading and inheritance, the internal style sheet always wins any style wars. You want to define as many styles as you like externally and then selectively override just the styles that should be different for the internal style sheet. If the external style sheet defines the p tag to be Arial 12-pixel left-aligned text with line spacing of 15 and a color of black, and your current page needs blue text, redefine the p tag internallybut include only the specific property that needs changing, color. That way, if the company font changes from Arial to Georgia, you won't have to fix this page.

Using Multiple External Style Sheets

This is where life really gets interesting. If you're a good planner, you can create modular design effects for maximum CSS efficiency even on a large site. Imagine: You've got a site-wide style sheet that defines page margins, basic fonts and sizes, and nothing else. That applies to all pages in the site. Then each department has its own style sheet that defines a custom color scheme to apply to the page background and text. And across all departments, you've got some common types of pages, such as input forms, that have their own style requirements. Figure 11.29 shows how you might attach these style sheets to create a lovely, well-organized style cascade.

Figure 11.29. Diagramming a site's use of multiple external style sheets.

Order Matters!

You can link, or attach, as many style sheets as you want to an HTML document. According to the rules of cascading, the one at the bottom of the list has precedence (because it's closest to the page content in your document). Because the one at the top of the list is farthest away, it will be overridden by all others. So, the farther down the list a style sheet is, the higher its priority is.

How It All Works in Dreamweaver

You can get yourself into trouble attaching multiple external style sheets if you're not careful.

First, by default, Dreamweaver adds newly attached style sheets to the bottom of the style list. This is true whether they're linked or imported or a mixture. If you can, attach them in order, from lowest priority to highest priority. Their order in the CSS Styles panel display is the same as their order in your document.

What can you do if your style sheets are in the wrong order? You can't use the CSS Styles panel itself to rearrange them, unfortunately . You can switch to Code view, find the code for both styles, and cut and paste to rearrange them.

Second, it is possible (and even legal) to import a style sheet into another style sheet. If you have an external style sheet selected in the CSS Styles panel when you attach another one, Dreamweaver will import the new style sheet into the one you had selected instead of attaching it to your current HTML document. If this happens, the newly attached style sheet will appear indented in the style list, and you'll need to open the other style sheet in Dreamweaver, find the code that imported the second sheet, and delete it.

Exercise 11.4. Using Multiple Cascading Style Sheets

It's time for the coup de grace in the Zoo Visit site. By the end of this exercise, you'll see some of what's possible using external Cascading Style Sheets.

To start, the main.css style sheet needs to be applied to more than one page. Open zebra.html . In the CSS Styles panel, click the Attach Style button and choose to Link the main.css style sheet to this file. Some, but not all, of your formatting appears. What's missing?

You need to apply the maincontent , sidebar , and footer classes, that's what! Using the Property Inspector, the Selection Inspector, or any of the other methods mentioned earlier in this chapter, apply all three of these classes to the appropriate table cells.

Repeat this procedure to attach the main.css style sheet to zebra_form.html . If you're feeling really frisky, you can attach all of the pages: the monkey section, the elephant section, and so on. But the only one you'll be using in the exercise is the zebra.
Now for the subsidiary style sheet. Take a look at one of the two zebra pages you just edited. Both of the pages in the zebra section need their own special treatment; they need a purple background graphic (instead of blue) and a purple color for links to match. Everything else about them should match the main page. You need a zebra style sheet, to override a few of the properties in the main style sheet.

Open zebra.html , go to the CSS Styles panel, and create a new style. Choose to store this style in a new style sheet document, not main.css. Because you need this style to change the page's background graphic, set it to redefine the body tag. Click OK to close this dialog box. When Dreamweaver asks what to call your new CSS document, call it zebra.css and save it in the chapter_11 folder.

When the Style Definition dialog box opens, go to the Background category and set the background image to purple_bar.gif in the images folder. Set the Repeat option to repeat-y and click OK to close the dialog box. The zebra's sidebar color changes, but all other styles from the main page are still in place.

The zebra.css style sheet also needs to redefine the a tag so that its color matches the purple sidebar. Create a new style to be stored in zebra.css that redefines the a tag. In the Type category of the Style Definition dialog box, set the color to match the purple sidebar (see Figure 11.30).

Figure 11.30. The zebra section of the Zoo Visit website, with its own color scheme on top of the main style sheet's formatting.
Now apply the zebra style sheet to the other of your two zebra pages. Open zebra_form.html . Attach the zebra.css style sheet to this file, and there's your new color scheme!
So now the zebra_form.html page is being formatted by two separate style sheets. But wait, there's more! All of the order form pages throughout the site need some form styling, which can be found in the forms.css style sheet. Attach this style sheet to the zebra_form.html document to see a CSS triple-play (see Figure 11.31).

Figure 11.31. The zebra's order form page, using three external style sheets to make its magic.

If you're really curious , finish up the site! The elephant page needs brown_bar.gif as its sidebar; the monkey page needs green_bar.gif.

Using Linked and Imported Style Sheets to Create a Netscape 4Friendly Site

As mentioned earlier, Netscape 4 doesn't support the import directive for attaching external style sheets to web pages. You can use this to your advantage, to create one set of styles for newer browsers and another set for Netscape 4. Do it like this:

As you build your web page, create an external style sheet to hold all CSS formatting, and attach it to the page. Call the style sheet something like styles.css .
When you're finished, preview the page in Netscape 4 and see what doesn't work there. Determine how you could simplify the styles to make it work acceptably.
In Dreamweaver, duplicate styles.css as ns4_styles.css or some similar name. Open it in Dreamweaver and use the CSS Styles panel to edit the problematic styles so they're Netscape-friendly. Save and close.
Open your web page again. In the CSS Styles panel, select and remove the styles.css attached style sheet. (You're removing it so you can reattach it in the proper order.)

Attach the Netscape-friendly style sheet, being sure to specify the Link method as you do. Then reattach the main style sheet, using the Import method.

What's going to happen here? Reading from top to bottom, any newer browser will see the linked style sheet, but will then also see the imported style sheet. Because the imported style sheet appears second, it will take precedence for displaying content. Netscape 4 will see the linked style sheet and will link it. It will then completely ignore the imported style sheet and display its content according to the simpler set of rules.