CSS | SYS-CON AUSTRALIA

CSS

Apr. 7, 2004 12:00 AM

Unless you've been living under a rock - at least a rock without high speed internet access - you've no doubt heard of Cascading Style sheets, or CSS. Over the next few months we'll be featuring articles on how to use Dreamweaver MX 2004 and Cascading Style Sheets to make your sites look great and work better. This month we'll cover the basics - to bring novices up to speed and to introduce thes concepts to other MX Studio users who may have been too busy with ActionScript, Lingo, or CFML over the past few years to keep up with this rapidly evolving Web standard.

What Is CSS?
Cascading Style Sheets - CSS - provides formatting control over HTML. With CSS, you can easily add borders to graphics, apply sophisticated typographic control to text, and create streamlined layouts without the use of tables. CSS is really a replacement for the anemic design controls offered by HTML such as the <font> and <table> tags and their associated properties. CSS lets HTML do what it does best - logically structure documents - while providing a rich formatting language to create visually sophisticated designs.

A stylesheet is a collection of styles - called rules - that define the presentation of elements on a page. For example, you could create a style that would make all <h1> tags appear in purple using the Verdana font, and underlined with a green dotted line. Or a style could add a 2-pixel red border to an image, and align it to the right edge of the page. In fact, each rule can contain many different formatting properties such as font size, background color, border type, and position.

CSS in Dreamweaver MX 2004
Dreamweaver MX 2004 sports many new CSS features, not the least of which is its ability to render CSS-based designs with far greater accuracy than the previous version of the program. CSS designs looked like a garbled mess in Dreamweaver MX's Design view. In MX 2004, even complicated CSS designs often look nearly identical to the display of most standards-compliant browsers. In addition to MX 2004's display of CSS, how you create, use, and edit styles has also changed.

If you're a former Dreamweaver MX user, you'll find CSS popping up in unexpected places. Some of the dialog boxes you formerly used to add HTML-style formatting now use CSS. For example, as in MX, MX 2004's Page Properties dialog box (Modify ‡ Page Properties) lets you set the background color of the page. However, instead of setting the <body> tag's bgcolor attribute as in earlier versions, MX 2004 creates a new CSS style that defines the background color of the page. The end result is the same - a colored background - it's just that MX 2004 uses CSS to specify these page properties.

The page properties dialog lets you set a wide range of properties that have a global effect on a page. In addition to the properties available in MX - page margins, background color, background image, and link colors - MX 2004 lets you set a default font for a page and define a rollover state for text links (see Image I). You can even individually tweak the size and color of the different heading tags (<h1>, <h2> and so on).

The Property Inspector has also undergone a major overhaul. By default, if you select text on a page and then set the text size, font face, and font color using the Property Inspector Dreamweaver creates a new CSS style that is applied to the selected text. The new style's name appears in the Property Inspector's Style menu with an unimaginative name like style1, style2, style 3, and so on.

Tip: You can rename these style names by selecting Rename… from the Property Inspector's Style menu (see Image II).

Depending on how you selected the text, before you applied formatting with the Property Inspector, one of two other things happens:

If you selected a blocklevel element like a paragraph or heading, Dreamweaver adds an HTML attribute called "class" to the paragraph - this property lets a Web browser know that the style affects the entire block. For example, you added a dark-blue color to the first paragraph of text on a page. Dreamweaver creates a new style, say style1. The HTML would look like this: <p class="style1">; all text in the paragraph is dark blue; and the style's name appears in the Property Inspector.

If you selected just a portion of a paragraph, say a few words, and then applied some character formatting, Dreamweaver behaves slightly differently. It still creates a new style, for example, style2, and that style still appears in the Property Inspector. But it also injects an HTML tag called a span. The span tag might look like this: <span class="style2">formatted text here </span>. This tag will wrap around the text you selected, and the style is applied only to the text inside the span.

A good way to determine which method Dreamweaver used is to look at the tag selector at the bottom left of the document window. If you see something like <p.style4>, this means style4 is applied to the paragraph. If you see <span.style6>, Dreamweaver applied the style to just a portion of the paragraph, headline, or block-level element.

The cool thing about this technique is that you don't have to go through all of these formatting steps to apply the same look to other text on the page. Simply select the text you want to format and choose the name of the style you want to use - for example, style1- from the Style menu.

Removing formatting you applied this way is easy: click anywhere inside the formatted text and select None from the Property Inspector's Style menu. This removes the CSS formatting from the text.

