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

6.7 Style Properties

Cascading Style Sheets are a powerful and complex technology, providing many more
formatting options than HTML alone. In fact, Dreamweaver lets you set 67 different
CSS properties using the Style Definition window. The following pages cover each of
the eight Style Definition categories and the properties available from each. (If you'd
prefer an online reference, don't miss the built-in CSS reference available from the
WindowReference command; it's described more completely on Section 10.5.)

As noted earlier, not all Web browsers can display the many different formatting options available through Cascading Style Sheets. Dreamweaver, in its zeal to give you access to as many options as possible, actually lets you set properties that don't work in any browser at all (such as the Page Break property described on Section 6.7.8). It can be frustrating to find a really cool style sheet property, only to realize that it doesn't work in most Web browsers. There is hope, however. Here are several sites whose charts detail which CSS properties work on which browsers: www.westciv.com/style_master/academy/browser_support/ macedition.com/cb/resources/abridgedcsssupportl devedge.netscape.com/library/xref/2003/css-support/

6.7.1 Type Properties

As the name implies, the Type category of the Style Definition window lets you set
formatting options that affect text (see Figure 6-15).

Font. You choose a font for the style from the Font menu. As when using the
Property Inspector to select a font (see Section 3.3.2), you choose from groups of fonts
rather than the specific one you have your heart set on. Unfortunately, your array
of choices is no better than in HTML. Dreamweaver also lets you create your own
"first-choice, second-choice..." font choices from this menu, exactly as described
on Section 3.3.2.

Size. Unlike HTML, where font size is defined using a number from 1 to 7, CSS
offers a dizzying array of size choices.

You'll visit the Type
category frequently
while creating
CSS styles. You
set many different
properties for formatting
textthe
most common use
of CSSand be
assured that, unlike
a lot of other
CSS properties,
type settings work
well in almost
all browsers
that understand
Cascading Style
Sheets.

If you want to make sure your text appears at the same size regardless of browser
or platform, type a number in the Size box and select Pixels from the unit menu
to its right. 12 pixels is a good size for regular type.

There's one downside to this approach: Pixel values prevent Windows visitors
using Internet Explorer from adjusting the size of text on the screen using their
Web browsers' text size up/down controls. (Other Windows browsers and most
Mac browsers let users resize pixel-sized text.)

Another option is to use ems. An em is a relative measurement equal to a Web
browser's default font size. In Internet Explorer for Windows, for example, the
default font size is 16 pixels, so 1 em equals 16 pixels. However, since an em is a
relative measurement, if some visitor changed her default font size to 20 pixels,
any text sized to 1 em would appear 20 pixels tall in her browser.

NOTE

Setting sizes for fonts is a hotly debated topic in CSS circles. For some more in-depth discussion, check
out the resources on this page:
css-discuss.incutio.com/?page=FontSize
.

Weight. Weight refers to the thickness of the font. The Weight menu offers thirteen
different choices. Normal and bold are the most common, and work in all browsers
that understand CSS. See Figure 6-16 for details.

Style. In this peculiar instance, Style means italic, oblique, or normal. Technically,
italic is a custom-designed, emphatic version of a type face, like this. Oblique, on
the other hand, is just a computerized adaptation of a normal font, in which each letter is inclined a certain number of degrees to the right. In practical application,
there's no visible difference between italic and oblique.

The numeric values 100-900 are
intended to work with fonts that have
many different weights (ultrathin, thin,
light, extra bold, and so on). 400 is normal;
700 is the same as bold. However,
in today's browsers, you'll notice no
difference between the values 100-500,
and only slight changes in the thickness
of the type at each higher level. The
900 option results in extra bold.

Variant. This pop-up menu simply lets you specify SMALL CAPS type, if you likea
slightly formal, fancy-looking type style much favored by attorneys' offices.

Line Height. Line height, otherwise known as leading, refers to the space between
lines of text in a paragraph (see Figure 6-17). To allow more space between lines,
set the line height greater than the font size. (If you type a number without a %
sign, Dreamweaver assumes you're specifying a line height in pixels. You can change
the units of measurement using the pop-up menu to the right of the Line Height
field.)

A good approach for line height is to type in a percentage measurement, such as 120%, which is relative to the size of the text (see "Size" above); if your text is 10 pixels tall, the space from the base of one line of text to the next is 12 pixels (120% of 10). Now, if you change the size of the text, the relative space between lines remains the same.

