Dreamweaver CS4 Resources
|
Set CSS properties
You can define properties for CSS rules such
as text font, background image and color, spacing and layout properties,
and the appearance of list elements. First create a new rule, then
set any of the following properties.
Define CSS type propertiesYou use the Type category in
the CSS Rule Definition dialog box to define basic font and type
settings for a CSS style.
- Open the CSS Styles panel (Shift + F11) if it
isn’t already open.
- Double-click an existing rule or property in the top
pane of the CSS Styles panel.
- In the CSS Rule Definition dialog box, select Type, and
then set the style properties.
Leave any of the following properties empty if they are
not important to the style:
- Font-family
- Sets the font family (or series of families) for the
style. Browsers display text in the first font in the series that
is installed on the user’s system. For compatibility with Internet
Explorer 3.0, list a Windows font first. The font attribute is supported
by both browsers.
- Font-size
- Defines the size of the text. You can choose a specific
size by selecting the number and the unit of measurement, or you
can choose a relative size. Pixels work well to prevent browsers
from distorting your text. The size attribute is supported by both
browsers.
- Font-style
- Specifies Normal, Italic, or Oblique as the font style.
The default setting is Normal. The style attribute is supported
by both browsers.
- Line-height
- Sets the height of the line on which the text is placed.
This setting is traditionally called leading. Select
Normal to have the line height for the font size calculated automatically,
or enter an exact value and select a unit of measurement.The line
height attribute is supported by both browsers.
- Text-decoration
- Adds an underline, overline, or line-through to the text,
or makes the text blink. The default setting for regular text is
None. The default setting for links is Underline. When you set the
link setting to none, you can remove the underline from links by
defining a special class.The decoration attribute is supported by
both browsers.
- Font-weight
- Applies a specific or relative amount of boldface to
the font. Normal is equivalent to 400; Bold is equivalent to 700.
The weight attribute is supported by both browsers.
- Font-variant
- Sets the small caps variant on text. Dreamweaver does not display this attribute
in the Document window. The variant attribute is supported by Internet
Explorer but not Navigator.
- Text-transform
- Capitalizes the first letter of each word in the selection
or sets the text to all uppercase or lowercase. The case attribute
is supported by both browsers.
- Color
- Sets the text color. The color attribute is supported
by both browsers.
- When you are finished setting these options, select another
CSS category on the left side of the panel to set additional style
properties, or click OK.
Define CSS style background propertiesUse the Background category of the
CSS Rule Definition dialog box to define background settings for
a CSS style. You can apply background properties to any element
in a web page. For example, create a style which adds a background color
or background image to any page element, for example behind text,
a table, the page, and so on. You can also set the positioning of
a background image.
- Open the CSS Styles panel (Shift+F11) if it isn’t
already open.
- Double-click an existing rule or property in the top
pane of the CSS Styles panel.
- In the CSS Rule Definition dialog box, select Background,
then set the style properties.
Leave any of the following properties empty if they are
not important to the style:
- Background Color
- Sets the background color for the element. The background color
attribute is supported by both browsers.
- Background Image
- Sets the background image for the element.The background
image attribute is supported by both browsers.
- Background Repeat
- Determines whether and how the background image is repeated.
The Repeat attribute is supported by both browsers.
No Repeat displays the image once at the beginning of the
element.
Repeat tiles the image horizontally and vertically behind
the element.
Repeat‑x and Repeat‑y display a horizontal and vertical band
of images, respectively. Images are clipped to fit within the boundaries
of the element.
Note: Use the Repeat property to redefine
the body tag and set a background
image that does not tile or repeat.
- Background Attachment
- Determines
whether the background image is fixed at its original position or
scrolls along with the content. Note that some browsers may treat
the Fixed option as Scroll. This is supported by Internet Explorer
but not Netscape Navigator.
- Background Position (X) and Background Position
(Y)
- Specify the initial position of the background image
in relation to the element. This can be used to align a background
image to the center of the page, both vertically (Y) and horizontally
(X). If the attachment property is Fixed, the position is relative
to the Document window, not to the element.
- When you are finished setting these options, select another
CSS category on the left side of the panel to set additional style
properties, or click OK.
Define CSS style block propertiesYou use the
Block category of the CSS Rule Definition dialog box to define spacing
and alignment settings for tags and properties.
- Open the CSS Styles panel (Shift+F11) if it isn’t
already open.
- Double-click an existing rule or property in the top
pane of the CSS Styles panel.
- In the CSS Rule Definition dialog box, select Block,
then set any of the following style properties. (Leave the property
blank if it is not important to the style.)
- Word Spacing
- Sets the spacing between words. To set a specific value,
in the pop‑up menu, select Value, then enter a numeric value. In
the second pop‑up menu, select a measurement unit (for example,
pixel, points, and so on).
Note: You can specify negative values,
but the display depends on the browser. Dreamweaver does
not display this attribute in the Document window.
- Letter Spacing
- Increases or decreases space between letters or characters.
To decrease the space between characters specify a negative value,
for example (‑4). Letter spacing settings override justified text
settings. The Letter Spacing attribute is supported by Internet
Explorer 4 and later and Netscape Navigator 6.
- Vertical Align
- Specifies the vertical alignment of the element to which
it is applied. Dreamweaver displays this
attribute in the Document window only when it is applied to the <img> tag.
- Text Align
- Sets how text is aligned within the element. The Text
Align attribute is supported by both browsers.
- Text Indent
- Specifies how far the first line of text indents. A negative
value may be used to create an outdent, but the display depends
on the browser. Dreamweaver displays this
attribute in the Document window only when the tag is applied to
block-level elements. The Text Indent attribute is supported by both
browsers.
- Whitespace
- Determines how white space within the element is handled.
Select from three options: Normal collapses white space; Pre handles
it as if the text were enclosed in pre tags (that
is, all white space, including spaces, tabs, and returns, is respected);
Nowrap specifies that the text only wraps when a br tag
is encountered. Dreamweaver does not display
this attribute in the Document window. The Whitespace attribute
is supported by Netscape Navigator and Internet Explorer 5.5.
- Display
- Specifies whether an element is displayed and if so how
it is displayed. None disables the display of an element to which
it is assigned.
- When you are finished setting these options, select another
CSS category on the left side of the panel to set additional style
properties, or click OK.
Define CSS style box propertiesUse the Box
category of the CSS Rule Definition dialog box to define settings
for tags and properties that control the placement of elements on
the page.
You can apply settings to individual sides of an
element when applying padding and margin settings, or use the Same
For All setting to apply the same setting to all sides of an element.
- Open the CSS Styles panel (Shift + F11) if it
isn’t already open.
- Double-click an existing rule or property in the top
pane of the CSS Styles panel.
- In the CSS Rule Definition dialog box, select Box, and
set any of the following style properties. (Leave the property blank
if it is not important to the style.)
- Width and Height
- Sets the width and height of the element.
- Float
- Sets which side other elements, such as text, AP Divs,
tables and so on, will float around an element. Other elements wrap
around the floating element as usual. The Float attribute is supported
by both browsers.
- Clear
- Defines the sides that do not allow AP elements. If an
AP element appears on the clear side, the element with the clear
setting moves below it. The Clear attribute is supported by both
browsers.
- Padding
- Specifies the amount of space between the content of
an element and its border (or margin if there is no border). Deselect
the Same For All option to set the padding for individual sides
of the element.
- Same For All
- Sets the same padding properties to the Top, Right, Bottom,
and Left of the element to which it is applied.
- Margin
- Specifies the amount of space between the border of an
element (or the padding if there is no border) and another element. Dreamweaver displays this attribute in the
Document window only when it is applied to block-level elements
(paragraphs, headings, lists, and so on). Deselect Same For All
to set the margin for individual sides of the element.
- Same For All
- Sets the same margin properties to the Top, Right, Bottom,
and Left of the element to which it is applied.
- When you are finished setting these options, select another
CSS category on the left side of the panel to set additional style
properties, or click OK.
Define CSS style border propertiesUse the Border category of the CSS
Rule Definition dialog box to define settings, such as width, color,
and style, for the borders around elements.
- Open the CSS Styles panel (Shift+F11) if it isn’t
already open.
- Double-click an existing rule or property in the top
pane of the CSS Styles panel.
- In the CSS Rule Definition dialog box, select Border,
and set any of the following style properties. (Leave the property
blank if it is not important to the style.)
- Type
- Sets the style appearance of the border. The way the
style appears depends on the browser. Deselect Same For All to set
the border style for individual sides of the element.
- Same For All
- Sets the same border style properties to the Top, Right,
Bottom, and Left of the element to which it is applied.
- Width
- Sets the thickness of the element’s border. The Width
attribute is supported by both browsers. Deselect Same For All to
set the border width for individual sides of the element.
- Same For All
- Sets the same border width to the Top, Right, Bottom,
and Left of the element to which it is applied.
- Color
- Sets the color of the border. You can set each side’s
color independently, but the display depends on the browser. Deselect
Same For All to set the border color for individual sides of the
element.
- Same For All
- Sets the same border color to the Top, Right, Bottom,
and Left of the element to which it is applied.
- When you are finished setting these options, select another
CSS category on the left side of the panel to set additional style
properties, or click OK.
Define CSS style list propertiesThe List category of the CSS Rule Definition
dialog box defines list settings, such as bullet size and type,
for list tags.
- Open the CSS Styles panel (Shift+F11) if it isn’t
already open.
- Double-click an existing rule or property in the top
pane of the CSS Styles panel.
- In the CSS Rule Definition dialog box, select List, and
set any of the following style properties. (Leave the property blank
if it is not important to the style.)
- List style type
- Sets the appearance of bullets or numbers. Type is supported
by both browsers.
- List style image
- Lets you specify a custom image for bullets. Click Browse (Windows)
or Choose (Macintosh) to browse to an image, or type the image’s path.
- List style position
- Sets whether list item text wraps and indents (outside)
or whether the text wraps to the left margin (inside).
- When you are finished setting these options, select another
CSS category on the left side of the panel to set additional style
properties, or click OK.
Define CSS style positioning propertiesThe Positioning style
properties determine how the content related to the selected CSS
style is positioned on the page.
- Open the CSS Styles panel (Shift+F11) if it isn’t
already open.
- Double-click an existing rule or property in the top
pane of the CSS Styles panel.
- In the CSS Rule Definition dialog box, select Positioning,
and then set the style properties you want.
Leave any of the following properties empty if they are
not important to the style:
- Position
- Determines how the browser should position the selected
element as follows:
Absolute places the content
using the coordinates entered in the Placement boxes relative to
the nearest absolutely- or relatively-positioned ancestor, or, if no
absolutely- or relatively-positioned ancestor exists, to the upper-left
corner of the page.
Relative places the content block using the coordinates
entered in the Placement boxes relative to block’s position in the
text flow of the document. For example, giving an element a relative
position and top and left coordinates of 20px each will shift the
element 20px to the right and 20px down from its normal position
in the flow. Elements can also be positioned relatively, with or without
top, left, right, or bottom coordinates, to establish a context
for absolutely-positioned children.
Fixed places the content using the coordinates entered
in the Placement boxes, relative to the top left corner of the browser.
The content will remain fixed in this position as the user scrolls
the page.
Static places the content at its location in the text
flow. This is the default position of all positionable HTML elements.
- Visibility
- Determines the initial display condition of the content.
If you do not specify a visibility property, by default the content
inherits the parent tag’s value. The default visibility of the body
tag is visible. Select one of the following visibility options:
Inherit inherits the visibility property of the content’s
parent.
Visible displays the content, regardless of the parent’s
value.
Hidden hides the content, regardless of the parent’s
value.
- Z‑Index
- Determines the stacking order of the content. Elements
with a higher z-index appear above elements with a lower z-index
(or none at all). Values can be positive or negative. (If your content
is absolutely positioned, it’s easier to change the stacking order
using the AP Elements panel).
- Overflow
- Determines what happens if the contents of a container
(for example, a DIV or a P) exceed its size. These properties control
the expansion as follows:
Visible increases
the container’s size so that all of its contents are visible. The container
expands down and to the right.
Hidden maintains the container’s size and clips any
content that doesn’t fit. No scroll bars are provided.
Scroll adds scroll bars to the container regardless
of whether the contents exceed the container’s size. Specifically
providing scroll bars avoids confusion caused by the appearance
and disappearance of scroll bars in a dynamic environment. This
option is not displayed in the Document window.
Auto makes scroll bars appear only when the container’s
contents exceed its boundaries. This option is not displayed in
the Document window.
- Placement
- Specifies the location and size of the content block.
How the browser interprets the location depends on the setting for
Type. Size values are overridden if the content of the content block
exceeds the specified size.
The default units for location
and size are pixels. You can also specify the following units: pc
(picas), pt (points), in (inches), mm (millimeters), cm (centimeters),
(ems), (exs), or % (percentage of the parent’s value). The abbreviations must
follow the value without a space: for example, 3mm.
- Clip
- Defines the part of the content that is visible. If you
specify a clipping region, you can access it with a scripting language
such as JavaScript and manipulate the properties to create special
effects such as wipes. These wipes can be set up by using the Change
Property behavior.
- When you are finished setting these options, select another
CSS category on the left side of the panel to set additional style
properties, or click OK.
Define CSS style extension propertiesExtensions style properties
include filters, page break, and pointer options.
Note: There
are a number of other extension properties available in Dreamweaver, but
to access them, you need to go through the CSS Styles panel. You
can easily see a list of extension properties available by opening
the CSS Styles panel (Windows > CSS Styles), clicking
the Show Category View button at the bottom of the panel, and expanding
the Extensions category.
- Open the CSS Styles panel (Shift + F11) if it
isn’t already open.
- Double-click an existing rule or property in the top
pane of the CSS Styles panel.
- In the CSS Rule Definition dialog box, select Extensions,
and set any of the following style properties. (Leave the property
blank if it is not important to the style.)
- Page break before
- Forces a page break during printing either before or
after the object controlled by the style. Select the option you
want to set in the pop‑up menu. This option is not supported by
any 4.0 browser, but support may be provided by future browsers.
- Cursor
- Changes the pointer image when the pointer is over the
object controlled by the style. Select the option you want to set
in the pop‑up menu. Internet Explorer 4.0 and later, and Netscape
Navigator 6 support this attribute.
- Filter
- Applies special effects to the object controlled by the
style, including blur and inversion. Select an effect from the pop‑up
menu.
- When you are finished setting these options, select another
CSS category on the left side of the panel to set additional style
properties, or click OK.
|