User Guide Cancel

Laying out pages using CSS Designer

  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

Learn how to use the CSS Designer panel to create or attach stylesheets, media queries, selectors, and set CSS properties.

CSS Designer panel
CSS Designer panel

CSS Designer panel (Window > CSS Designer) is a CSS Property Inspector that lets you "visually"create CSS styles, files, and set properties, along with media queries.

The following sections are available in the CSS Designer interface:

  • Sources: A collection of CSS files associated with the project
  • @Media: Media queries to control the screen size
  • Selectors: Selectors associated with the selected media query in the @Media panel
  • Properties: Properties associated with the selected selector, with an option to show only the set properties

Using the CSS Designer, you can edit an individual rule in a CSS style sheet (use the Current tab in the CSS Designer), or if you prefer, you can work directly in the CSS style sheet (use the All tab in the CSS Designer).

Create and attach style sheets

  1. In the Sources pane of the CSS Designer panel, click , and then click one of the following options:

    • Create a New CSS File: To create and attach a new CSS file to the document
    • Attach Existing CSS File: To attach an existing CSS file to the document
    • Define in Page: To define a CSS within the document
    Creating and attaching style sheets using CSS Designer
    Creating and attaching style sheets using CSS Designer

    Based on the option you choose, Create A New CSS File or Attach Existing CSS File dialog boxes appear.

  2. Click Browse to specify the name of the CSS file and, if you are creating a CSS, the location to save the new file.

  3. Do one of the following:

    • Click Link to link the Dreamweaver document with the CSS file
    • Click Import to import the CSS file into the document.
  4. (Optional) Click Conditional Usage and specify the media query that you want to associate with the CSS file.

Define media queries

  1. In the CSS Designer panel, click a CSS Source in the Sources pane.

  2. Click in the @Media pane to add a new media query.

    The Define Media Query dialog box appears and lists all the media query conditions supported by Dreamweaver.

  3. Select the Conditions as per your requirements.

    Defining media queries
    Defining media queries

    Ensure that you specify valid values for all the conditions you select. Else, corresponding media queries do not get created successfully.

    Note:

    Only 'And' operation is supported for multiple conditions.

If you add media query conditions through code, only the supported conditions are populated in the Define Media Query dialog box. The Code text box in the dialog box, however, displays the code completely (including unsupported conditions).

If you click on a media query in the Design/Live view, the viewport switches to match the selected media query. To view the full size viewport, click Global in the @Media pane.

Define CSS Selectors

  1. In the CSS Designer panel, select a CSS source in the Sources pane or a media query in the @Media pane.

  2. In the Selectors pane, click . Based on the element selected in the document, CSS Designer smartly identifies and prompts you with the relevant selector (upto three rules).

    You can do one or more of the following:

    • Use the up or down arrow keys to make the suggested selector more specific or less specific.
    • Delete the suggested rule and type the required selector. Ensure that you type the name of the selector along with the denotion for the Selector Type. For example, if you are specifying an ID, prefix the name of the selector with a '#'.
    • To search for a specific selector, use the search box at the top of the pane.
    • To rename a selector, click the selector, and type the required name.
    • To reorganize the selectors, drag the selectors to the required position.
    • To move a selector from one source to another, drag the selector to the required source in the Source pane.
    • To duplicate a selector in the selected source, right-click the selector, and click Duplicate.
    • To duplicate a selector and add it into a media query, right-click the selector, hover the mouse over Duplicate Into Media Query, and then choose the media query.

    Note: The Duplicate Into Media Query option is available only when the source of the selected Selector contains media queries. You cannot duplicate a Selector from one source into a media query of another source.

Copy-paste styles

You can now copy styles from one selector and paste into another. You can copy all styles or copy only specific category of styles such as Layout, Text, and Border. 

Right-click a selector and choose from the available options:

  • If a selector has no styles, Copy and Copy All Styles are disabled.
  • Paste Styles is disabled for remote sites that cannot be edited. But Copy and Copy All
    styles is available.
  • Pasting Styles that already exist partially on a selector (Overlapping) works. Union
    of all the selectors is pasted.
  • Copy-paste Styles also works for different linkages of CSS files – Import, Link, Inline
    Styles.
Copy and paste styles
Copy and paste styles

Rearrange selectors

Click the required selector and drag it to the new position with the Selectors pane.

Set CSS properties

The properties are grouped into the following categories and are represented by different icons at the top of the Properties pane:

  • Layout
  • Text
  • Border
  • Background
  • More (list of 'text only' properties and not properties with visual controls)
Note:

Before editing the properties of a CSS Selector, identify the elements associated with the CSS Selector using Reverse Inspect. By doing so, you can evaluate if all the elements highlighted during Reverse Inspect actually require the changes. 

Select the Show Set check box to view only the set properties. To view all the properties that you can specify for a selector, deselect the Show Set check box.