Normal, the default setting (top paragraph in Figure 6-17), uses a line height that's
slightly larger than the height of the text. You don't get access to the pop-up menu
of measurement units (pixels, points, %, and so on) unless you choose (value)
from this menu.

Control the space
between lines with
the Line Height
property. In this
example, each paragraph's
text is set in
14-pixel Arial. With
CSS, you can make
lines bump into each
other by setting a
low line height value
(2nd paragraph
from top), or spread
them far apart by
using a larger value
(3rd paragraph from
top).

Case. From this menu, you can set up automatic capitalization of the text in this
style. To capitalize the first letter of each word, choose capitalize. The uppercase
option gives you all-capitals typing, while lowercase makes all letters lowercase.
The factory setting is none, which has no effect on the text.

Decoration. This strange assortment of five checkboxes let you dress up your text,
mostly in unattractive ways. Underline, Overline, and Line-through add horizontal
lines above, below, or right through the affected text, respectively. Turning on Blink
makes affected text blink on and off; unless you want to appear on one of those
"worst Web site of the week" lists, avoid it. You can apply any number of decorative
types per style, except none.

On certain forward-thinking Web sites these days, text links don't appear underlined. Instead, they show up in a different color. You, too, can perform this trendy design stunt, just by redefining the <a> tag with Cascading Style Sheets, turning on the none option for the Decoration property. Voila! No more underlines. Use this technique with care, however; most Web surfers have grown accustomed to associating underlines with clickable links. If you do remove an underline, use some other cuebold and colorful text, for exampleto indicate that the text is a link. In addition, using pseudo-classes (Section 6.6.1) you can add or remove the underline for certain states of a link. For example, you can show the link on a normal <a> tag, but make it disappear on the hover state (when a visitor's mouse moves over the link), or vice versa.

Color. Set the color of the style's text using Dreamweaver's color box, which is
described on Section 1.3.3.

6.7.2 Background Properties

While you're probably familiar with changing the background colors of Web pages,
tables, and table cells, Cascading Style Sheets provide even more options for adding
colors and images to the backgrounds of your styles (see Figure 6-18).

The Background category
of Cascading
Style Sheet properties
lets you specify
a background color
for a style and control
the placement of
background images.
The "Fixed" option
for the Attachment
property is not
displayed within
Dreamweaver, so to
get an accurate view
of this property, you
need to preview it in
a Web browser.

6.7.2.1 Background Color

Any object can have a background color: a single word, a paragraph, or the Web page
itself. Using this color box, you can redefine the <td> (table cell) tag, for example,
using a light blue background color (every table cell on the page gets filled with that
light blue color).

6.7.2.2 Background Image

Add a background image to the style by clicking the Browse button and selecting an
image from your site. You can also type an absolute URL, starting with http://, to use
an image off the Web. (Remember that Dreamweaver can't display images specified
with an absolute URL. You'll have to preview the page in a Web browser connected
to the Internet to see the effect.)

To fill your entire page background with some repeating graphic, you could either
redefine the <body> tag using this property, or create a class style with a Background
Image property and apply it to the <body> tag as described on Section 6.3.2.

You can even control how the image tiles (repeats) and where it's placed on the page
(see below). Furthermore, you can add background images to any individual element
on your page: paragraphs, tables, layers, and so on.

NOTE

One common byte-saving technique is to create an image that looks like a button; use it for the
background image of navigation links on a page. The links themselves include text"Home," "About Us,"
and so onbut the background of each link looks like a graphical button. The main benefit of this technique
is that you don't need to create separate graphics for each button.

6.7.2.3 Repeat

Background imagesas the background of either a page (Section 1.3.3) or of a table (Section 7.6.3)normally fill the available space by tiling (that is, repeating over and over again)
across and down. A small image of a carrot added to the background of a page, for
example, appears as a field of carrotsone next to each other, row after row.

But with CSS, you can control how the background image repeats. You can select
from the following options:

repeat tiles the image horizontally and vertically. This is the factory setting.

repeat-x and repeat-y display a horizontal and vertical band of images, respectively.
So if you'd like to have a single row of images appear at the top of a page, use the
repeat-x option.

no-repeat displays the image once.

6.7.2.4 Attachment

By default, the background image on a page scrolls with the rest of the page, so that
as you scroll to read a long Web page, the image scrolls along with the text.

But using CSS, you can lock the image in place by choosing fixed from the Attachment
menu. For example, say you added your company's logo to the background of a page and set the Repeat property (described above) to no-repeat. The logo now
appears only once in the upper-left corner of the page. If you use the fixed option
for this property, when a visitor scrolls the page, the logo remains fixed in the upper
left corner. (Choosing scroll from the Attachment menu means, of course, that the
background image will scroll with the page.)

