Section 6.8. Cascading Style Sheets Tutorial

6.8. Cascading Style Sheets Tutorial

In this tutorial, you'll create an external style sheet for a Web page on the National Exasperator Web site.

Note: As usual, this tutorial requires some half-finished starter documents from the Web. Using your Web browser, visit www.sawmac.com/dw8/. Click the Tutorials link to go to the tutorials page. Then, click the link for the Cascading Style Sheets Tutorial. When the files are downloaded and decompressed, you should have a folder named DWCSS on your computer, containing the Web pages and graphics for this tutorial.

6.8.1. Setting Up

Once you've downloaded the tutorial files and opened Dreamweaver, choose the DWCSS folder as your site folder, using the site-definition routine described on Section 5.7.1.2. (For a shortcut, choose Site New Site. In the Site Definition window, click the Advanced tab, type something like CSS Tutorial into the Site Name field, click the folder icon next to the Local Root Folder field, navigate to and select the DWCSS folder, and then click Choose or Select. Finally, click OK.)

To ensure that your files preview correctly, you'll need to make sure that a particular Dreamweaver preference is set:

Press Ctrl+U ( -U) to open the Preferences window .

Alternatively, you can use Edit Preferences (Dreamweaver Preferences on Mac).
not turned on.
When this setting's turned on and you edit a CSS style in an external style sheet, Dreamweaver opens the CSS file. Unfortunately, when you preview your page, Dreamweaver doesn't save the CSS file, and since the browser is using the saved version of the file, it doesn't know about (or display) the styles you just created! For more on this dilemma and other solutions, see Section 6.4.2.
Click OK to close the window .

Now you're ready to begin defining a style sheet.

6.8.2. Creating an External Style Sheet

In this example, you'll create a collection of styles for the headline news stories on the National Exasperator Web site.

Choose File Open; then navigate to, and double-click, the file in the DWCSS folder called story1.html .

The Web page contains a headline news story from the National Exasperator (see Figure 6-27). The page's text is a bit boring looking, so you'll use CSS to spiff it up.

To start, you'll create a style for basic paragraphs and create an external style sheet at the same time.

Figure 6-27. Add style to this rather plain Web page using Cascading Style Sheets. In this tutorial, you'll improve the rather ho-hum appearance of the left sidebar and main section of this pagethe white area in this figure. See Figure 6-37 for the completed page.
If the CSS Styles panel isn't already open, choose Window CSS Styles(or press Shift+F11) .

The CSS Styles panel opens.
At the bottom of the CSS Styles panel, click the New Style (+) button (see Figure 6-1) .

The New CSS Rule window opens (see Figure 6-28). You'll first pick the type of style you wish to create.

Figure 6-28. If you've already attached an external style sheet to a page, you can select its name from the"Define in" menu. That way, the new style's added to that file. Your other option, which is what you're doing in this tutorial, is to create the new style sheet when you first create a style.
Click the Tag button .

This lets you create a style for a particular HTML tagin this case, the <p> tag. In other words, you're going to create a formatting rule that applies automatically to every basic paragraph.
Type p into the Tag box, or choose "p" from the menu .

In the "Define in" section of the New CSS Rule window, click the New Style Sheet File button (see Figure 6-28).
Click OK .

The Save Style Sheet File As dialog box appears. You're about to create the filean external style sheetthat stores the styles for this page.
Navigate to the DWCSS folder. Type headlines.css in the File Name box (the Save As field on the Mac), and then click Save to save the file .

Cascading Style Sheet Files Always end in .css; that's how Web servers and browsers can tell what kind of file they are.

Having created the external style sheet, you can now create the first style, as suggested by the sudden appearance of the CSS Rule Definition window. You'll choose a font, set a size , and assign a color to the <p> tag.
From the Font menu, choose "Georgia, Times New Roman, Times, serif"; in the Size box, type .8 ; from the menu to the right, select "ems"; and in the Color field, type #003366 .

Next, you'll add a little leading (space between lines of text) to the paragraph to make the page easier to read.
In the "Line height" box, type 150 , and from the menu to the right, select"%."

The CSS Rule Definition window should look like Figure 6-29.

