• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Project 9. Setting Styles Dynamically > Setting Up Your Base Styles

Setting Up Your Base Styles

In order to get started, you need a base style sheet to start from, which then becomes the basis for every other style sheet you’re going to use. In this section, you’re going to take the style sheet I’ve already built for you and make it usable for the rest of your color schemes.

The first thing that is needed is the base site with the default color scheme, but I’ve already taken care of that part for you. Open default.asp in Dreamweaver. This is the base color scheme for Shorty Paints, a wonderful shade of yellow.

Open the CSS Styles panel. In the CSS Styles panel, all of the styles are listed under a <style> tag heading. This is because all of the styles are currently embedded directly into the page.

Right-click/Ctrl-click the top <style> block in the CSS Styles panel, and choose Export. Browse to the folder containing your page, and save the style sheet as common.css. This gets all the styles outside of the base document.

Repeat step 3, but name the CSS file yellow.css.

Now that you have two duplicate style sheets, you need to remove the embedded styles and link the two new style sheets. In the CSS Styles panel, right-click the <style> block again, but this time choose Delete.

Click the Attach Style Sheet button, the far left button at the bottom of the CSS Styles panel, and attach the common.css file using the Link method.


If you have multiple subfolders throughout your site, it’s often best to use Site Root relative links with the CSS Switcher to ensure your CSS links are always correct.

Click the Options menu in the CSS Styles panel and choose Design-time. Attach yellow.css by clicking the (+) icon in the Design Time Style Sheets dialog and browsing to the yellow.css file.

You should see design next to the yellow.css label in the CSS Styles panel. Your page should look exactly like it did before you exported the style sheets.

You need to use a Design Time Sheet at this point because you don’t want the yellow.css actually embedded into the page—you’ll be switching it out with additional style sheets later on.


Design Time Style Sheets are one of the best things Macromedia engineers ever dreamed up. They allow you to view a page using style sheets that aren’t actually linked to your page in the code. They’re used for working visually in Dreamweaver only, and your site’s visitors will never see them.

Open common.css and remove any properties that contain color information.

You are starting to break apart the style sheets. The common.css file will contain all of the positioning information and yellow.css will contain just the color information. Separating the positioning and color information will make it easier to develop new color schemes later on.


To quickly open a style sheet, simply double-click the style sheet name in the CSS Styles panel.


The ability to break things apart into separate style sheets is another huge advantage of using CSS. Splitting out all of the color information makes it easy to manipulate only those properties you need to.

You’ll have to remove color properties, background color properties, and even borders from common.css if you plan on changing these per style. The only exception will be the ids for the three links that will handle the style changer and their border style, #aRed, #aYellow, #aBlue, and .aStyleButton. These styles will remain the same across all three site color schemes.

Open yellow.css, and remove any rules and properties that don’t contain color information. Be sure to also remove the four definitions for the style changer buttons.

In the previous step you were removing just the properties you didn’t need. This time you’ll need to remove complete rules, such as #divNav, that don’t contain any color definition at all.

Save both common.css and yellow.css.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint