Tải bản đầy đủ - 0 (trang)
Chapter 4. Introducing Cascading Style Sheets

Chapter 4. Introducing Cascading Style Sheets

Tải bản đầy đủ - 0trang

Cascading Style

Sheet Basics

Cascading Style Sheet Basics

If you’ve used styles in programs like Microsoft Word or Adobe InDesign, CSS will

feel familiar. A style is simply a rule describing how a browser should format a particular HTML tag. A style sheet is a collection of these styles.

You can 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 images; for instance, you can create a style that aligns an image along the right

edge of a web page, surrounds the image with a colorful border, and adds a 50-pixel

margin between the image and the surrounding text.

Once you create 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 it to instantly

change the text’s size, color, and font. You can also create styles for specific tags, so

that, for example, a browser displays all

elements in the same style, no matter

where they appear on your site.

Why Use CSS?

In the past, HTML alone provided basic formatting options for text, images, tables,

and other web page elements. But today, professional web designers use CSS to style

their pages. In fact, the older HTML tags used to format text and other page elements have been phased out by the World Wide Web Consortium (W3C), the organization that defines Web standards, in favor of CSS. And following along with

industry practice, Dreamweaver CS5.5 has made it impossible (unless you write the

code yourself) to add obsolete HTML tags, such as the tag.

CSS has many benefits over HTML. With it, you can format paragraphs to resemble