NOTE

The fixed setting doesn't work in Netscape 4, and causes strange screen behavior for Internet Explorer
5.1 for Mac.

6.7.2.5 Horizontal and Vertical Position

Using these controls, you can specify a position for the affected text or other Web
page element. The Horizontal position options are: left, center, right, and (value),
which requires you to type an exact number in the box and select a unit of measurement
from the menu to the right. Similarly, the Vertical position options include top,
center, bottom, and (value).

These positioning options refer to the position of the styled object. For example, suppose
you created a class style that included a background image with horizontal and
vertical position both set to center. Then you applied that class style to a paragraph.
The background image would appear in the center of that paragraph, not in the center
of the Web page (see Figure 6-19).

Background images aren't just for the
body of a Web page. You can apply styles
that include background images to any
selection, even a paragraph of text. Here,
a class style with a background image
is set to no-repeat (the image won't tile)
and to center horizontally and vertically.
The style was applied to the body of the
page, resulting in the graphic appearing
smack dab in the middle of the window.
Meanwhile, the same style was applied to
a paragraph; this time, the image floats
right in the middle of the paragraph.

Likewise, if you set the horizontal position of the image to 10 pixels and the vertical
position to 20 pixels, the image would start 10 pixels from the left edge of the paragraph
and 20 pixels from the top edge.

And if you wanted to place an image in the exact middle of the page, you'd choose
center from both the Horizontal and Vertical Position menus; set the Repeat property
to no-repeat; and apply this style to the page's <body> tag (see Figure 6-19).

6.7.3 Block Properties

The Block Properties panel is a hodge-podge of CSS settings that affect how letters
and words are displayed (see Figure 6-20).

The Block Style properties
category is an
eclectic mix consisting
mostly of text styles.
However, the Display
property can be used
on images, tables, and
any other selection or
HTML tag. Although
the list is long, most
of these options
don't work in today's
browsers.

Despite this category's name, these properties don't just apply to block-level elements
(paragraphs, headlines, and so on). You can apply a style with these properties to even
a single word or two. (The one exception is the Text Align property, which can apply
only to paragraphs and other block-level elements.)

Word Spacing. This property helps you clean up text by adding or removing space
between words. The default value, normal, leaves a normal, single space between
words. If you want words in a sentence to be spaced apart like this, then
type a value of about 10 pixels. (Choose Value from the first pop-up menu, then
the units you want from the second one.) The bigger the number, the larger the
gap between words. You can also remove space between words by using a negative
numberagreat choice when you want to make your pages difficult to read.

Letter Spacing. This property works just like word spacing, but governs the space
between letters. To add space l i k e t h i s, type a value of about 5 pixels. The result
can make long passages of text hard to read, but a little space between letters can
add a dramatic flair to short headlines and movie titles.

Vertical Alignment. With this property, you can control the alignment of an object
such as an image or movierelative to other items around it. This feature
works a lot like the image-alignment options discussed on Section 5.2.4 (see Figure 5-6.)

Two notable additionssub and superalso let you create superscript and
subscript styles when used on text. This property is a godsend when you want to
properly format a trademark, copyright symbol, or footnote reference. For example,
in the trademark symbol in National Exasperater™, the letters TM were selected
and the super alignment applied.

The sub and super alignment options don't change the size of text. If you want to create true subscript or superscript (for chemical symbols, trademark or copyright symbols, and so on), you should also use a smaller font size in the style; 75 percent works great.

Text Align. This property controls the alignment of a block-level element like a
paragraph or table. You can choose from among the usual suspectsleft, center,
rightor even justify. (Like the text in this paragraph, justified text has both the
left and right edges of the text aligned.)

Avoid this option, however. Because Web browsers don't have the advanced controls
that page-layout software does, they usually do an awful job of justifying text on
a computer screen. The results are usually difficult to read and ugly.

Text Indent. This useful option lets you indent the first line of a paragraph. If
you enter .25 and choose in from the pop-up menu, you give each paragraph an
attractive quarter-inch first-line indent, exactly as in a real word processor.

You can also use a negative number, which makes the first line extend past the left
margin of the paragraph, creating a hanging indent (or outdent)a nice effect for
bulleted lists or glossary pages. (Beware: some browsers have trouble with negative
values for this property.)

Whitespace. This property controls how the browser displays extra white space
(spaces, tabs, returns, and so on). Web browsers normally ignore extra spaces in
the HTML of a page, reducing them to a single space character between words
and other elements (see Section 2.1.1.1). The pre option functions just like the HTML
<pre> tag: Extra white space (like tabs, multiple spaces, and carriage returns) in
the HTML code appear in the document window (see Section 3.1.3 for more on this
option). The nowrap option prevents lines from breaking (and wrapping to the
next line) when they reach the end of the browser window.

Display defines how a Web browser should treat a particular block level element
like a paragraph. You may be overwhelmed by the range of choices for this propertyand you may be underwhelmed when you find out that most of these options
aren't supported by most browsers.

Most CSS-capable browsers understand only three of the options: none, inline, and
block. The block option treats any item styled with this property as a blockseparated
from other content by space above and below it. (This is how paragraphs
and headings normally appear.)

The inline option treats the item like part of the current block or paragraph, so
that any item styled with this property (like a picture) flows together with other
items around it, as if it were part of the same paragraph.

The none option is the most interesting and useful: it turns off the display of an
item. In other words, any text or item styled with this option doesn't appear on
the page. You can use JavaScript programming to switch this property on and off,
making items seem to appear and disappear. (Dreamweaver doesn't provide any
simple way to do this, but adventurous souls may want to check out the following
tutorial, which shows how to create an expandable outline using this property:

www.webreference.com/dhtml/column12/outDisplayl
.)

6.7.4 Box Properties

CSS lets you control the space that appears around any affected Web page element.
You work with those properties in the Box category of the CSS Style Definition window
(see Figure 6-21).

Width and Height. You can specify a width and height for any styled object using
these properties. Web designers use these settings most often to control layers,
using Dreamweaver's Layer tools (Section 8.5), but they can also affect other Web
elements. For example, if you want a paragraph to be 100 pixels wide, create a class
style with the Width property set to 100 pixels and apply it to the paragraph.

Float. If you want to move an object to the left or right of the page and have other
content wrap around it, use the Float property. For example, if you want an image
to appear at the right side of the page and have text flow around its left and
bottom edges, choose right from the Float menu. The option behaves just like the
right and left alignment options for images (Section 5.2.4) and tables (Section 7.6.1).

NOTE

The Float property has many uses, from aligning images to the right or left side of the page to creating
drop caps and thumbnail photo galleries. For an excellent introduction and set of tutorials on this subject,
visit
css.maxdesign.com.au/floatutorial/
.

Clear. Clear prevents an element from wrapping around any object with a right
or left Float property (see above). You might want, for example, all Heading 1
paragraphs to stand out on their own lines and not wrap around an image with a
right float. In that case, you'd choose the right option from the Clear menu when
you're styling the <h1> tag.

Padding. Padding is the gap that separates the content of the stylesuch as a
paragraph of text or an imageand its border (see Section 6.7.5). For example, if you put a 1-pixel border around an image and want to add 10 pixels of space between
the image and the border, type 10 into the top padding box and choose pixels from
the pop-up menu. Turn off the "Same for all" box if you wish to set the padding
around each edge separately; then type values into each of the four boxes.

Unfortunately, the Windows version of Internet Explorer doesn't handle the box model correctly. If you set the padding or borders of a style, Internet Explorer often displays the element smaller than on other browsers, ruining the layout of your Web page. For more information on this problem and a clever workaround, visit css-discuss.incutio.com/?page=BoxModelHack . This doesn't affect Windows Internet Explorer 6 if you're creating XHTML pages (see Section 0.2.2).

Margin. The margin is the outermost space surrounding an element (Figure 6-21).
It surrounds the border and padding properties of the style and lets you add space
between one element and another. Use any of the valuespixels, percentages, and
so onthat CSS supports.

Top: In the CSS Box Model, every style is
composed of multiple boxes, one inside
the other. Each box controls certain display
properties of the style. For example, the
outermost box of a style is called the
margin. It controls the space between the
border of the style and any other objects
around the styled object such as images,
paragraphs, or tables.

Bottom: This dialog box controls the
margins and padding around a styled
object that uses the Box category. Its fields
correspond to the measurements shown
in the top diagram. For a discussion of
the box model from the World Wide Web
Consortium, visit: www.w3.org/TR/RECCSS2/
boxl.

You can also use the Margin properties to eliminate a margin entirely, if, for example, you don't like the space that browsers automatically insert between paragraphs. Type 0 in the Top margin box and 0 in the Bottom margin box to create a style with no top or bottom margins.

6.7.5 Border Properties

Only a few elements can have borders in HTML: tables, images, and cells. With CSS,
however, you can add a border to any object from an image to a paragraph to a single
exclamation point (see Figure 6-22). Even better, you can control each side of the
border independently with its own width and color settings, or even turn off some
parts of the border.

Top: Add colorful and
stylish borders to paragraphs,
images, tables,
and links with the CSS
Border properties. Turning
on only the bottom
border for a paragraph
is a great way to add a
horizontal rule between
paragraphs. While
HTML's Horizontal Rule
object also does this,
only CSS lets you control
the color.

Bottom: The eight different
border styles provide
interesting visual diversity
to the otherwise
plain border.

Style. This menu lets you specify the type of line used for the border. Dreamweaver
gives you more options than a frame shop: none (the default choice), dotted,
dashed, solid, double, groove, ridge, inset, and outset. You can use a different style
for each edge, or select a style from the top menu and turn on the "Same for all"
box to apply the same style to all four borders. (Bear in mind that Dreamweaver
itself can't display these styles. It always shows a solid border. You'll have to preview
the page in a Web browser to see the effect.)

Border Widths. You can set the border around each side of a styled object separately.
Choose one of the preset widthsthin, medium, thick, or autoor, if you
choose (value) from the pop-up menu, you can type a value into the Width box
and select a unit of measurement from the pop-up menu to the right. Again, you
can choose from a wide range of types: pixels, percentage, inches, and so on. If you
want to eliminate the border on one side, type 0 into the appropriate box.

Border Colors. You can color each of the four borders individually using the
ubiquitous Dreamweaver color box (Section 1.3.3). If you don't assign any colors, but
do assign border widths, Dreamweaver makes the borders black.

NOTE

You have to select a style from the pop-up menu to see the borders. If you leave this option blank or
select "none," you won't see the borders even if you set the width and color.

6.7.6 List Properties

To exercise greater control over bulleted and numbered lists, use the CSS options on
the List panel of the Style Definition window (see Figure 6-23).

Type. Select the type of bullet to be used in front of a list item. Options include:
disc, circle, square, decimal (1., 2., 3.), lower-roman (i, ii, iii), upper-roman (I, II,
III), lower-alpha (a, b, c), upper-alpha (A, B, C), and none (no bullet at all).

Bullet Image. For the ultimate control of your bullet icon, skip the boring options
preprogrammed into a Web browser (like disc, circle, square, or decimal) and supply
your own. Click the Browse button and select a graphics file from your site folder.
Make sure the graphic is appropriate bullet material: in other words, small.

Position. This property controls how the bullet is placed relative to the list item's
text. The outside option places the bullet outside of the margin of the text, exactly
the way bulleted lists normally appear on a Web page. Inside, on the other hand,
displays the bullet within the text margin, so that the left edge of the bullet aligns
with the left margin; Figure 6-23 should make the effect clearer.

6.7.7 Positioning Properties

Cascading Style Sheets may be useful for formatting text and adding background
colors and margins to objects, but this technology is also intended as a structural aid
for laying out Web pages. You'll learn about these properties and how to set them
on Section 8.3.1.

6.7.8 Extensions

The final category in the Style Definition window is listed last for a good reason: not
all Web browsers support them properly.

Page Break. This property specifies, when your visitor makes a printout of your
page, whether a page breaks before or after the styled object. You could apply this,
for example, to the <h1> tag in order to make sure each printed page begins with
a Heading 1 paragraph.

Cursor. Of all the Extension properties, this one holds the most promise. When
a visitor moves the mouse over an object with this style applied, this property
changes the cursor shape to one of fifteen different designs (a hand, an hourglass,
or a crosshair, for example). Internet Explorer 4 and above, Netscape Navigator 6
and above, Mozilla, and Opera 5 and above all recognize this professional-looking
property.

Filter. The Filter property can apply many interesting visual effects to a page; the
Filter property, for example, can add a drop shadow to an image. Unfortunately, this Microsoft-only option works in the Windows version of Internet Explorer,
and no other browsers.

Top: Take control of your
bulleted and numbered
lists using the CSS Style
Definition window's List
panel. With Cascading
Style Sheets, you can even
supply your own graphic
bullets.

Bottom: A bullet-crazed
Web page, for illustration
purposes. Parading down
the screen, you can see
"inside" bullets, "outside"
bullets, and bullets (inside
and outside) made from
graphics.