Tải bản đầy đủ - 0trang
Chapter 4. Introducing Cascading Style Sheets
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
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
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
• 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
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
tags in Arial wherever it encounters them.
dreamweaver cs5.5: the missing manual
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.
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
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 “