Figure 6-29. You can set the CSS equivalents of HTML text formatting options from the Type category of the CSS Rule Definition window. (If Cadet Blue doesn't do anything for you, click the color box and choose a color you prefer.)
Click Apply .

You can actually preview the look of a tag style without closing the CSS Rule Definition windowjust drag the window out of the way.
Click OK .

The CSS Rule Definition window closes and the paragraphs of text on the page are now formatted according to the style you just created. As you may have noticed, you didn't have to select the text to apply this style. Since it's an HTML tag style, it's applied automatically wherever the tag appears on the page.

Now, you'll create a style for the title of the story, which is an <h1> tag.
On the CSS Styles panel, click the New Style button .

The New CSS Rule window opens. The Tag button is already selected, and the menu in the "Define in" option lists the new external Style Sheet headlines.css . In other words, Dreamweaver will add the new style to this external style sheet. All you need to do now is identify which tag you want to redefine.
In the Tag box, type h1 , or choose "h1" from the menu, and then click OK .

The CSS Rule Definition Window appears.
From the Font menu, choose "Verdana, Arial, Helvetica, sans serif"; in the Size box, type 2 ; from the menu to the right, choose "ems"; in the Color box, type #669999 .

Click Apply again to preview the new headline style. What you've got so far isn't nearly sophisticated enough for the National Exasperator , so you'll add a background color and top and bottom borders to the tag.
Choose Background from the category list on the left side of the CSS Rule Definition window. In the "Background color" box, type #FFFFCC .

Or, if you prefer, select another color using the color box. You've just set a background color that appears behind the text of any <h1> tag on the page. Next, you'll add snappy rules above and below the title.
In the category list, click Border .

The CSS Rule Definition window now displays all the properties used to put a border around a style. You can control each border individually or use the same line style for all four edges. In this case, you'll add lines only to the top and bottom of the headline.
Click to turn off all three "Same for all" checkboxes. From the Style menu, choose "dashed" for the top border, type 3 in the Width box, and type #666666 in the color box. Do the same for the bottom border .

The window should now look like Figure 6-30.
Click OK .

The window closes, and the title of the story appears with its new formatting. If there had been other Heading 1 headings on this page, you'd see all of them change, too.

Figure 6-30. Use the Border properties to add rules to any or all of the four edges of an object. You can give an image a stylish border or underline a heading with this property.

6.8.3. Editing a Style

The paragraph text is a tad too small, so you'll edit the <p> tag style you just created to make the text bigger:

At the top of the CSS Styles panel, click the All button .

This displays all the styles in the page. You'll notice that in addition to the headlines.css file you created, there's an internal style sheet (whose styles are embedded in this page) with a previously defined style for the <body> tag.
If it isn't already, expand the list of styles in the headlines.css Style Sheet by clicking the + icon (arrow on the Mac) to the left of "headlines.css."

This lists all of the styles you've added to the external style sheet.
In the list, click "p," and Dreamweaver displays all of the properties for the <p> tag style (see Figure 6-31) .

You can edit a CSS property directly in this panel.

Figure 6-31. The Properties section of the CSS Styles panel displays all the CSS properties for the style that's selected in the "All Rules" pane. Make sure the "Show only set properties" button is selected (circled in this figure). Otherwise, you'll also see a long list of every CSS propertyboth those that are set and those that aren't.
In the "font-size" row, click "0.8" to highlight it. Type 1 and then hit Return or Enter .

The font size of the paragraph increases to 1 em. Another problem with the paragraphs is that there's no space between the text and the blue-gray sidebar at left. A little white space would provide some visual breathing room.
Click the "Add Property" link at the bottom of the list of properties and select "margin-left" from the pop-up menu .

You'll have to scroll down the menu to find it. Another approach is to simply type margin-left in the box and press Return or Enter.
Type 15 . Hit Return or Enter to apply the change .

The text moves 15 pixels to the right, creating a nice space to the left of the text. You can also edit a style by selecting the style in the CSS Styles panel and clicking the Edit Style button (see Figure 6-1) or by double-clicking the style name. These alternate methods open the familiar CSS Rule Definition windowthe same window you used to create the style in the first place. You should use whichever method you like best.

6.8.4. Creating a Class Style

Now you'll create a style to highlight the name of famous people mentioned in National Exasperator stories. This particular story deals with two well-known celebritiesnotice their names in the first paragraph of Figure 6-27. But since the names consist of just a couple of words within the paragraph, you can't redefine an HTML tag to format them globally. Instead, you'll create a class style, which you can then apply to the names:

On the CSS Styles panel, click the New CSS Style button (+) .

The New CSS Rule window opens. This time, you'll create a class style rather than an HTML tag style.
Click the Class radio button. In the Name box, type .celebrity .

Class styles always begin with a period. (If you forget to start with a period, don't worry. Dreamweaver's smart enough to do it for you.)

Since you want to add the style to the external style sheet, you don't need to do anything else in this dialog box; Dreamweaver already proposes storing it there.

Note: Some beginners think that whenever you create a new style, you also need to create a new external Style Sheet . On the contrary, you canand shouldstore more than one style in a single external Style Sheet. In fact, if you're creating a set of styles for an entire site, put them all in the same external style sheet.
Click OK .

The CSS Rule Definition window appears. You'll add a few new properties to make this style stand out.
From the Weight menu, choose "bold."

To make this style even more prominent, you'll change its font color.
In the Color box, type #CC0000 .

Or, if you don't normally dream in hexadecimal notation, you can select a color using the color box.

That's enough formatting for the .celebrity style. Now you'll return to the document and apply it.
Click OK .

The Style definition window closes, but this time, nothing's changed in the document window. Unlike HTML tag styles, class styles don't show up anywhere until you apply them by hand.
In the first paragraph, select "Loch Ness Monster."

This is the first star mentioned in the story.
From the Property inspector's Style menu, choose "celebrity" (see Figure 6-32) .

BoomDreamweaver formats the text with the bold, colored style. Now you'll style Big Foot's name.
Select "Big Foot" in the first paragraph, and apply the celebrity style to it, too .

Your document text should look something like Figure 6-33.

Figure 6-32. The Style menu in the Property inspector lists all class styles. It also displays the style name using the style's text formattingin this case, bold and red text. Notice that only class styles are listed; tag styles don't appear in this menu since you don't need to apply them manually.

Figure 6-33. At this point, the text in the page is coming along well. The headlines look distinctive , and you've achieved some effects (like the background color of the title) that only CSS can accomplish.

6.8.5. Formatting Images

CSS styles aren't just for text. You can create styles and apply them to anything on a pagetables, images, or links, for example. In this next section, you'll improve the appearance of the story image; specifically , you'll make it hug the right side of the page and add margins so it has some breathing room around it:

On the CSS Styles panel, click the New CSS Style button (+) .

The New CSS Rule window opens. You could redefine the <img> (image) tag, but this would affect every graphic on your page.
Since you only want to create a style for the main story graphic, type .photo in the Name box, make sure the Class style button is selected, and then click OK .

The CSS Rule Definition window opens. You'll first make the image float to the right edge of the page.
Click the Box category at the left side of the dialog box .

These properties affect margins, padding, and other attributes of a style (see Figure 6-34).

Figure 6-34. Be careful not to confuse the Padding and Margin properties in the Box category. The Padding settings determine the amount of space between the styled object and its border. The Margins, by contrast, set the amount of space between the borders and other items around the objectin this case, the space between the photos and the text around them. See Figure 6-23 for a diagram of which margins are controlled by each setting.
From the Float menu, select "right."

This option works like an image's Align Right property (see Section 5.2.5); the graphic snaps against the right side of the browser window.

But because text wraps around the sides of the photos, you should add a little space between the edges of the photo and any text around them. The Margin properties are just the ticket.
Turn off the "Same for all" box for the Margin property and type 15 in the Right, Bottom, and Left margin boxes .

CSS lets you set different margin sizes for each edge of an object. Since browsers automatically add some empty space below the headline, there's no reason to add any margin to the top of the photo.

The CSS Rule Definition window should look like Figure 6-34. You're done with the style; now it's time to apply it.
Click OK to close the CSS Rule Definition window .

To apply this new class style, you'll start by selecting an image.
Click to select the graphicthe battle between the Loch Ness Monster and Big Foot .

As you can see in the tag selector at the bottom of the window, clicking the photo automatically highlights the <img> (image) tag to which you'll apply the style.
From the Class menu in the Property inspector, select "photo."

When applying a class style to text, the Property inspector includes the Style menu. For nontext objects, you use the Property inspector's Class menu, located to the far right of the inspector. (Aside from its name, this menu is identical to the Style menu.)

The photo moves to the right edge of the page, and the rest of the text flows around it.

Tip: Although the image moves over to the right edge of the page, the actual position of the HTML code used to include the imagethe <img> tagappears before the word Saturday . Dreamweaver can provide visual cluesin the form of small gold shieldsto indicate the position of the HTML for elements that actually appear in a different area of the page. Having those gold shields makes it easier to select the HTML the shields represent. To make these shields visible, see the Tip on Section 2.1.3 and turn on the "Anchor points for aligned elements" checkbox.
Choose File Save. Press F12 (Option-F12 on Mac) to preview the page in a Web browser .

Depending on which browser you preview the page in, you may notice white space above the headline "Battle of the Century." Some browsers, like Mozilla and Safari, add extra space above headers. You can get rid of this space, if you wish, by editing the <h1> tag style and setting its Top margin property to .

6.8.6. Creating Contextual Selectors

Now it's time to create a few styles for the left side of the page, which includes a heading and a list of links. You could create tag styles for the <h2> and <ul> tags used in this part of the page, but those would then affect the same tags in the main area of the page, which would then look like the sidebar, which isn't what you want. Or you could use separate class styles, but then you'd have to apply them individually to each element.

A better option, as described in detail on Section 6.6.3, is to use a type of CSS style known as a contextual selector (or descendent selector). First, you'll create a class style called .sidebar, which you'll apply to the tag containing all of the text in the sidebar region. Next, you'll create two contextual selectors to define how the <h2> and <ul> tags should lookbut only when they appear inside the sidebar. Here's how to do it:

On the CSS Styles panel, click the New CSS Style button (+) .

The New CSS Rule window opens.
Click the Class radio button. In the Name box, type .sidebar .

Dreamweaver adds the period before the style name if you forget.

Dreamweaver also proposes storing it in an external style sheet, which is exactly what you want.
Click OK .

The CSS Rule Definition window opens. In this case, you're creating a style that you'll apply to the tag that holds all of this contenta table cell . (Tables are a common technique for laying out pages. In the next chapter, you'll learn how to create them.)
Click the Box category to view CSS options for Padding and Margins .

You'll add some padding to this style to create some space inside the cell, effectively indenting the text.
Leaving the "Same for all" box turned on, in the Top box for the Padding property, type 10 . Click OK to create the style .

You've just added 10 pixels of space around the inside edges of the style. But since this is a class style, nothing happens until you apply it.
Click anywhere inside the left sidebar, and using the tag selector, click the first <td> tag (see Figure 6-35) .

Now that you've selected the table cell, you'll add the style to it.
From the Style menu on the Property inspector, select "sidebar" (Figure 6-35) .

The text indents 10 pixels, and in the tag selector, Dreamweaver now lists the table cell tag as "td.sidebar" to indicate that the sidebar class style is applied to it. Next, you'll create a contextual selector to format the headline.
On the CSS Styles panel, click the New CSS Style button (+) .

The New CSS Rule window opens.
Click the Advanced radio button. In the Name box, type .sidebar h2 .

This syntax for a contextual selector simply means that the style you're about to create applies to the <h2> tag (a tag style), but only when <h2> appears in the .sidebar style. In other words, it won't affect any <h2> tag outside of the sidebar.

Note: The period before sidebar is not optional in this case. When creating Advanced styles, you must type the full class name, period and all.
Click OK .

The CSS Rule Definition window appears. In this case, you'll just make a couple of style adjustments, but feel free to try other style properties while you're here.
From the Font menu, choose "Verdana, Arial, Helvetica, sans-serif." Type 1 in the Size box and select "ems" from the menu to the right. Click OK to create the style .

The text "Today's Headlines" becomes smaller and changes to a different font. Next, you'll fix the list, which is indented too far.
Once again, on the CSS Styles panel, click the New CSS Style button (+) .

The now-familiar New CSS Rule window opens.
Click the Advanced radio button. In the Name box, type .sidebar ul .

You're creating another contextual selector. It applies to every <ul> tag (meaning unordered, or bulleted, list) inside the sidebar style.
Click OK .

The CSS Rule Definition window appears. In this case, you'll adjust the font and margins used to display the list items.

Figure 6-35. For accuracy, use the tag selector to select an HTML tagin this case, the <td> tag (circled). You can then apply a style to the tag from the Property inspector.
Select "Geneva, Arial, Helvetica, sans-serif" for the font and set the size to .8 ems .

Since the sidebar on this page is rather skinny, the standard indent that Web browsers add to bulleted lists is too broad for this list. You'll adjust that space using the Padding and Margin properties.
Click the Box category and turn off the "Same for all" box under both the Padding and Margin properties. Then type 10 in the Left box for both padding and margin (see Figure 6-36) .

You'll make one more change to beautify the list: change the regular old circular bullets to square bullets.

Figure 6-36. Using the Margin property, strangely enough, doesn't adjust the margins for both bulleted (<ul>) and numbered (<ol>) list items for all browsers. To assure the most consistent experience across all browsers, set both the Padding and Margin properties.
Click the List category, and from the Type menu, select "square." Click OK to create the style .

The bulleted list changes font, the indent shrinks, and square bullets appear.
Choose File Save to save the page. Press F12 (Option-F12 on Mac) to preview the page in a Web browser .

Your finished page should look something like Figure 6-37.

6.8.7. Attaching an External Style Sheet

Now that you've created these styles, you may be wondering how you can use them on other pagesafter all, that's the beauty of external style sheets. Once created, it's a simple process to add a style sheet to other pages in the site.

Choose File Open. In the DWCSS folder, double-click the file story2.html .

This is another headline story for the National Exasperator . It has no formatting yet, so you'll attach the external style sheet you just created.
On the CSS Styles panel, click the Attach External Style Sheet button (see Figure 6-1) .

The Link External Style Sheet window appears.
Click the Browse button .

The Select Style Sheet dialog box appears. Navigate to the DWCSS folder and select the headlines.css file.
Click OK to insert the path to the Link External Style Sheet window .

You can ignore the other settings (they're described in detail on Section 6.3).
Click OK to attach the style sheet to the page .

Dreamweaver instantly formats the top headline and main text of the story. Pretty cooland very efficient. You only need to apply the .sidebar class style to the left table cell to format that text as well.
Click anywhere inside the left sidebar, and in the tag selector, click to select the first <td> tag .

Next you'll add a style to the tag.
From the Style menu on the Property inspector, select "sidebar" (Figure 6-35) .

All of the text in the sidebar is instantly formatted.
Press F12 (Option-F12 on Mac) to preview the page .

If you'd like to compare your finished product to the professionally completed version, visit www.sawmac.com/dw8/tutorials.

Figure 6-37. Internet Explorer displays the headline "The Battle of the Century" without any space above, whereas other browsers like Safari (pictured here) and Firefox add a margin to all <h1> tags. To make the browsers perform similarly, you can edit the <h1> style and either remove the top margin (by setting it to 0) or make Internet Explorer display a margin, by setting the margin-top property to some value (10px, for example).

6.8.1. Setting Up

6.8.2. Creating an External Style Sheet

Figure 6-27. Add style to this rather plain Web page using Cascading Style Sheets. In this tutorial, you'll improve the rather ho-hum appearance of the left sidebar and main section of this pagethe white area in this figure. See Figure 6-37 for the completed page.

Figure 6-28. If you've already attached an external style sheet to a page, you can select its name from the"Define in" menu. That way, the new style's added to that file. Your other option, which is what you're doing in this tutorial, is to create the new style sheet when you first create a style.

Figure 6-29. You can set the CSS equivalents of HTML text formatting options from the Type category of the CSS Rule Definition window. (If Cadet Blue doesn't do anything for you, click the color box and choose a color you prefer.)