Adobe
Products

Top destinations

  • Adobe Creative Cloud
  • Creative Suite
  • Adobe Marketing Cloud
  • Acrobat
  • Photoshop
  • SiteCatalyst
  • Students
  • Elements family

Adobe Creative Cloud

  • What is Adobe Creative Cloud?
  • Design
  • Web
  • Photography
  • Video
  • Students
  • Teams
  • Enterprise
  • Educational institutions

Design and photography

  • Photoshop
  • Illustrator
  • InDesign
  • Adobe Muse
  • Lightroom

Video

  • Adobe Premiere
  • After Effects

Web development and HTML5

  • Edge Tools & Services [opens in a new window]
  • Dreamweaver
  • Gaming [opens in a new window]

Adobe Marketing Cloud

  • What is Adobe Marketing Cloud?
  • Digital analytics
  • Social marketing
  • Web experience management
  • Testing and targeting
  • Media optimization

Analytics

  • SiteCatalyst
  • Adobe Discover
  • Insight

Social

  • Adobe Social

Experience Manager

  • CQ
  • Scene7

Target

  • Test&Target
  • Recommendations
  • Search&Promote

Media Optimizer

  • AdLens
  • AudienceManager
  • AudienceResearch

Document services

  • Acrobat
  • EchoSign [opens in a new window]
  • FormsCentral [opens in a new window]
  • SendNow [opens in a new window]
  • Acrobat.com [opens in a new window]

Publishing

  • Digital Publishing Suite

  • See all products
Business solutions

By business need

  • Digital analytics
  • Digital publishing
  • Document management
  • Media optimization
  • Social marketing
  • Testing and targeting
  • Video editing and serving
  • Web development [opens in a new window]
  • Web experience management
  • See all business needs

By industry

  • Broadcast
  • Education
  • Financial services
  • Government
  • Publishing
  • Retail
  • See all industries
Support & Learning

I need help

  • Products
  • Adobe Creative Cloud
  • Adobe Marketing Cloud
  • Forums [opens in a new window]

I want to learn

  • Training and tutorials
  • Certification [opens in a new window]
  • Adobe Developer Connection
  • Adobe Design Center
  • Adobe TV [opens in a new window]
  • Adobe Marketing Center
  • Adobe Labs [opens in a new window]
Download
  • Product trials
  • Adobe Flash Player
  • Adobe Reader
  • Adobe AIR
  • See all downloads
Company
  • Careers at Adobe
  • Investor Relations
  • Newsroom
  • Privacy
  • Corporate Social Responsibility
  • Customer Showcase
  • Contact us
  • More company info
Buy
  • For personal and professional use
  • For students, educators, and staff
  • For small and medium businesses
  • Volume Licensing
  • Special offers
  • Adobe Marketing Cloud sales [opens in a new window]
Search
 
Info Sign in
Why sign in? Sign in to manage your account and access trial downloads, product extensions, community areas, and more.
Welcome,
My Adobe
My orders
My information
My preferences
My products and services
Sign out
My cart
Privacy My Adobe
Adobe
Products Sections Buy   Search  
Solutions Company
Help Learning
Sign in Sign out Privacy My Adobe
Date Date
Qty:
Subtotal
Promotions
Estimated Shipping
VAT
Calculated at checkout
Total
Checkout
Dreamweaver Help / 

Set CSS properties

Adobe Community Help


Products Affected

  • Dreamweaver CS5.5
  • Dreamweaver CS5
  • Dreamweaver CS6

Contact support

 
By clicking Submit, you accept the Adobe Terms of Use.
 

  • Define CSS type properties
  • Define CSS style background properties
  • Define CSS style block properties
  • Define CSS style box properties
  • Define CSS style border properties
  • Define CSS style list properties
  • Define CSS style positioning properties
  • Define CSS style extension properties
  • Show All Show Less

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.

To the top

Define CSS type properties

You use the Type category in the CSS Rule Definition dialog box to define basic font and type settings for a CSS style.

  1. Open the CSS Styles panel (Shift + F11) if it isn’t already open.
  2. Double-click an existing rule or property in the top pane of the CSS Styles panel.
  3. 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.

  4. 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.
To the top

Define CSS style background properties

Use 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.

  1. Open the CSS Styles panel (Shift+F11) if it isn’t already open.
  2. Double-click an existing rule or property in the top pane of the CSS Styles panel.
  3. 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.

  4. 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.
To the top

Define CSS style block properties

