CSS Basics

[ LiB ]

As great as CSS is, it's a big, new scary world if you've never been here before. This look at the basics covers how CSS came to be, what it does and how it works, and what tools Dreamweaver MX 2004 has on tap to help you create it.

A Little History Lesson

The original concept for HTML was that of a language used to mark up text to describe the different structural elements of a document. HTML tags identified which portion of a document was a heading, which portions were paragraphs, which portion was part of a list, and which words needed to be emphasized . The browsers were designed to interpret these structural elements in such a way that the text onscreen made sense to the reader. Not every browser displayed text the same; one might show text marked emphasize in italics, and another might show that text in bold, but either way, the text was emphasized. The goal was readable documents that would display with structural definition across a variety of platforms (see Figure 11.1).

Figure 11.1. Basic structural markup tags as they display in a browser window.

Presentational Markup and Its Problems

With the advent of graphical browsers and the rapid expansion of the Web came the demand from HTML authors for new tags that would specify presentational effects rather than just structure. Designers were no longer satisfied to specify that a word needed to be emphasized somehow; they wanted to be able to specify exactly how the word would be emphasized (by bolding, for instance). In response to this pressure, physical elements such as b and i began to enter the language. Soon a structural language was evolving into a presentational one, and the font tag for styling text came into wide usage.

Website designers were happy to have some control over presentation, but as they stopped using structural formatting, it was no longer possible to deduce the structure of the information from the source. This has a number of negative repercussions , including the following:

The code produced doesn't convey anything about the meaning of the text being presented. Structurally, these pages are just strings of letters . A speech-synthesis browser, for example, will read text marked with <h1> tags as a main heading; it will read text marked to be rendered in large type and bold just like any other text.
Unstructured markup is much more difficult to maintain. Text marked up logically according to the meaning of the content results in clean code that makes sense.
Unstructured pages are very difficult to index. If page headings and section headings are clearly marked, search engines can use them to enable the user to perform targeted searches for relevant information.

This Is a Job for CSS

The W3C quickly recognized that the nature of HTML was being changed by the increasing use of presentational markup and that a solution was needed. As a direct response, work began on Cascading Style Sheets; in 1996, CSS was made a full W3C Recommendation.

CSS is designed to allow the web designer a lot of control over how pages display, while retaining the basic essence of HTML as a structural language. It allows for much more complex and varied presentation of text than HTML ever could, permitting styling such as the creation of borders, the amount of space around elements, variations on capitalization, decoration (such as underlining), letter spacing, and many other possibilities.

Almost as exciting is the lightening of the web developer's workload brought about by the use of linked style sheets, in which a single change to a style declaration can affect specifically targeted text site-wide.

CSS is clearly the direction of things to come for web designers and should be part of the toolkit of any serious web designer.

With the proliferation of new and alternative web-browsing devices such as cellular phones, handhelds, personal digital assistants, and web TV, logical document structuring might well become critical. In conjunction with CSS, this approach allows for very different presentations as determined by the device being used to view the pageexactly as in the original concept for HTML.

The Nuts and Bolts of CSS

A Cascading Style Sheet at its most basic is a set of instructions that defines how an HTML document is going to display. The great thing about CSS is that it can be defined in an external file, or sheet. This external sheet first is read by the browser and then applies the rules to the specified content on the page. In this way, the style and formatting of the page are separate from the content. This is an important concept in designing web pages. It also gives you a powerful and detailed way to update your entire website.

You can create a style sheet that defines your text as Arial, 12 pixel, red, bold, and left-justified with a blue background. Attach your sheet to all the pages on your site, and all your text will appear that way. If you have a change of heart, you can change that one style sheet and make the text Times, 28 pixel, green, italic, and right-justified. Save that new sheet, and the entire website is automatically updated.

CSS also enables you to do things that HTML just can't do. You can set a layer on your page to be scrollable. This way, you can have a window in the middle of your page with scrollable content. You can define different colors for every facet of a table border. You can set custom graphics for bullets, and you can remove the underline from hyperlinks .

Although browser support is getting better with every release, some browsers do not display all CSS elements, nor do they display some elements in the same way. It is always a good idea to test your page in multiple browsers. One important idea of CSS is that if the style is not supported in the browser, the information will still be thereit will just not show the offending styles.

IE 5 and above and Netscape 6 and above do a fine job of displaying most CSS elements. Netscape 4 has some limitations.

CSS gives you unprecedented control over your page. The W3C is now recommending the use of CSS for page formatting. You would do well to explore the possibilities of CSS in your web design.

A Note About Semantics

A style , or style rule , is generally defined as a set of parameters for a tag or a class.

A sheet is the file that contains the styles. A sheet can contain many styles.

Anatomy of a Style

At the heart of CSS is the style. Understanding how styles work and what flavors they come in is crucial to using them wisely.

CSS Selectors