those that appear in a book or newspaper (with the first line indented and no space

between paragraphs, 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 to do

any of these things.

Even better, CSS styles take up much less space than HTML’s formatting options,

such as the much-hated tag. CSS usually shaves off a lot of kilobytes from

text-heavy pages, while maintaining a high level of formatting control. As a result,

your pages look great and load faster.

Style sheets also make it easier to update your site. You can collect all your styles

into a single file linked to every site page. When it’s time to change every

tag to

lime green, you edit a style in the style sheet file, and that change immediately ripples

throughout your site, wherever you used that style. You can thus completely change

the appearance of a site simply by editing a single style sheet.


dreamweaver cs5.5: the missing manual


Cascading Style

Sheet Basics

Up To SPeed

Getting to Know (and Love) CSS

Cascading Style Sheets are an exciting—and complex—

addition to your web-building toolkit, worthy of entire

books and websites. 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

Sitepoint CSS Forums (www.sitepoint.com/forums/

css-53/) are always busy with advice from a great

community of CSS enthusiasts.

• Sitepoint also provides a great online CSS reference

at http://reference.sitepoint.com/css. This site is a

dictionary-like resource of all CSS properties, including information on which browsers support which

CSS properties.

• You’ll also find a helpful collection of wisdom generated on the CSS-Discuss Wiki at http://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 website: www.

w3.org/Style/CSS. The W3C is the body responsible

for many of the standards that drive the Web—including HTML and CSS. (Beware: This site is the ultimate

authority on the matter, and reads like a college physics textbook.)

• For a great list of CSS-related sites, visit the Information and Technology Systems and Services website

at the University of Minnesota, Duluth: http://tinyurl.


• If you just love to curl up by the fireplace with a good

tech book, try CSS: The Missing Manual by David McFarland (hey, that name rings a bell!). It’s written in

the same style as this book, with in-depth coverage of

CSS and step-by-step tutorials that guide you through

every facet of this complicated technology.

CSS may sound like a cure-all for HTML’s anemic formatting powers, but truth be told, it’s a bit tricky to use. For

example, CSS support varies from browser to browser, so

you need to test your pages thoroughly on a variety of


Fortunately, Dreamweaver is better than ever at displaying

complex CSS-based designs, so you can develop your general design in Dreamweaver and then use its preview feature to fine-tune your designs for different browsers. Even

better, use Adobe’s BrowserLab service to generate screenshots of your page taken from a wide range of browsers on

both Windows and Mac computers. You’ll learn how to use

this service on page 748.

Internal vs. External Style Sheets

As you create new formatting styles, you’ll add them to a style sheet that you store

either in the web page itself (in which case it’s an internal style sheet), or in a separate

file called an external style sheet.

Internal style sheets appear in the portion of a web page, and contain styles

that apply only 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, if the marketing department wants a one-page online “flyer” with a unique format and its own distinctive


chapter 4: introducing cascading style sheets



Cascading Style

Sheet Basics

Tip: When you create a new page design, it’s often easier to add styles to an internal style sheet. Once

you’re satisfied with the design, you can export the styles to an external style sheet—for use by all your

site’s pages—as described on page 115.

An external style sheet, on the other hand, contains only styles—no HTML—and

you can link numerous pages to it. In fact, you can link every page on your site to it,

giving your site a uniform, sitewide set of styles. For instance, you can put a headline

style in an external style sheet, and link every page on the site to that sheet. Every

headline on every page then shares the same look—instant 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 file—the external

style sheet—to 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 (to format

just that page). You can even attach multiple external style sheets to a single page.

Types of Styles

Styles come in several flavors. The most common are class, ID, and tag styles.

A class style is one you create, name, and attach manually to an HTML tag or to selected text (in other words, text you select with your cursor). Class styles work much

like styles in word processing and page layout programs. If you want to display the

name of your company in bold and red wherever it appears in a web page, you can

create a class style named company that formats text in boldface and red letters. You

would then select your company’s name on the page, and apply this style to it.

An ID style lets you format a unique item on a page. Use ID styles to identify an

object (or an area of a page) that appears only once—like a website’s logo, copyright

notice, main navigation bar, banner, or a particular field in a form. Designers frequently use IDs when they create CSS-based layouts like those you’ll learn about in

Chapter 9. An ID style is similar to a class style in that you name the style and apply

it manually. But you can apply a class to many different elements on a page, and you

can apply an ID to only one tag or object per page. (It’s okay to use multiple IDs on

a single page, so long as each ID name is different.)

The other major type of CSS style is called a tag style, and it applies to an individual

HTML tag globally, as opposed to individual pages or selections. Suppose you wanted to display every Heading 1 paragraph in the Arial font. Instead of creating a class

style and applying it to every Heading 1 on the page, you could create a tag style for


tag. In effect, you redefine the tag so that a browser displays it in Arial.

The main benefit to redefining an HTML tag this way is that you don’t have to apply the style by hand. Since the new style says that all

tags must use Arial, a

browser displays

tags in Arial wherever it encounters them.


dreamweaver cs5.5: the missing manual


Creating Styles

These HTML tag styles are the easiest way to format a page. For one thing, there’s

no need to select the tag manually and apply the style; wherever the tag appears, a

browser automatically applies the style.

Nevertheless, sometimes only a class style will do, such as when you want to format

just a few words in a paragraph. Simply redefining the

tag won’t do the trick,

since that would affect the entire paragraph (and every other paragraph on your

site). Instead, you have to create a class style and apply it to just the words you wish

to style. In addition, class styles are handy when you want to format just one instance

of a tag differently from others. If you want to format the introductory paragraph on

a page ne way, and all the other paragraphs on the page a different way, you create

a class style and apply it to that first paragraph. (Another solution is a slightly more

complicated, but more flexible, type of style called a descendent selector—you’ll read

about those later, on page 315.)

Note: In addition to class and tag styles, other types of styles provide added control for particular situations. You can read about these more advanced styles starting on page 313.

Creating Styles

Dreamweaver gives you several ways to create CSS styles. For text, you can use the

Property inspector’s CSS mode to apply a font, font size, font color, font weight, and

alignment to selected text. To create styles for elements other than text (like images

or tables), or to tap into the dozens of other CSS properties not listed in the Property

inspector, use the CSS Styles panel (see Figure 4-1). To get a complete overview of

the style creation process, you’ll look at both methods—starting with the more versatile CSS Styles panel, then moving on to the Property inspector.

Phase 1: Set Up the Style

Dreamweaver gives you many ways to create a new style: On the CSS Styles panel,

click the new style button (which Dreamweaver calls the New CSS Rule button; see

Figure 4-1); right-click anywhere in the CSS Styles panel, and then, from the menu

that appears, select New. Alternatively, choose Format➝CSS Styles➝New. The New

CSS Rule dialog box appears (Figure 4-2), where you begin creating your new style.

(In the technical language of CSS, a style is actually called a rule, but for simplicity’s

sake this book uses the term style. After all, Cascading Rule Sheets doesn’t have much

of a ring to it.)

chapter 4: introducing cascading style sheets



Creating Styles

Figure 4-1: 

With the “All” button selected, the CSS Styles panel lists the names of all the styles the current page

uses, including those in both external and internal

style sheets. Here, one external style sheet—main.

css—contains five styles. The first two are tag styles

(notice that the names match various HTML tags),

while the next three are ID styles (note the # at

the beginning of the name), and the last three are

class styles (note the period before the name).

You also see one tag style defined in an internal

style sheet—the one listed below “