Dreamweaver.MX.1002004.The.Missing.Manual [Electronic resources] نسخه متنی

6.1 Cascading Style Sheet Basics

If you've used styles in word processing programs like Microsoft Word or page layout
programs like Quark XPress, Cascading Style Sheets (CSS) will feel familiar. A style is simply a rule describing how to format a particular piece of HTML. (A style sheet is a set of these canned styles.)

You might create a single style, for example, that formats text with the font Arial,
colored red, and with a left margin of 50 pixels. You can also create styles specifically
for working with images; for instance, a style can align an image along the right edge
of a Web page, surround the image with a colorful border, and place a 50-pixel margin
between the image and the surrounding text.

Once you've created a style, you can apply it to text, images, or other elements on a
page. For example, you could select a paragraph of text and apply a style to instantly
change the text's size, color, and font. You can also create styles for specific tags, so
that all <h1> tags in your site, for example, are displayed in the same style, no matter
where they appear.

6.1.1 Why Use CSS?

Although HTML alone provides basic formatting options for text, images, tables, and
other Web page elements, Cascading Style Sheets have many advantages that make
them a superior choice for many formatting tasks. In fact, the World Wide Web Consortium
(W3C), the organization responsible for defining standards for the Web, has already phased out the <font> tag from the current HTML standard in favor of CSS.
(For a list of other obsolete tags, see
www.codehelp.co.uk/html/deprecatedl
.)

UP TO SPEED

Getting to Know (and Love) CSS

Cascading Style Sheets are an excitingand complexaddition
to your Web building tool kit, worthy of entire books
and Web sites on this topic alone. For example:

For an excellent tutorial on CSS, visit W3 Schools'
CSS tutorials at
www.w3schools.com/css/
.

If you want to get help and learn more about CSS,
the CSS-Discuss mailing list (
www.css-discuss.
org/
) gives you access to a great community of
CSS enthusiasts. Just be prepared for an overflowing
inbox, and be aware of the list etiquette spelled
out on the list's home page.

You'll also find a helpful collection of wisdom
generated from the CSS-Discuss mailing list at

css-discuss.incutio.com/
. This site provides
insider tips, tricks, and resources for solving many
common CSS problems.

For the ultimate source of information, turn to
the World Wide Web Consortium's Web site:
www.w3.org/Style/CSS/
. The W3C is the body
responsible for many of the standards that drive
the Webincluding HTML and CSS.

For a great list of CSS-related sites, visit the Information
and Technology Systems and Services
Web site at the University of Minnesota Duluth:

www.d.umn.edu/itss/support/Training/Online/
webdesign/cssl
.