The easiest of the styles to understand is the CSS selector. A selector is any HTML element or tag. To affect the appearance of the tag, you apply a set of rules that defines how the tag should display in the browser.

The basic format of a selector style is this:

 selector {property:value}

The selector is the tag being changed. The property is the name of the property being set. The value is the value of the property being set.

A basic CSS example is this:

 p {color: green}

This sets any text within the <p></p> tags to green for any page that uses this style.

You also can group several settings into one style:

 p { color: green; text-align: right }

This sets the green text to the right of the page.

If you want to assign multiple tags the same style, you can list them in the selector:

 p,div,H2 { color: green; text-align: right }

Notice that a comma separates each tag, a full colon separates the property from the value, and semicolons separate properties.

Contextual Selectors

Contextual selectors are another way of applying styles to specific tags. This is a bit more specialized because a selector works by being applied only when a certain condition or set of tags is present.

For instance, you can create a CSS selector that you want to be applied only to anchor tags that are within lists. So, you would set up a selector that looks for a tag combination of li a (list item, anchor) and then applies the style. All linked elements not in lists are not affected by this style.

 li a { color: red; font-weight: bold; text-decoration: none; }

Classes

You can have more than one set of styles for a tag. The most flexible method of defining more than one set of styles is to specify classes. A class is a set of style rules that can be applied to any element, unlike a redefined HTML tag, which is automatically applied to all specified elements, like this:

 .red {color: red} h2.green {color: green}

When you want to specify a particular class in a tag, it would look like this:

 <h2 class="green">This is Green text</h2>

This tells the tag to use the green class. Because this is applied directly to this tag, it influences this tag only. <h3 class="green">This is not green text</h3> is not affected because the .green class is directly associated with the <h2> tag.

You can use the red class with any tag, and it would apply because it is not assigned to a specific tag. So, the following would actually display properly:

 <h2 class="red">This is Red Text</h2> <h3 class="red">This is Red Text</h3>

Pseudoclasses

The most common usage of pseudoclasses is to display links in different states: Link, Visited, Hover, and Active. These are preset definitions for link styles that differentiate Links, Active (links that are being clicked on), Hover (when mousing over a link), and Visited (links that have already been visited). You can use selectors to define a style for each of these states. The order of their use in the CSS file is important: It must be Link, Visited, Hover, Active, or their functionality will not work as desired. An example is this:

 a:link{text-decoration:underline} a:visited{text-decoration:overline} a:hover{text-decoration:none} a:active{text-decoration:none;cursor:wait}

Pseudoclasses work with IE 4+ and Netscape 4+, but the a:hover effect won't show up in Netscape 4.

Styles and Style Sheets, and Where They're Kept

Styles can exist in a document as individual styles placed inline with the document or they can be grouped in collections called style sheets. A style sheet can be internal or external, depending on where it is stored relative to the document that it's formatting. The following sections discuss the relative advantages and disadvantages of inline styles, internal style sheets, and external style sheets.

Inline Styles

Inline styles are those defined directly within the tag on the page. The CSS is written right into the tag as an attribute, like this:

 <input type="text" style="width:150px; border:1px solid  #000000;">

Although an inline style takes precedence over all other styles, it affects only the particular tag it's attached to. No other instances of the input tag, for instance, are affected by the width and border options set here. This is the least efficient way of using CSS in a web page.

Internal Style Sheets

Internal style sheets are defined within the actual HTML page in the head region using the style block. This way, the styles are available to the whole page without being dependent on another file.

A typical internal style looks like this:

 <head> <style type="text/css"> body {background-color: red} p {text-align: right; color: white} </style> </head> <body> <p>This paragraph is white.</p> <p>So is this paragraph.</p>

As you can see, if you want to move all paragraphs in the document to the left and change their color, just edit the CSS in the head; the changes will be made automatically to all paragraphs in the document.

External Style Sheets

External style sheets enable you to take full advantage of the capabilities of CSS. External style sheets contain all the styles and definitions in an external file with a .css extension. This is arguably the best way to store your styles. Using this method, the style information is completely independent of the HTML code. You can change the look and feel of your entire site just by editing this external file. The site automatically updates depending on the information in that sheet after it is uploaded to the server. After you learn all the options that CSS presents to you, you can take full advantage of this functionality.

A typical external style sheet is linked to the page by code like this:

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

Or, it is imported into it like this:

 <style type="text/css"> <!-- @import url("styles.css"); --> </style>

The actual style sheet file just has a list of selectors and classes listed, as follows :

 p { color: green; text-align: right } .red {color: red} h2.green {color: green}