You use the Block category of the CSS Rule Definition dialog box to define spacing and alignment settings for tags and properties.

  1. Open the CSS Styles panel (Shift+F11) if it isn’t already open.
  2. Double-click an existing rule or property in the top pane of the CSS Styles panel.
  3. 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.

  4. 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.
To the top

Define CSS style box properties

Use 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.

  1. Open the CSS Styles panel (Shift + F11) if it isn’t already open.
  2. Double-click an existing rule or property in the top pane of the CSS Styles panel.
  3. 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

    Specifies the side around which other elements flow around the floated element. The floated element is fixed to the float side and other contents flow around it on the opposite side.

    For example, an image that is floated right is fixed to the right, and content that you add later flows to the left of the image.

    For more information, see http://css-tricks.com/all-about-floats/

    Clear

    Specifies the sides of an element that do not allow other floating elements.

    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.

  4. 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.
To the top

Define CSS style border properties

Use the Border category of the CSS Rule Definition dialog box to define settings, such as width, color, and style, for the borders around elements.

  1. Open the CSS Styles panel (Shift+F11) if it isn’t already open.
  2. Double-click an existing rule or property in the top pane of the CSS Styles panel.
  3. 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.

  4. 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.
To the top

Define CSS style list properties

The List category of the CSS Rule Definition dialog box defines list settings, such as bullet size and type, for list tags.

  1. Open the CSS Styles panel (Shift+F11) if it isn’t already open.
  2. Double-click an existing rule or property in the top pane of the CSS Styles panel.
  3. 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).

  4. 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.
To the top

Define CSS style positioning properties

The Positioning style properties determine how the content related to the selected CSS style is positioned on the page.

  1. Open the CSS Styles panel (Shift+F11) if it isn’t already open.
  2. Double-click an existing rule or property in the top pane of the CSS Styles panel.
  3. 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.

  4. 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.
To the top

Define CSS style extension properties

Extensions 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.

  1. Open the CSS Styles panel (Shift + F11) if it isn’t already open.
  2. Double-click an existing rule or property in the top pane of the CSS Styles panel.
  3. 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.

  4. 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.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy

Products

  • Adobe Creative Cloud
  • Creative Suite
  • Adobe Marketing Cloud
  • Acrobat
  • Photoshop
  • Digital Publishing Suite
  • Elements family
  • SiteCatalyst
  • For education

Download

  • Product trials
  • Adobe Reader
  • Adobe Flash Player
  • Adobe AIR

Support & Learning

  • Product help
  • Forums

Buy

  • For personal and professional use
  • For students, educators, and staff
  • For small and medium businesses
  • Volume Licensing
  • Special offers

Company

  • News room
  • Partner programs
  • Corporate social responsibility
  • Career opportunities
  • Investor Relations
  • Events
  • Legal
  • Security
  • Contact Adobe
Choose your region United States (Change)
Choose your region Close

North America

Europe, Middle East and Africa

Asia Pacific

  • Canada - English
  • Canada - Français
  • Latinoamérica
  • México
  • United States

South America

  • Brasil
  • Africa - English
  • Österreich - Deutsch
  • Belgium - English
  • Belgique - Français
  • België - Nederlands
  • България
  • Hrvatska
  • Česká republika
  • Danmark
  • Eastern Europe - English
  • Eesti
  • Suomi
  • France
  • Deutschland
  • Magyarország
  • Ireland
  • Israel - English
  • ישראל - עברית
  • Italia
  • Latvija
  • Lietuva
  • Luxembourg - Deutsch
  • Luxembourg - English
  • Luxembourg - Français
  • الشرق الأوسط وشمال أفريقيا - اللغة العربية
  • Middle East and North Africa - English
  • Moyen-Orient et Afrique du Nord - Français
  • Nederland
  • Norge
  • Polska
  • Portugal
  • România
  • Россия
  • Srbija
  • Slovensko
  • Slovenija
  • España
  • Sverige
  • Schweiz - Deutsch
  • Suisse - Français
  • Svizzera - Italiano
  • Türkiye
  • Україна
  • United Kingdom
  • Australia
  • 中国
  • 中國香港特別行政區
  • Hong Kong S.A.R. of China
  • India - English
  • 日本
  • 한국
  • New Zealand
  • 台灣

Southeast Asia

  • Includes Indonesia, Malaysia, Philippines, Singapore, Thailand, and Vietnam - English

Copyright © 2013 Adobe Systems Incorporated. All rights reserved.

Terms of Use | Privacy | Cookies

Ad Choices

Reviewed by TRUSTe: site privacy statement