To set a property, such as, width or border-collapse, click the required options displayed adjacent to the property in the Properties pane.

Overridden properties are indicated using a strikethrough format.

Set margins, padding, and position

Using the box controls in CSS Designer's Properties pane, you can quickly set the margins, padding, and position properties. If you prefer code, you can specify shorthand code for margin and padding in the quick edit boxes, as shown in this example.

margin property
The margin property

Click the values and type the required value. If you want all the four values to be the same and changed simultaneously, click the link icon at the center.

At any point in time, you can disable or delete specific values, for example, left margin value while retaining the right, top, and bottom values.

Set border properties

Border Control properties are organized into logical tabs to help you quickly view or modify the properties. 

Border control properties
Border control properties

If you prefer code, you can specify shorthand code for borders and border radius in the quick edit text box.

To specify the Border Control properties, first set the properties in the 'All Sides' tab. The other tabs are then enabled and the properties set in the 'All Sides' tab are reflected for individual borders.

When you change a property in the individual border tabs, the value of the corresponding property in the 'All Sides' tab changes to 'undefined' (default value). 

In the example below, the border color was set to black and then changed to red for the Top border. 

Setting border color for all sides
Setting border color for all sides

Border on all sides
Border on all sides

Setting border color on top
Setting border color on top

Border color set to red for top
Border color set to red for top

The code that is inserted is based on the preference setting for shorthand or longhand. 

During Inspect, the tabs are focused based on the priority of the "set" tabs. The highest priority is for "All sides" tab followed by "Top", "Right", "Bottom" and "Left". For example, if only the top value for a border is set, the computed mode takes the focus to the "Top" tab ignoring the "All sides" tab because "All sides" tab is not set.

Disable or delete properties

The Disable/Enable CSS Property feature lets you comment out portions of CSS from the CSS Designer panel, without having to make changes directly in the code. When you comment out portions of the CSS, you can see what kinds of effects particular properties and values have on your page.

When you disable a CSS property, Dreamweaver adds CSS comment tags and a [disabled] label to the CSS property you’ve disabled. You can then easily re-enable or delete the disabled CSS property according to your preference.

You can disable or delete each property using the CSS Designer.

The following screenshot shows the disable and delete icons for the height property. These icons are visible when you hover your mouse on the property.

Disable/delete property
Disable/delete property

You can also use the delete and disable controls at the Border Control group level to apply these actions to all the properties.

Keyboard shortcuts

You can add or delete CSS selectors and properties using keyboard shortcuts. You can also navigate between the property groups in the Properties pane.  

Shortcut

Workflow

CTRL + Alt +[Shift =]

Adds Selector (If control is in the selector section)

CTRL + Alt+ S

Add Selector (If control is anywhere in the application)

CTRL + Alt +[Shift =]

Adds Property (If control is in the property section)

CTRL + Alt+ P

Adds Property (If control is anywhere in the application)

Select + Delete

Deletes selector, if selector is selected

CTRL + Alt + (PgUp/PgDn)

Jump between sections while in the properties subpanel 

Identify page elements associated with a CSS Selector

Most often, a single CSS Selector is associated with multiple page elements. For example, text in the main content of a page, header, and footer text can all be associated with the same CSS Selector. When you edit the properties of the CSS Selector, all the elements associated with the Selector are affected, including the ones that you do not intend to change.

Live Highlight helps you identify all the elements associated with a CSS Selector. If you want to change only one elment or some of the elements, you can create a new CSS Selector for those elements, and then edit the properties.

To identify the page elements associated with a CSS Selector, hover your mouse over the Selector in Live View (with Live Code 'off'). Dreamweaver highlights the associated elements with dotted lines.

To lock-in the highlight for the elements, click the Selector. The elements now are highlighted with a blue border.

To remove the blue highlight around the elements, the Selector again.

Live Highlight is enabled by default. To disable Live Highlight, click Live View options in Document Toolbar and click Disable Live Highlight. 

Link to an external CSS style sheet

When you edit an external CSS style sheet, all documents linked to that CSS style sheet are updated to reflect those edits.

You can export the CSS styles found in a document to create a new CSS style sheet, and attach or link to an external style sheet to apply the styles found there.

You can attach to your pages any style sheet that you create or copy into your site.

  1. Open the CSS Designer by doing one of the following:

    • Select Window > CSS Designer.
    • Press Shift + F11.
  2. In the CSS Designer, click the + icon next to Sources, and select Attach Existing CSS File.

    Attach existing CSS file
    Attach existing CSS file

  3. Do one of the following:

    • Click Browse to browse to an external CSS style sheet.
    • Type the path to the style sheet in the File/URL box.
  4. Click the Preview button to verify that the style sheet applies the styles you want to the current page.

    If the styles applied are not what you expect them to be, click Cancel to remove the style sheet. The page will revert to its previous appearance.

  5. Click OK.

 Adobe

Get help faster and easier

New user?