HTML tags, including comment tags, should never be included in external CSS files because they can cause your CSS to not be interpreted correctly in the browser. (CSS comments are allowed, just not HTML comment tags. To create a comment line in CSS, start it with two forward slashes [//].)

After you link the external style sheet to all pages in your site, you just change the settings in the file and save and uploadand everything updates. This is the tremendous advantage of using CSS!

Cascading and Inheritance

One of the advantages of CSS styles is that they all work together, if needed, and can overwrite each other as needed. Cascading and inheritance work together to make this cooperation happen.

Cascading refers to the use of multiple styles and sheets and the order in which they are read. The order in which the styles appear within the code determines which particular trait will display. If the external style sheet says that h2 text should be blue, but there is an inline style on a particular h2 tag that says the text should be yellow, the yellow will win because it is closer to the actual text code.

Inheritance means that in styles that cascade, the closer style will overwrite only those parameters that both styles share. In the preceding example, if the external style says that the h2 tag should be right-justified, the inline style will not overwrite that because it does not have a parameter that controls justification. Therefore, the h2 tag will be yellow because of the inline style, but it will inherit the right-justification from the external style.

CSS in Dreamweaver

Dreamweaver has a full set of tools for helping you design, create, manage, and preview a CSS-based website. In fact, starting with Dreamweaver MX 2004, CSS is everywhere in the code the program writes and the interface you work with.

The CSS Styles panel (Window > CSS Styles) is the central location for manipulating and controlling styles and style sheets. From this panel, you can create, edit, and examine styles, and manage external linked or imported style sheet documents (see Figure 11.2).

Figure 11.2. The CSS Styles panel, showing internal and external style sheets and style definitions for the current document.

Dreamweaver MX upgraders, are you missing the Apply Styles mode? It's gone! Apply styles from the Tag Inspector or the Property Inspector.

Creating a New Style

To create a new style in the CSS Styles panel, click the New CSS Style button. You can also create a new style by right-clicking in the Tag Inspector's Relevant CSS tab and choosing New Rule, by choosing New from the Style drop-down menu in the Property Inspector, by choosing Text > CSS Styles > New from the main menu, or by right-clicking in an empty portion of the Document window and choosing CSS > New.

Whichever method you choose, the New CSS Style dialog box appears (see Figure 11.3). From here, you can determine what kind of style you want to create and where you want to put it.

Figure 11.3. The New CSS Style dialog box.

Choose the type of style you want to create from the Selector Type options. Your choices are these:

Class (can apply to any tag) If you choose this option, use the Selector field to enter a name for your class. Class names should start with a period, but if you forget to type the period, Dreamweaver will insert it for you.
Tag (redefines the look of a specific tag) If you choose this option, use the Selector field to specify a tag to redefine, either by typing it into a field or by choosing it from the drop-down menu.
Advanced (contextual selectors and so on) Use this category for anything that doesn't fit in the other two, such as pseudoclasses, contextual selectors, and IDs.

To create a pseudo-class, choose this option and use the Selector field drop-down menu to choose a pseudoclassor, you can type the pseudoclass name manually.

To create a contextual selector, choose this option and type the names of your contextual selectors into the Selector field. For a contextual selector that combines li and a , for instance, type li a in the field. For a selector that combines the custom class .footer and a:link , type .footer a:link in the field (don't forget the period in front of the class name, or the selector won't work).

To create an ID, choose this option and type ID # name in the Selector field, substituting the name of your ID for name. (IDs are discussed in the next chapter.)

In the bottom portion of the dialog box, you can choose to save the style in an internal style sheet, which will be added to your document's head, or an external style sheet, which will be saved in a CSS document and attached to the current HTML document. If you want to put the style in an external document but you don't have one, choose the New Style Sheet Document option, and Dreamweaver will help you create one now.

After you've decided what kind of style to create, click OK to close the New CSS Style dialog box. This automatically opens the Style Definition dialog box, ready for you to specify what formatting the new style should include by defining style parameters.

Defining Style Parameters

The interface for specifying CSS style formatting is the Style Definitions dialog box. This dialog box appears as soon as you create a new style and every time you want to edit existing styles. Its eight different windows cover different aspects of CSS control.

As you're working, note that Dreamweaver MX 2004 now renders most CSS elements in the Design window. However, it is still a good idea to preview the page in multiple browsers to make sure that your pages will actually render correctly.

Type

The Type category lists options for formatting text (see Figure 11.4). Some options are self-explanatory; some are not so much. Most of these settings will display well across browsers and in Dreamweaver Design view.

Figure 11.4. The CSS Style Definition dialog box, showing the Type category.

Font Select the font group to be used in the style. You can edit this list by clicking the down arrow and choosing Edit Font List. For more information on font usage, see the sidebar "Specifying Fonts in CSS."
Size Specify a font size. Notice that you can choose a number value or absolute size values. Absolute size values set the medium value to the default settings of the user's browser or defined styles rules and then scale from there.
Style Set the font to normal, italic, or oblique. The difference between italic and oblique is this: Italic is a distinct version of the font. Most fonts have an italic version. Oblique is simply the original version of the font that has been angled by the computer. In reality, there is usually no difference between the two in the browser, but there can be variances between fonts and sizes. If this distinction is critical, test both settings in the browsers.
Line Height This determines the height of a single line of text. If you are more used to working with print projects, this is comparable to line spacing or leading. Normal line height is calculated based on type size; lines will be approximately 20% larger than the type size. Absolute line height can be assigned based on any of the measurement systems covered in the following sidebar.
Weight This determines the boldness of the font. The number values (100900) are absolute settings, whereas Bolder and Lighter are relative to the default weight. Note that boldness is not always rendered the same way across browsers; always preview in several different browsers if you choose any setting here other than Normal or Bold.
Variant This setting determines whether lowercase letters will be substituted with small capital letters.
Case Determine the capitalization of the text: all uppercase, all lowercase, or with every word capitalized.
Color This determines the color of the font.
Decoration This sets options for lines on the text. Use the None option for removing the underline from hyperlinks.

Background

The Background category (see Figure 11.5) controls how the background is rendered. Note that with CSS, you can control the background of every block element. This means that every paragraph, layer, table, or other discrete element can have its own background style. To apply a background to the whole page, you must apply background formatting to the body tag.

Figure 11.5. The CSS Style Definition dialog box, showing the Background category.

Background Color This sets the background color of the element.
Background Image This sets a tiling or nontiling background image behind the element. The remaining settings in this category all determine how a background image will display.
- Repeat This setting controls tiling for a background image. You can choose to repeat, not repeat, repeat horizontally only (repeat-x) or vertically only (repeat-y).
- Attachment This option determines whether a background image will scroll with the page or remain static, allowing the page to scroll over it.
- Horizontal Position and Vertical Position These settings determine the placement of the background image. Choose Left, Right, or Center/Middle to align the image relative to its parent element. Enter a numeric distance to offset the image from the parent's upper-left corner.

In the Dreamweaver window, the image set here might show up in the upper-left corner of the Design window. Preview in the browser for a correct look at the page. Also, there are browser limitations with some background images settings, especially with Netscape 4. As always, test in multiple browsers for compatibility.

Block

Block elements are discrete pieces of HTML. For instance, a paragraph is a block-level element. For CSS reasoning, it is considered a block of code; when applying a custom class to a paragraph, it affects only the code between the opening and closing paragraph tags. This way, each paragraph is treated as a separate element. Most block elements have an opening and closing tag. This is distinct from inline elements , which can be placed anywhere within a block element. An image, which doesn't have a closing tag, is a good example of an inline element.

The Block category (see Figure 11.6) of the CSS Style Definition dialog box contains options for specifying how block elements are presented on the page.

Figure 11.6. The Block CSS Style Definition dialog box, showing the Block category.

Word Spacing Use this setting to define the amount of space between each word.
Letter Spacing Use this setting to define the space between each letter in a word.
Vertical Alignment This setting determines the vertical aspect of word spacing. You can use it to specify subscripts and superscripts.
Text Align This setting determines the horizontal alignment of a text block: Left, Right Center, or Justify. Check in the browser when using Justify because browser support is inconsistent (and pretty darn ugly even when it does work).
Text Indent This setting determines the indentation of the first line of a block of text. (To indent an entire block of text, use Margin or Padding in the Box category.)
Whitespace This setting determines the whitespace, or empty space, within the block element. Normal collapses multiple spaces into one space. Pre leaves multiple spaces. Nowrap does not permit line wrapping without a break tag.
Display Controls fundamental aspects of the block element, including whether the element displays and how the tag behaves. Test these settings carefully because there is limited browser support for the Display option.

Box

Every block-level element in a page, such as a paragraph, is considered to live in its own rectangular box shape, which can be arranged using the box CSS settings. Some of these settings are used in conjunction with the positioning controls to create CSS positioning (discussed fully in Chapter 12, "CSS Positioning, Dreamweaver Layers, and Page Layout"). Note that some of these settings will show up only in the browser. Preview frequently to check your page.

Use the Box category (see Figure 11.7) of the CSS Style Definition dialog box to control element placement and spacing on the page.

Figure 11.7. The CSS Style Definition dialog box, showing the Box category.

Width and Height These determine the width and height of the element.
Float Float is used to separate an element from the rest of the page. Other elements will flow and wrap around this element as if it were something like an image. Only with an image will this setting show up in Design view.
Clear Clear is used to define an area that does not allow elements to overlap. A layer that appears on a side set to Clear will be moved below the clear area. This keeps block-level elements from occupying the same horizontal space.
Padding Padding determines the space between the contents of the block element and its border (or its margin, if a border is not set).

It's similar to the cellpadding attribute for tables. You can set the padding on all four sides of an element independently by deselecting the Same for All check box.
Margin Margin determines the amount of space between the element's border and other page elements around it. It's similar to cellspacing for tables, or vspace and hspace for images and media elements. You can set the margin on all four sides of an element independently by deselecting the Same for All check box.

Border

Border options are used to set a border around the specified element. It is this border from which the box padding and margin are referenced. It's similar to a table border, but with more possibilities.

Use the Border category (see Figure 11.8) of the CSS Style Definition dialog box to set the border of a page element.

Figure 11.8. The CSS Style Definition dialog box, showing the Border category.

Style Choose from Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, and Outset. Browser support for these differs .
Width Set the width for the border, as a number of pixels or non-numeric Thick or Thin.
Color Choose a color for the border.

Note that, as with padding and margin settings, the border can be applied to all four sides of an element independently. Use this independence to create effects such as paragraph rules.

List

The List category (see Figure 11.9) provides options for dressing up your numbered or bulleted lists.

Figure 11.9. The CSS Style Definition dialog box, showing the List category.

Type For bulleted (unordered) lists, choose the type of bullet to display: Disc, Circle, or Square. For ordered lists, choose what kind of alphabetical or numeric numbering to use: Decimal, Lowercase Roman Numerals, Uppercase Roman Numerals, or Upper- and Lowercase Letters.
Bullet Image For bulleted lists, specify an image to use as the bullet. Press the Browse button to link the image.
Position This setting determines how the list item wraps and indents. Choose Outside to wrap the list item to an indent, or Inside to wrap the item to the margin.

Positioning

The options in the Positioning category (see Figure 11.10) determine where the page elements will appear on your pagecalled CSS Positioning , or CSS-P. Although CSS positioning can be applied to most block-level elements, it is generally used with div tags. See Chapter 12 for a full discussion on CSS positioning.

Figure 11.10. The CSS Style Definition dialog box, showing the Positioning category.

Type This determines what kind of positioning controls the element. Absolute positioning places the block element relative to the upper-left corner of the page. Relative positioning determines placement relative to the spot in the document where the positioning style appears in the document. Static positioning places the block element in the same location in which it appears in the document.
Visibility This controls the initial visibility of the element. Inherit gives the element the same visibility setting as the parent tag. Visible makes the element visible. Hidden makes the element invisible. These options are used with JavaScript to hide and show page elements dynamically. See Chapter 14, "Controlling Layers with JavaScript," for a full discussion on visibility and scripting.
Width and Height These are the same as the width and height settings in the Block category. They define the dimensions of the block element.
Z-Index The z-index setting determines the stacking order of elements on a page. It takes a numeric value. Elements with lower numbers will appear below higher-numbered elements. Stacking order is relevant only for CSS-positioned elements that overlap. See Chapter 12 for more on using z-index.
Overflow This is used when the content of an element is larger than its specified width and height, and determines what happens to that extra material. Visible allows all the content of the layer to be shown simultaneously , no matter what the size setting is. Hidden strictly enforces the layer's size and cuts off any content that overflows this layer size. Scrollbars adds scrollbars to the layer whether it needs them or not. Watch for browser support on this if you are displaying important content. Auto creates scrollbars only when needed.
Placement Use these settings to specify where a CSS-positioned element will display. For absolutely positioned elements, all values are relative to the corners of the browser window. See Chapter 12 for a full discussion of this.
Clip This setting is used to specify the part of the layer that is visible. Use it when you want to hide a part of the layer without Overflow controls. It can be used in combination with JavaScript to create interesting effects.

Extensions

Options in the Extensions category (see Figure 11.11) are used for special considerations and customization. They haven't been as widely adopted by browsers as most of the other settings here, so tread carefullyand preview oftenwhen using them.

Figure 11.11. The CSS Style Definition dialog box, showing the Extensions category.

Page Break Use this for setting page breaks when setting up a page for printing. Use this setting for determining whether the page break comes before or after this element.
Visual Effect Use this to change the look of the cursor when it is over the element with this setting. Most browsers do not support this setting.
Filter This setting lets you apply special effects to images on the page. As of this writing, they work only in IE 4+.

Working with Styles

Style management happens in the CSS Styles panel, the Tag Inspector, the Property Inspector, the Tag Selector, and elsewhere.

Applying (and Unapplying) Styles

The beauty of redefined HTML tags is that they don't need to be applied. When a tag is redefined in your style sheet, every occurrence of it automatically takes on whatever formatting you specified. Contextual selectors and pseudoclasses work the same way.

Custom classes, on the other hand, need to be applied to an existing tag. Dreamweaver gives you various ways to do this:

Using the Property Inspector (see Figure 11.12) The Text and Table Property Inspectors include a drop-down menu of classes available for the current document. Just select the object/text that you want the class applied to, and then select the style from the drop-down menu to apply it. To unapply the class, choose None from the menu.

Figure 11.12. Applying custom classes in the Text Property Inspector and the Table Property Inspector.
Using the Tag Inspector (see Figure 11.13): In the Attributes section of the Tag Inspector, from the CSS/Accessibility category, type in the name of the class to apply.

Figure 11.13. Applying a CSS class with the Tag Inspector
Using the Tag Selector (see Figure 11.14) Right-click any tag in the Tag Selector and, from the contextual menu that pops up, choose Set Class to see a list of available classes. Choose one to apply it. To unapply a class, choose None.

Figure 11.14. Applying a custom CSS class with the Tag Selector.
Using the CSS Styles menus (see Figure 11.15) The CSS Styles menu includes a list of currently available classes. Access it under the Text menu or by right-clicking on a page element and using the contextual menu. To unapply a class, choose None.

Figure 11.15. Applying a custom class with the CSS Styles menu.

After a tag has a class applied to it, the Property Inspector's drop-down Class menu shows that class, and the Tag Selector displays the tag with the class name after it.

Managing Styles with the CSS Styles Panel (and Elsewhere)

The CSS Styles panel displays what styles you have defined, what their properties are, and where they're located (internally or externally).

To edit any style, select it in the panel and click the panel's Edit Style button. This opens the CSS Style Definition dialog box, where you can change any properties you want.
To rename any class, select it in the panel and choose Rename from the panel's Options menu.
To delete a style, select it in the panel and click the panel's Remove Style button (the trash can). For custom classes, though, it doesn't delete the places where the style has been applied in your document.

You can also manage your styles from various other points in the Dreamweaver interface. From the main menu, choose Text > CSS Styles and use the Edit or Rename commands. You can also get to this submenu by right-clicking in the Document window and choosing CSS Styles from the contextual menu. Another interface for managing styles can be accessed by choosing Text > CSS Styles > Edit from the main menu. This command opens a <style> window, which displays all styles defined internally in the current document and all attached style sheets.

Select a style and click Edit to edit it, or select a style sheet and click Edit to open a second window showing this sheet's styles. Those of you who started using Dreamweaver before MX will recognize this as the old style-editing interface. It's very cumbersome compared to the CSS Styles panel, however, so unless you're familiar with it and love it, you're better off not using it.

Inspecting Styles

Once you've got styles happening in your document, you want to keep tabs on what classes have been applied, where CSS formatting is happening, and so on. The Property Inspector, the Tag Selector, and especially the brand-new glorious Tag Inspector can help you there.

Inspecting Styles with the Property Inspector

If your selection calls up the Text or Table Property Inspectors, any applied classes will show up in the Class drop-down menu (with formatting applied, where possible). For text selections, the Property Inspector also displays some of the basic text formatting that any redefined tag or custom class has applied to this item (see Figure 11.16). Be careful here, though! Changing any of these settings doesn't update your current style. Instead, it creates a new style and applies it to the text element in addition to whatever styles may already be there.

Figure 11.16. Inspecting styled text with the Property Inspector.

Applied Classes and the Tag Selector

When a class has been applied to a tag, it appears in the Tag Selector along with that tag (see Figure 11.17). Pay attention to this! It's a great way to keep tabs on where your classes are being used. The Tag Selector won't tell you if a tag has been redefined, however, or if there's a contextual selector at work.

Figure 11.17. The Tag Selector, showing several applied classes.

The Tag Inspector/CSS Rule Inspector

The Attributes tab of the Tag Inspector indicates, in its CSS/Accessibility category, whether a class has been applied to a selection. But that's just the start of the fun. The Relevant CSS tab of the Tag Inspectoralso called the CSS Rule Inspectoris a wonderful compact interface for examining and editing styles that have been applied to your page elements (see Figure 11.18).

Figure 11.18. Using the CSS Rule Inspector to examine a styled text paragraph.

Examining applied style rules The top portion of the window indicates what CSS style rules are currently affecting the item you have selected in your document. That style rule might be a custom class, a redefined tag, or a combination of both. For custom classes, it also indicates what tag the class has been applied to.
Examining style properties Select a rule in the top portion of the window, and the bottom portion displays an exhaustive list of CSS formatting options, including any values that have been set in this rule. You can choose to display the list in categories (the same categories used by the CSS Style Definition dialog box) or alphabetically .
Editing styles Best of all, any changes you make to the style properties listed here will change the style you have selected. So, if you have one paragraph in your document selected and it's controlled by a redefined p tag, you can change the p rule formatting options here to reformat all paragraphs document-wide. If the redefined p tag is housed in an external style sheet, you've just reformatted paragraphs throughout your entire site, and all without having to go to the CSS Styles panel and opening the CSS Style Definition dialog box.

Exercise 11.1. Formatting a Page with an Internal CSS Style Sheet

In this exercise, you'll spiff up the formatting of the Zoo Visit home page with CSS, stored in an internal style sheet. Before beginning, download the chapter_11 folder from the book's website at www.peachpit.com to your hard drive. Create a site called Chapter 11 with this as the local root folder.

From the chapter_11 folder, open index.html and examine it (see Figure 11.19). As far as table-based layout goes, not much else is happening. The text is created entirely from structural markup, leaving the browser to interpret all h1 , h2 , p , and a tags.

Figure 11.19. The Zoo Visit page before any CSS formatting has been applied.
To start, a few page properties need tweaking. That means redefining the body tag. In the CSS Styles panel, click the New Style button. When the New Style dialog box opens, choose to redefine the body tag for This Document Only (see Figure 11.20). Click OK to close this dialog box.

Figure 11.20. Redefining the body tag for the current document only.

The CSS Style Definition dialog box opens automatically. You want to set the page margins to 0, and you want to set the page background. Page margins are in the Box category, so go there now. Set the margins to 0 for all sides.

Now go to the Background category. Set the background color to white (just in case some browser doesn't default to a white background). For the background image, browse to the blue_bar.gif file (in images folder) and set the Repeat to repeat-y (vertical only). Click OK to close the dialog box. The page looks better already! Redefining the body is often where a CSS makeover starts.
Now for some basic text formatting: redefining the p tag. Create a new style, redefining the p tag for the current document only. When the Style Definition dialog box opens, go to the Type category and choose the Georgia font list. Set the size to .9 em. (See the section "Specifying Dimensions in CSS" for more on ems.) Click the Apply button to see your changes take effect. Then click OK to close the dialog box.
You want the h1 and h2 tags to be redefined as well, to use the same font list but with larger em sizes. Create those styles now. Experiment with the sizes until you get results you like. Choosing basic text formatting is often another early step in CSS formatting.
Now for a custom class or two. You don't want to alter the page margins, but the text in the main cell shouldn't run all the way to the right margin. This cell (and only this cell ) needs some padding. In the CSS Styles panel, create a new style that makes a custom class called .maincontent (don't forget to start with a dot). In the Style Definition dialog box, go to the Box category and set the padding for the right side only to 30 pixels (see Figure 11.21).

Figure 11.21. Adjusting text flow in a table cell by setting the right padding only.

Click the Apply button; it has no effect in the document. That's because this is a custom class and needs to be applied. Click OK to close the dialog box.

In the Document window, put the insertion point in the main text area somewhere and use the Tag Selector to select the td tag that contains it. In the Property Inspector's Class drop-down menu, choose maincontent. You now have a right margin. The Tag Selector lists this cell as td.maincontent.
But wait! The maincontent style needs some bottom padding as well so that it doesn't smash into the footer. In the CSS Styles panel, select the maincontent style and click the Edit Style button. When the Style Definition dialog box opens, go to the Box category and add a bottom padding of 20 pixels. Click the Apply button to test your style. The change takes effect because this class has already been applied. Click OK to close the dialog box.
You're on your own now. To format the footer cell, create a custom class called .footer that adds 20 pixels of padding on all sides, and apply it to the bottom-right cell of your table.
One final item: The contents of the footer cell need to be right-aligned, which means editing the footer class. Select the table cell containing your footer. In the Selection Inspector, go to the CSS tab and open the Block category. Find the Align setting, and set it to Right. That's a quick way to edit a style sheet!

Working with Style Sheets

Style management is also about managing style sheets, both internal and external. All of this management can be done through the CSS Styles panel as well.

Attaching Style Sheets

Although you can use the CSS Styles panel to create style sheets, you also can attach existing style sheets. If you are adding more pages to a website that has a series of premade styles, you can easily attach those style sheets to your new pages and apply them as you want. They will act no differently from styles created in Dreamweaver: Redefined HTML tags will automatically update, and the list of custom classes should appear in the CSS Styles panel.

To attach an existing style sheet using the CSS Styles panel, simply click on the Attach Style Sheet button in the lower left of the panel. You can also choose Attach Style Sheet from the Class drop-down menu in the Property Inspector. Or, you can choose Text > CSS Styles > Attach Style Sheet from the main menu, or right-click in the Document window and choose CSS Styles > Attach Style Sheet.

Whichever method you choose, you are prompted to browse to the .css file and to choose whether to link or to import. The difference between these two is slim: Link uses an href to link to the sheet, while Import uses a style or URL link to find the file. Netscape 4 supports only the Link method. Other newer browsers can support either.

Click OK to complete the linking. The redefined HTML tags and selectors are applied automatically, and the list of the custom classes will be available throughout the interface.

If you imported your style sheet, it will display in the CSS Styles panel within the <style> tag indicator. That's because the import directive appears within a style tag. If you linked the style sheet, it will simply appear in the CSS Styles panel as itself (see Figure 11.22).

Figure 11.22. The CSS Styles panel, showing a linked and imported style sheet.

Working with External Style Sheets

When you have an external style sheet attached to a document, you can work with its styles the same way you would work with internal styles: through the CSS Styles panel and other interface elements discussed here. But every time you change a style in an attached sheet, Dreamweaver is actually changing the CSS document, not your open HTML document. This can be a little bit disconcerting until you get used to it. For instance, you might save your HTML, change a style definition, and then try to undo that change, only to find out that you can't because the change wasn't made to the current document.

Some web authors find this frustrating, so Dreamweaver gives you the option of automatically opening an external style sheet behind the current document whenever you work on one of its styles. That way, when you change a style, the change is made in the open style sheet and the style sheet isn't saved. If you want to undo the change, you can, or if you want to undo several changes, you can activate the CSS document and choose File > Revert.

The disadvantage of Dreamweaver opening the CSS document and not automatically saving it after every change is that you need to remember to save it periodically, even though it's not the main document you're working on. (You're working on your HTML document.) Every time you want to preview in a browser, for instance, you have to remember to activate the CSS document and save it, or any style changes you've made recently won't appear in your preview. If Dreamweaver should (heaven forbid !) crash while you're working, or if the power goes out and your computer shuts down unexpectedly, and you haven't remember to save both your HTML and your CSS file recently, you've just lost a lot of editing changes.

By default, Dreamweaver doesn't open the CSS document automatically. To change this preference, choose Edit > Preferences/CSS Styles and select the Open _CSS Files When Modified option (see Figure 11.23).

Figure 11.23. The Preferences dialog box for CSS Styles, including the option to automatically open external CSS documents when they're edited.

The Preferences/CSS Styles dialog box also gives you various options for writing shorthand CSS code. By default, they're deselected. Unless you already write your own CSS code by hand and like to use shorthand, you can leave these preferences as is.

Removing Style Sheets

To remove an external style sheet, select it in the CSS Styles panel and click the Delete CSS Style (trash can) button. Note that this doesn't actually delete external CSS documents! It deletes only the link or import statement in your current document that connects the two.

An internal style sheet can't be deleted. Instead, select the individual styles within it and delete those.

Exporting Style Sheets

Exporting means moving styles from an internal to an external style sheet. Exporting becomes important if you create a style internally when you meant to create it externally, or create it internally and then later change your mind.

To export an internal style sheet from the CSS Styles panel, choose Export Style Sheet from the panel's Options menu. You can also choose Text > CSS Styles > Export from the main menu, or right-click in the Document window and choose CSS Styles > Export.

Whichever method you choose, Dreamweaver prompts you to create a new CSS document. When you've done this, click OK to close the dialog box. The new style sheet is created. Unfortunately, if you were hoping to remove the internal style sheet and link your current document to the external style sheet, that doesn't happen. Your current document remains unchanged. To complete the operation, you'll have to delete all internal styles and use the Attach Style Sheet button to link or import the newly created CSS document.

If you want to copy just one or two styles to an external document, not your entire style sheet, select them in Code view and cut and paste them into a CSS document. The CSS Styles panel can help you with this, too. Select one of the styles in the panel and, from the Options menu, choose Go to Code. (You can also right-click the style and get the same Options menu.) Or, just double-click the style name to accomplish the same thing.

Creating a Style Sheet from Scratch

Maybe you don't want to create your external style sheet as you go. Maybe you know already what your styles will be, and you just want to build the style sheet without having a document open. You can do it! Just choose File > New and, in the New Document dialog box, choose Basic Pages/CSS as your document type.

This file will open in Code view because there's nothing to display in Design view. But that doesn't mean you can't use design tools to work on it. Using the CSS Styles panel or any other Dreamweaver method you prefer, create as many new styles as you want. Make sure the New Style dialog box is set to create the style This Document Only so that the code gets written in the document you have open. When you're done, save and close. Now you can link or import this style sheet into as many HTML documents as you want.

Exercise 11.2. Moving Internal Styling to an External Style Sheet

This exercise builds on the previous exercise, moving the internal styles that you created there to an external style sheet. You won't be able to do this exercise until you've done that one.

Start by opening index.html in your chapter_11 folder. Examine the CSS Styles panel, and you'll see the various internal styles you defined earlier. You want to make those styles external so you can apply them to other pages. (For some of you, this is a typical design scenario, starting internally and then deciding external would be better. It's also good practice working with style sheets.)
In the CSS Styles panel, open the Options menu and choose Export Style Sheet. When the dialog box opens, choose to call your style main.css and save it in the chapter_11 folder.
Now you need to get rid of the internal style sheet to make room for the new external styles. In the CSS Styles panel, select each style and click the Delete button to get rid of them all. Back to square one!
Now click the Attach Style Sheet button in the CSS Styles panel. When the dialog box opens, choose to Link to the main.css document (see Figure 11.24), and click OK to close the dialog box. Styles are back!

Figure 11.24. Attaching the main.css style sheet to the Visit Zoo page.
To finish, the footer needs some spiffing up. How about a border to separate the footer from the content area? Select the footer cell and, in the Property Inspector, find the Class drop-down menu. From this menu, choose Edit.

When the Style Definition dialog box opens, go to the Border category. Deselect Same for All for all options, and create a top border that's solid, 2 pixels thick, and the same orange color that's in the zoo title graphic (see Figure 11.25).

Figure 11.25. Creating a horizontal rule effect with a top-only border style.

Click OK to close the dialog box. There's a lovely horizontal line separating the footer from the rest of the page.