However, if you decide to change the style of text you formatted using the Property Inspector some strange things can happen. Let's say you select a paragraph and apply a red color; select Arial or Helvetica, sans serif as the font; and change its size to 36 pixels. Dreamweaver creates a new style - style1. You decide you don't like the red color, so you immediately change it to a deep orange. Dreamweaver (as you'd expect) updates style1 swith a deep orange color. In this scenario, everything is OK.

But, let's say you apply this style to another headline on the text. Now there are two headlines with the style1 style applied to them. However, if you select the second headline and change its color, Dreamweaver doesn't update style1. Instead, Dreamweaver creates another style containing just the new color and applies it (along with the first style) to the headline. To further confuse matters, the Property Inspector's Style menu displays "none", meaning no styles are applied to the headline, when in reality there are two styles - style1 and style2.

This may seem crazy, but it happens because Dreamweaver doesn't know what you wanted. Did you intend to add color to just that one headline or change the color of the style. Either choice is possible - maybe you want this one headline to look mostly like the other, but stand out with a different color. Maybe not.

In any case, Dreamweaver's behavior may feel erratic and certainly won't help you edit the style. You have two choices if you want to update the style. First, make sure no other text on the page uses the style. You can then change the color, font face, and size using the Property Inspector and Dreamweaver will update the style. Once you're done - really done - then you can use that style freely on the page. A better choice, if you wish to edit the style itself, is to use Dreamweaver's CSS tools and not the Property Inspector.

There's another problem with using the Property Inspector and Page Properties dialog to format elements on a page. Dreamweaver stores the CSS style information in the <head> region of the page. While this is fine for just one Web page, it's a problem if you want to share styles among all the pages of your site. A better option is an external stylesheet. This is a separate file, with a .css extension, that just contains CSS rules. You can link any number of Web pages to this file. In addition to providing download savings (the external .css file is downloaded once and then cached in the user's computer), external style sheets also ease site updating. If you want to change how a certain style looks throughout your site, you need to change only a single file.

Tip: If you do use the Property Inspector or Page Properties dialog to add styles to a page, you can always export those styles into an external style sheet by File > Export > CSS Styles.

Creating Styles in Dreamweaver
Instead of relying on the Property Inspector or Page Properties dialog to create styles for your page, you'll have more control if you explicitly create your styles using Dreamweaver's CSS tools. The fastest way to create a new style is to right-click (Ctrl-click on Mac) on any empty area of a document, and from the contextual menu select CSS Styles > New to open the New CSS Style dialog box (see Image III).

Tip: You can also access this dialog box by choosing Text > CSS Styles > New or clicking the New Style button on the CSS Styles panel.

When you create a style you need to pick a selector type, supply a selector name, and tell Dreamweaver where to store the style information. A selector dictates what a browser applies the style to. For example, you could create a style that automatically formats all <h1> tags in blue, or a style that you manually apply to specific page elements - say you want the first paragraph of a page to be in slightly larger type than other paragraphs on a page.

Dreamweaver classifies selectors into three types: classes, tags, and advanced selectors. A class is most like the Word-processor notion of a style: you give the style a name of your choosing, like companyName, and apply the style manually to text or other page elements. Classes give you flexibility since you specifically identify which elements you want the style to apply to. For example, maybe you want some paragraphs on a page to look a particular way - create a style and apply it to just those paragraphs.

Note: The name of a class style always begins with a period, like this: .companyName. However, if you forget to add the period when naming a class style, Dreamweaver is thoughtful enough to add it for you.

Tag styles, on the other hand, are indiscriminate. They define how a particular tag will look anywhere it appears on the page. For example, you could create a tag style that would replace the default bullet of every unordered list (the <ul> tag) on a page with a GIF image you created. Tag styles simplify formatting; you don't have to apply a tag style after it's created; the Web browser automatically does that whenever it encounters the specific tag.

Finally, what Dreamweaver calls "advanced selectors" are really a grab bag for all of the additional selector types CSS supports - and there are a lot. These include pseudo-classes (to let you format the different states of a link, for example, active, visited, hover), IDs (for identifying unique page elements such as the header, sidebar, or page footer), and descendent selectors to name a few. In future articles, we'll cover advanced selectors in greater depth.

After picking a selector type, you supply a name (for classes), tag (for tag styles), or selector (following the syntax of CSS selectors), and finally tell Dreamweaver whether to store the style information in the current page - "In this document only" - or in an external style sheet. You can create a new external style sheet by selecting New Style Sheet from the menu, or, add it to an already attached style sheet. You'll frequently create a main external style sheet for your site, where you store global styles that affect all of the pages of your site. In addition, you may create additional external stylesheets for particular purposes (like formatting forms) or particular sections of your site that may have special design needs.

Clicking OK in the New CSS Style dialog either opens a save dialog box (if you're creating a new external style sheet) or the CSS Style Definition window. Here you have access to 67 different CSS properties for controlling everything from text properties - like font face, color, and size - to defining pixel-precise positioning for page elements like banners and sidebars. For a good listing of CSS properties - what they are and how they work - visit www.w3schools.com/css/css_reference.asp.

Applying Styles
Depending on the type of style you created you may not need to do anything to apply your newly created style. For example, tag styles are automatic; wherever the tag appears its style is applied. Class styles, on the other hand, must be applied manually. If you're a Dreamweaver MX user, you probably use the CSS Style panel to do this. In MX 2004, that same functionality is moved to the Property Inspector. The Style menu lists all of the classes available to a particular page.

You can apply class styles to any selection in the document window, whether it's a word, an image, or an entire paragraph. For example, suppose your company's name appears in a paragraph of text on a Web page that includes a class style named company. To format that text using the class style, select the name in the document window and use the Property Inspector's Style menu to select the class name. Similarly, to format larger selections, such as an entire paragraph, you'd select the paragraph and select the class's name from the Property Inspector style menu.

Note: If you choose a class name from the Property Inspector when nothing is selected (for example, when you click in the middle of a paragraph), Dreamweaver will apply the style to the nearest enclosing tag.

When you apply a class style (.content, for example) to a tag, Dreamweaver adds a special class property to the page's code, like this:

On the other hand, if you apply a class to a selection that isn't a tag - a single word that you've double-clicked, for example - Dreamweaver wraps the selection within a <span> tag like this:

<span class="company">The National Exasperater</span>

This tag, in other words, applies a style to a span of text that can't be identified by a single tag.

Removing a class style is just as easy: select the styled text, and choose None from the Property Inspector's Style menu.

Editing Styles
To change the properties of a style, you can always return to the CSS Style Definition window by selecting the style in the CSS Styles Panel and clicking the Edit Style Sheet button (the icon with the pencil). However, MX 2004 introduces a more streamlined approach to editing styles: the Rule Inspector.

To use the Rule Inspector, first make sure the Tag Inspector is open. Choose Window > Tag Inspector or press the F9 key. Next, select the style you wish to edit in the CSS Styles Panel - this turns the Tag Inspector into the Rule Inspector (see Image IV).

The Tag Inspector has two different views: a category view, which groups the different CSS properties into the same seven categories used in the Style Definition Window (the left image in Image IV); and a list view, which provides an alphabetical listing of all CSS properties (the right image in Image IV) .

So you can quickly determine properties already set for the particular style, Dreamweaver moves previously defined properties to the top of the list, highlighting the property names in blue and listing the property settings to the right. In Image IV, for example, the copyright class style is selected. In the Category view, two font properties float to the top of the Font category: font-size and color. In the List view, you can see that the style actually has six different CSS properties set - border-top-color to text-align. This is a great way to quickly grasp what properties you've already defined for a style.

You set the value of a particular property in the space to the right of the property name. If that property already has a value, you can change it or delete the information there to essentially delete that property from the style. Fortunately, most of the time you don't have to type in the value: Dreamweaver provides the ubiquitous color box for any property that requires a color; properties that have a limited list of possible values include a pull-down menu of options; and, finally, some properties require a path to a file (such as when adding a background image to a style). In this case, Dreamweaver provides the familiar "browse for file" folder icon.

Other properties require knowledge of CSS and must be entered manually (in the correct format, of course). That's what makes this a more advanced option for experienced CSS gurus. Even not-so-experienced users can find this window helpful, however. First, it's the best way to get a bird's eye view of a style's properties. The list view is especially helpful in this regard, since all of the defined properties are listed at the top of the window. Second, for really basic editing such as changing the colors used in a style, or assigning a different font for a style, the Rule Inspector is as fast as it gets.

More to Come
If you're new to CSS, or still finding your way, this brief introduction should help you get your bearings in Dreamweaver MX 2004. In our next article, we'll explore some of the behind-the-scenes issues you should be aware of when setting up your style sheets, such as how to effectively use document type definitions, what validation is really about, and rules every style sheet should contain.

Related Links

About Dave McFarland
Dave McFarland is the Dreamweaver editor of MX Developer's Journal and author of Dreamweaver MX: The Missing Manual. Find out about his latest projects at www.sawmac.com.

DAVEMCFARLAND@SYS-CON.COM