CSS Designer is a visual tool that enables you to edit CSS code in an intuitive, straightforward way.
In this article, you can follow the steps to use CSS Designer to re-style elements on a web page. See how to use the features of the CSS Designer tool to visually style a responsive template (see Figure 1).
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
You might be asked to work on a site that is already under development or to make changes to a site that is already live. In this section you’ll set up a project so you can use CSS Designer to update the styling of an existing site.
Follow these steps to load the responsive template into Dreamweaver CC:
Take the responsive blog template you've loaded and add some styling to it. The first thing to change is the logo (see Figure 3).
In the current design, the logo is overlapping the slogan. In this section, you’ll use CSS Designer to improve the styling.
- Hide the Fluid Grid Layout Guides if they are showing.
- Click Inspect on the document toolbar. Then hover over the logo itself until the region you want to affect is highlighted (see Figure 4).
- Click the logo region twice. The first click selects it and locks in the context while jumping out of Inspect mode. The second click brings up the Element Display that shows the HTML element and applied style names. In this example, the H1 element has the Logo ID applied.
- In CSS Designer, click Computed in the Selectors panel to see the list of computed properties. The font-family is set to Arial. For context, click the property name (Font- Family). You will notice that in the Selectors panel above, the #logo selector becomes bold (see Figure 5). This indicates that the font-family property is coming from the #logo selector.
If you look in the collapsed @Media and Sources panels (see Figure 6), you will see additional context telling you which media query, if any, contains the selector you're styling, and you'll also see which CSS file contains the selector. Since the panel headers update, you don’t have to expand the panels to identify them.
Edge Web Fonts is a free font service included with Adobe Creative Cloud. It includes hundreds of web fonts you can use to format text on your website, and the service is integrated with other Adobe tools. In this section, you’ll use Edge Web Fonts to update your page in Dreamweaver and style your website even more.
You can select a different font than Arial. Click Arial in the font-family property inside the Properties panel and select Manage Fonts to open the Edge Web Fonts menu and begin scrolling through the font list. Select Bebas Neue and click Done. Click Arial to bring up the Fonts list again and choose bebas-neue. With Live view on, the logo refreshes right in front of you.
Now it's time to pull the whole logo and slogan off the edge of the document. Click Inspect again and isolate the whole region by hovering below and just outside the logo itself.
Double-click the area to exit Inspect mode and show the Live Element Display. You can also use the Tag Selector along the bottom of the Document window to select the div container that contains the logo element. Notice that the div tag has the fluid and logo classes applied.
You will see that a class called ".logo" is listed three times in CSS Designer. If you select each class one at a time, you will see that two of them are contained within media queries, while one is defined globally.
Choose the global option and ensure the Show Set option is disabled in the Properties panel. You will see a full list of visual controls, including padding, which has four gray values. Hover over the Padding value on the left side. Click and drag this value to 20px (see Figure 7).
CSS Designer makes it easy to copy CSS properties from local and online stylesheets without leaving Dreamweaver, so you can spend less time switching between site files. You can copy all styles or copy only specific category of styles from one selector and paste the styles on a different selector.
- Right-click the .logo selector and choose Copy Styles > Copy Layout Styles (see Figure 8).
Notice that you can also copy all styles or choose a specific type of style to copy. The menu includes these options:
- Copy Layout Styles
- Copy Text Styles
- Copy Border Styles
- Copy Background Styles
- Copy Animation/Transition Styles
- Copy Other Styles
- Select the text: Blog Title Goes Here to set the focus on the H2 tag. In CSS Designer, hover over the .blog_entry h2 styles to locate the global style and then right-click and choose Paste Styles (see Figure 9).
The red blog title moves over 20 pixels immediately in Live View. You can see your edits rendered in the page design in real time.
After adding 20 pixels of padding to the left side of the red blog title, it is too wide for its container. Choose Edit > Undo to reverse adding the pasted styles. Notice that Live View updates again to display the original layout.
Take a look at the nav bar below the logo. The nav items need to be spaced properly. This time, you’ll select one of the individual nav items.
Click the bold ".nav_items a" selector and notice the Properties panel now displays properties for that selector as well as unset properties — provided you disabled the Show Set option in the last step (see Figure 12).Figure 12. The Properties panel displays all of the properties for a specific selector
Now it's time to add some styling to the search form input area. Before going further, enable the Show Set option in the Properties panel. This is a useful feature that displays a consolidated list of properties as you click through selectors. Click Inspect and hover over the search bar. You'll see two selectors that contain the word "input." Select the first one ("nav.containr form input") and note that only the width is set. Now select the one below it, called "input." You can see this one contains more styling guidelines, making it the more appropriate choice for further styling.
While the input selector for the search field is still selected, click the Border icon to jump to the border section in the Properties panel.
- The Border section of CSS Designer includes tabs, so you set border properties easily and intuitively. By default, the All Sides tab is selected when no border property values have been applied (see Figure 14).
- Set the values in the All Sides tab to quickly apply the same borders to all four edges.
- As you add properties to define borders, the other tabs (top, right, bottom and left) update to show darker borders, indicating values have been set. Unset border tabs display a lighter color icon.
- Click one of the four side tabs when you only want to apply a border to one side.
- The convenient Quick Edit text fields let you write out the border values in short hand for each tab. For example, you can select a tab and type “4px solid #DA6E6E” to add a 4 pixel red border, rather than choosing each property in the interface (see Figure 15).
Next you’ll explore creating a new custom property using the Custom section of the Properties panel. In previous versions of Dreamweaver, this section was titled Other.
- While the input selector for the search field is selected, click the Custom tab (three dot icon) in the Properties panel to see the Custom section display.
- In the Add Property field, begin to type “cursor” and notice that list of available properties appears so you can auto-complete the property’s name. In the Add Value field, enter “text” and then press Enter or Return (see Figure 16).
- Test the changes in Live View. Hover over the search field to see your cursor change from a pointer to an I-beam insertion point, indicating that the visitor can input text in the field.
You can use the Border Radius tool to define more styling to the input selector of the search field. Note that with a height set at 40px, you can set a 20px border radius to create an oval effect.
- Click the link in the middle and set any of the four values to 20px.
- Repeat that process for the Search button.
- Click Inspect and hover over the Search button.
- In the Properties panel, you'll see Position and Margin controls among others. Select these properties to determine the most applicable selector from the Selectors panel.
- Select the Margin Control — you'll see "nav.containr .btn" displayed in bold; select that selector and notice that the Properties panel updates.
- Navigate to the border property.
- Click the link in the center and set any of the values to 20px.
You can experiment with text shadows a little and see if anything jumps out at you. This time, try a different approach.
- Click Inspect, click the word Search, and notice that the selectors and properties update.
- Select "nav.containr a" from the Selectors panel. You'll see some text controls appear. The color is currently white. Try changing it to a light gray.
- Disable the Show Set option to make all of the controls appear.
- Click the T icon for text controls.
- Under Text Shadow, add 1px to "v-shadow" and set the color to white.
- You might agree that this doesn't look great. Undo this change to set the text color back to white.
Next, add a gradient to the Search button.
- Click Inspect one more time and select the Search button.
- Click the Background tab (gray-to-white gradient icon) in the Properties panel to jump to the Background section.
- Select Background Property and when "nav.btn" appears in bold, click that selector. With the Show Set option turned off, a long list of Property controls is available.
- Currently, Background Color is set to a pastel aqua blue with a gradient control below it. Select the empty swatch (with a red line through it).
- Add a subtle gradient by first selecting the top color stop.
- Beside the text entry field, click Hex and enter the identical value to the background color: #6ecada.
- Drag the circle to a desired shade of darker blue in the color control area. Note that you can now select RGBa and adjust the opacity by changing the last slider on the right side of the control.
- Select the bottom color stop, which is set to red by default. In the text entry field, type #6ecada again to create a subtle gradient on the Search button.
You can add a new selector and define styles using the CSS Designer, then apply the selector to the HTML page using the Live Element Display.
- Click the Blog Title Goes Here text to select the H2 container. Click the Plus (+) sign and type the name of the class in the field (see Figure 17).
- Choose the desired Source and @Media files to add the new style and then click the plus (+) sign next to the Selectors section of CSS Designer to add the selector (see Figure 18).
- Press the Up Arrow key to make the selector less specific. Or, Press the Down Arrow key to make it more specific. As you press the keys, the selector field updates. Press Enter/Return to set the current value in the field.
- Use the options in the Properties panel to add the properties and values you want to apply to the new selector.
CSS Designer is an indispensable tool in Dreamweaver CC, available only in Adobe Creative Cloud.
In the meantime, be sure to spend more time navigating the panels of CSS Designer to see how you can use this great tool to enhance your site. For example:
- Use the @Media section to further define how the responsive properties of your site will appear in multiple browsers.
- Select the fluid.css file in the Sources panel, and click the entries in the @Media queries panel to preview how the site will appear on different devices.
- Use CSS Designer to fine-tune the design for various devices and screens.
Check out the new keyboard shortcuts you can use to add or delete CSS selectors and properties. You can also navigate between the property groups in the Properties pane.
To research further, watch the following videos:
That's it! You're done. Please provide feedback in our survey so that we can make sure this tutorial is as useful as possible.
Alejandro is a dedicated web and mobile software designer. After many years as a musician, Alejandro re-entered the software industry at GameHouse in 2006. He later worked for SiriusXM and a small start-up before joining Adobe in 2012. Alejandro's work centers on realigning and redesigning web and mobile products.