Graphics Programs Reference
a new external style sheet fi le, in an existing external style sheet fi le, or only within the
current document. When you save the fi le in the current document, Dreamweaver cre-
ates an internal style sheet that embeds (or inserts) the styles in the head of the current
Web page and applies them only throughout that document. Creating an internal style
sheet is useful because it enables you to update the look of all elements on which a style
is used throughout the page. For example, if you wanted to change the look of all the
subheadings in a page, you could change the subheading style instead of selecting and
modifying each subheading individually. An external style sheet is a separate fi le that
contains all the CSS styles used in a Web site. When you defi ne styles in an external style
sheet, you can use the styles in any page in the Web site to which you connect that style
sheet. Editing a style in the external style sheet will update all instances in which that
style is used throughout the site. This is the most powerful way to use styles.
Every CSS style (or rule) consists of two parts: the selector and the declaration. The
selector is the name of the style. The declaration defi nes the attributes that are included
in the style. After you select the type, the name, and the location of the style, you can
choose the various attributes to be included in the declaration for the style. The eight
categories of attributes that you can combine to create a style are as follows:
1. Type. Font and type settings and attributes such as font family, font size, color,
decoration, and weight. More type attribute choices are available here than in the
Property inspector when text is selected.
2. Background. A color or an image, fi xed or scrolling, that can be placed behind a
page element such as a block of text. CSS background attributes overlay the Web
page background designated with the page properties and can be added behind
any page element.
3. Block. Spacing and alignment settings for tags and attributes. Examples include the
spacing between words, letters, and lines of text; the horizontal and vertical align-
ment of text; and the indentation applied to the text.
4. Box. Attributes that control the placement of elements in the page. When you select
a letter, a word, a group of words, a graphic, or any other element, a selection box
surrounds all the selected elements. Box attributes control the characteristics of the
selection box, enabling you to set margins, padding, fl oat, and so on.
5. Border. The dimensions, color, and line styles of the borders of the selection box
that surround elements.
6. List. The number format and its position used with ordered lists and the bullet
shape or image and its position used with unordered lists.
7. Positioning. Attributes that determine how a tag or selected content is positioned in
8. Extensions. Attributes that control page breaks during printing, the appearance of
the pointer when positioned over objects in the page, and special effects added to
objects. Most browsers do not support all extensions' attributes.
Modifying HTML Tags
The simplest way to create a CSS style is to redefi ne an existing HTML tag. Often, modi-
fying an existing HTML tag can make it more useful. For example, the Heading 1 tag,
<h1>, is an HTML tag that was introduced in an early version of HTML. It was created to
give designers some control over the size at which text was displayed. Because design-
ers did not have a lot of control over text size at the time, the format of the Heading 1
tag changes based on how each user's browser interprets the tag, making the heading's
layout and appearance inconsistent and limited. However, when you set page properties,
you selected size and color attributes for the Heading 1 tag, <h1>, and Dreamweaver
created a style that customized the appearance of that tag. Customizing the existing
Heading 1 tag gives you a consistency that the <h1> tag would otherwise lack, and
makes the tag useful.