If you just love to curl up by the fireplace with a
good computer book, Cascading Style Sheets: The
Definitive Guide by Eric Meyer (O'Reilly) can't be
beat. Eric's Web site provides a lot of helpful information,
too:
meyerweb.com/eric/css/
.

Finally, you don't have to look any further than your own
desktop for the ultimate reference to each CSS property.
Dreamweaver's built-in Reference window provides instant
access to concise information on Cascading Style Sheets (see
the box on Section 10.5).

But even if the threat of obsolescence doesn't motivate you to use CSS, consider this:
Style sheets offer far more formatting choices than HTML. With CSS, you can format
paragraphs as they appear in a book or newspaper (the first line indented and
no space between each paragraph, for example) and control the leading (the space
between lines of type in a paragraph). When you use CSS to add a background image
to a page, you get to decide how (and whether) it tiles (repeats). HTML can't even
begin do any of these things.

Even better, CSS styles take up much less space than HTML's <font> tag formatting.
You can usually trim a lot of kilobytes from text-heavy Web pages using CSS while
maintaining a high level of formatting control. As a result, your pages look great and
load faster.

Style sheets also make updating your site easier. As mentioned earlier, when you edit
a CSS style, Dreamweaver immediately makes that change ripple through your site,
wherever that style is used. You can thus completely change the appearance of a site
by simply editing a single style sheet.

Cascading Style Sheets may sound like a cure-all for HTML's anemic formatting
powers, but they can be tricky to use. For example, CSS support varies from browser
to browser, so you need to test your pages thoroughly in a wide variety of browsers.
Netscape Navigator 4 in particular often displays perfectly valid CSS code as a
garbled mess, but even modern browserslike Internet Explorer 5 for Windows,
Mozilla, and Safari and Opera for the Machave their share of weird CSS-behavior
(see Section 6.7.4).

Fortunately, Dreamweaver MX 2004 is better than ever at displaying complex CSSbased
designs, so you can develop your general design in Dreamweaver, and use the
preview feature to fine-tune your designs for different browsers.

6.1.2 Internal vs. External Style Sheets

As you create new styles and add them to style sheets, you can then store these style
sheets either internally, in the Web page itself, or in another file called an external
style sheet.

Internal style sheets appear in the <head> portion of a Web page and contain styles
that apply to that page. An internal style sheet is a good choice when you have a very
specific formatting task for a single page. For example, perhaps you want to create
styles to format the text and table of a chart that only appears on a single page.

An external style sheet, on the other hand, contains only stylesno HTMLand
can be linked to numerous pages. You can create a single style sheet that affects many
pages of your site, creating uniform formatting throughout. For instance, you can put
a headline style in an external style sheet and link that sheet to every page in the site.
Every headline on the site will then share the same lookinstant design consistency!
Even better, when the boss (or the interior decorator in you) calls up and asks you to change the color of the headlines, you need to edit only a single filethe external
style sheetto update hundreds or even thousands of Web pages.

You can create both types of style sheets easily in Dreamweaver, and you aren't limited
to choosing one or the other. A single Web page can have both an external style sheet
(for styles that apply to the whole site) and an internal style sheet (for page-specific
formatting). You can even attach multiple external style sheets to a single page.

6.1.3 Types of Styles

Styles come in several different flavors. The two most common are class and tag styles.

A class style is one that you create, name, and attach manually to text or an HTML tag.
Class styles work the most like styles in word processing and page layout programs.
For example, if you want the name of your company to be displayed in bold and
red wherever it appears in the text of a Web page, you can create a class style named
Company with boldface and red text color formatting. You would then select your
company's name on the page and apply this style.

You may actually already be using class styles without even knowing it. The Property
inspector's basic text formatting controls, introduced in Chapter 3, generate basic
style sheets whenever you use them. See Section 3.3.5 for more details.

NOTE

Class styles are what previous versions of Dreamweaver called custom styles.

The other major type of CSS style is called a tag style and applies globally to HTML
tags, as opposed to individual selections. For example, suppose you wanted to display
every Heading 1 paragraph (see Section 3.1.2) in the Arial font. Instead of creating a class
style and applying it to every Heading 1 on the page, you could create an HTML tag
style for the <h1> tag. In effect, you redefine the tag so that it's displayed in Arial.
The main benefit of redefining an HTML tag in this way is that you don't have to
apply the style by hand. Since the new style says that all <h1> tags must use Arial,
wherever a Web browser encounters an <h1> tag, it displays the text in Arial, the
specified font.

These HTML tag styles are the easiest way to format a page. For one thing, there's no
need to select the tag and apply the style; the page only needs to contain an instance
of the tag<h1> for examplethat you've redefined.

Nevertheless, there are times when only a class style will do, such as when you want to
apply different styles to various paragraphs on the same page. Simply redefining the
<p> tag won't do the trick, since that would affect all paragraphs. Instead, you'd have
to create a class style for each paragraph format, and then apply the styles by hand.

NOTE

In addition to classes and tag styles, other types of styles provide added control for particular situations.
Dreamweaver considers these advanced styles, and you can read about them on Section 6.6.

Dreamweaver.MX.1002004.The.Missing.Manual [Electronic resources] نسخه متنی

فارسی

کردی

العربیه

اردو

Türkçe

Русский

English

Français

کانال فیلم من

تبیان من

فایلهای من

کتابخانه من

پنل پیامکی

وبلاگ من

اینجــــا یک کتابخانه دیجیتالی است

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی