Ten Ton Dreamweaver [Electronic resources] نسخه متنی

Getting Started with CSS Style Sheets

Ready for a night out on the town with CSS? Are you looking sharp? You didn't have your parents drop you off, did you? Okay, off we go!

A style is just a set of formatting rules for your text to follow. A style sheet is a file that holds a group of styles. These files are called Cascading Style Sheets because of the way the styles flow, or cascade, through your page, or even your entire site.

In Chapter 5, you saw how Dreamweaver uses Cascading Style Sheets to build a library of styles for you in the Property Inspector as you work. By default, Dreamweaver creates styles that apply to a single page at a time: an embedded style sheet. An embedded style sheet is stored within your current page. But to really get the most out of style sheets, you should create one that applies to all of the pages in your web site: an external style sheet. External CSS to control an entire site later in this chapter. But first, let's look at what's involved in editing styles that you've already created. Put on a dinner jacket and pop a mint so I can introduce you two lovebirds.

Getting Started with Dreamweaver's Sample Style Sheets

Here's a great way to get started with CSS: Use Dreamweaver's sample style sheets. Dreamweaver comes loaded with many style sheets that you can browse through and apply to your pages. Once you apply a style sheet to your page, you can use the CSS Styles panel to edit and change the styles as much as you like.

With your page open in Dreamweaver, follow these steps to give the sample style sheets a try:

external style sheets later in the chapter.

CSS'S Dirty Little Secret

There's trouble in paradise! Even though CSS has it allpower, beauty, prestige, and a hot carit does carry some baggage. Most notably, CSS is not supported by all web browsers (Boo! Hiss!). You build what you think is an amazing web site, only to find out that it looks like a spaghetti train wreck when you preview it in older browsers.

Remember our web designer motto: Check your target browsers! In fact, early CSS features aren't fully supported until IE6 and NN6. The sixth-generation browsers (as well as newer browsers such as Firefox and Safari) support quite a lot of newer CSS featuresbut even these browsers don't all display CSS formatting in the same way. But there are a few options for getting around CSS's browser-support problems.

One possibility is to insert some JavaScript into your page to redirect noncompliant web browsers to a page that relies on older formatting techniques. The only problem is that now you have two sites to maintain, not one. Have you ever tried going steady with two people at once?

Geek's Delight

As stated at the World Wide Web Consortium web site, CSS code "degrades gracefully." What the heck does this mean? It means a rusty old browser won't display a broken link icon or code gibberish if it doesn't understand the CSS code. It just ignores the problem and renders the page the best it can. Find out more about CSS at w3.org/tr/rec-css1l (CSS1 specifications) and w3.org/tr/rec-css2 (CSS2 specifications).

Another approach is to post your site's compatibility info on your opening pagea common addition to sites these days. Be careful here, though. On the one hand, you want to save your visitors the headache of wondering why your site doesn't work right for them. But on the other hand, what you're really telling your visitors is, "Upgrade your browser, you freaks!" You're transferring responsibility for your site's poor performance to your visitor. Ouchread that one again.

You can validate your CSS to ensure that it will work properly in most web browsers. Choose File > Check Page > Validate as XML.

It's a balancing act. You want a large body of people, under a variety of conditions, to be able to surf your site. This is why testing your site in many browsers under an array of conditions is so important.

The CSS Styles Panel

(1) External style sheet

(2) Embedded style sheet

(3) Panel mode buttons

(4) All Rules pane

(5) Delete Embedded Style Sheet/Unlink CSS Style Sheet/Delete CSS

(6) Edit Style Sheet/Edit Style

(7) New CSS Rule

(8) Attach Style Sheet

(9) Properties pane

(10) Show Only Set Properties

(11) Show List View

(12) Show Category View

To expand the size of either the top or bottom pane in the CSS Styles panel, bring your mouse over the area that divides the two panes (your cursor should change to a double-headed arrow) and drag.

The Property Pane's Three Views

The three buttons at the bottom left of the CSS Styles panelShow Category View, Show List View, and Show Only Set Propertiesallow you to control the Properties pane display.

You can use the CSS Styles panel to create and edit styles whether you're in Design view or Code view.

Use the three view buttons at the bottom of the CSS Styles panel to control what the Properties pane displays.

Category view organizes all the available CSS properties into categories that can be expanded and collapsed and has a structure similar to that of the CSS Rule Definition dialog box, which you'll see later in this chapter. List view presents an alphabetized list of all properties, with any currently set properties displayed at the top of the list. Show Only Set Properties displays only the properties that have been set for the selected style.

You may be confused at first about which view to use, especially if you're all nervous and stuff on your CSS date. But remember that these buttons control only the display of the Properties panethey don't change your styles.

1.

Click the All button at the top of the CSS Styles panel to set the panel's mode.

If you're working on a page where you've already applied some styles, the panel lists all the styles that you created.

2.

In the All Rules pane in the top, select the style that you want to edit.

3.

In the bottom-left corner of the CSS Styles panel, click the Show Category View button.

4.

In the Properties pane, expand a category by clicking the plus sign (Windows) or the expander arrow (Mac). For instance, expand the Font category to change the font.

If you've already set font, size, and color formatting for your style via the Property Inspector, then you'll see those settings in the Font-Family, Font-Size, and Color fields. Currently set properties always appear in blue; properties that are not set appear in black.

5.

In the right hand column, select the attribute that you want to change and then choose a new setting.