As a designer, you know it takes a great deal of bandwidth to keep tabs on all the innovations happening in the world of cascading style sheets (CSS). It also takes a lot of time to sift through tons of code and multiple files to keep your CSS tidy. And forget about managing responsive CSS to target myriad devices. Helping you leverage the capabilities and evolution of CSS is the core mission of CSS Designer, new in Adobe Dreamweaver CC.
As senior product manager for Dreamweaver, I am excited about the features we've added to CSS Designer because I believe they will help bring CSS development to those who didn't ever think they'd need to know about CSS, thus making web development more efficient.
In this article, I break down some of the possibilities that CSS Designer opens up. I also highlight some of the really great features of the new CSS Designer tool by showing you how to add styling to a responsive template. To follow along and do these exercises on your own:
Note: If you already have Dreamweaver installed, be sure to check that it is the latest version available from Adobe Creative Cloud.
CSS Designer is a visual tool that enables you to edit CSS code in an intuitive, straightforward way. CSS Designer consists of several panels (see Figure 1).
Take some time to become familiar with the CSS Designer interface:
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 will set up your project so you can begin to 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).
You can see that the logo is overwriting the slogan. In this section, use CSS Designer to improve the styling.
First, click Inspect on the document toolbar. Then hover over the logo itself until the region you want to affect is highlighted (see Figure 4). Clicking that region selects it and locks in the context.
In CSS Designer, the list of computed properties appears. 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 the selector is written in.
Edge Web Fonts is a free font service included with Adobe Creative Cloud. It includes hundreds of web fonts you can use on your website to integrate with other Adobe tools. In this section, I demonstrate Edge Web Fonts integration with Dreamweaver to show how you can style your website even more.
You can select a better font than Arial. Click Arial in the Properties panel to bring up the Fonts dialog box (see Video 1). 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.
Video 1. Select a font from the Edge Web Fonts service.
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. 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 (see Video 2).
Video 2. Inspecting properties on media queries and global elements
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 value on the left side. Click and drag this value to 20px (see Figure 7).
Take a look at the nav bar below the logo. The nav items need to be spaced properly. Inspect them once again. This time highlight any of the individual nav items.
Now it's time to add some styling to the search form input area. Before going further, enable the Show Set option. This is a useful feature for Inspect mode because it shows 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 (see Video 3).
Video 3. Modifying the search form properties
You can use the Border Radius tool to define more styling to the input field. Note that with a height set at 40px, you can set a 20px border radius to create an oval effect. So click the link in the middle and set any of the four values to 20px (see Video 4).
Video 4. Setting the border radius
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 Margin Control — you'll see "nav.containr .btn" in bold; select that selector. The Properties panel will update. Click the Plus sign, type border-r, and press Enter. Click the link in the center and set any of the values to 20px (see Video 5).
Video 5. Using a shortcut to locate CSS properties not immediately visible
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. This time, 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. Now disable the Show Set option, and you'll see all the controls appear. You'll also see several icons appear in the same region of the panel. Click the T icon for text controls. Under Text Shadow, add 1px to "v-shadow" and set the color to white (see Video 6).
Video 6. Setting drop shadows
You might agree that this doesn't look great. So hover over the Text Shadow property and note the two icons that appear on the far right. Click the Trash icon. Now set the text color back to white.
Wrap this project up by adding a gradient to the Search button. Click Inspect once more and select the Search button. Scroll down the Properties panel until you find Background. Select Background Property and when "nav.btn" appears in bold, click that selector. With the Show Set option turned off, you once again have a long list of Property controls. The icons are there to help. One of the icons is a gray-to-white gradient: this is the Background shortcut. Click it.
You will see Background Color is set to a pastel aqua blue. Below this, you will see a gradient control. Select the empty swatch (with a red line through it). You can 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.
Now in the large color control area, simply drag the circle to a desired shade of darker blue. Note that you can now select RGBa and adjust the opacity by changing the last slider on the right side of the control. Now select the bottom color stop, which is currently defaulted to red. In the text entry area, you can again type #6ecada. This will create a subtle gradient on the Search button (see Video 7).
Video 7. Setting gradients
CSS Designer is a new tool in Dreamweaver CC, available only in Adobe Creative Cloud. You can expect to see more information and videos from the Creative Cloud site in the near future.
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:
Be sure to check out the following resources:
Alejandro Gutierrez, product manager for Dreamweaver, is devoted to web and mobile software design. After many years as a musician, in 2006 Alejandro relaunched a career in software at GameHouse in Seattle. Going to SiriusXM in Washington DC, back to the West Coast with Gimmie World, and finally to Adobe, Alejandro has found that his work has repeatedly involved realigning and redesigning web and mobile products. He also records DJ mixes and vocals at soundcloud.com/alejandro415.