Intro & Account Setup | Getting Started With Dreamweaver MX | Program Layout | Making a Page | Page Properties
Text and Text Properties | Cascading Style Sheets | Tables | Images | Links
Publishing | Templates | Collaborating | Outside Resources

As you may have read in the previous section, a "style" is a specific format applied to either a small or large sample of text, over the range of one or many documents. You can use (or even create) a "style" that you can apply throughout your document (or multiple documents!) to any variety of text to keep a common look and feel throughout your pages. These are called "Cascading Style Sheets." The wonderful thing about CSS is that the formatting of specific things on a web page can be controlled through a style sheet. These sheets can be edited, and changes in the style sheet will automatically appear on the web page elements that have styles applied to them. This is the perfect solution for those working with large amounts of pages they would like to keep consistent in style.

To view the available style sheets, go to “Text” on the menu bar and select “CSS Styles” to view the CSS options.

From here, you can choose to make a new CSS style (it will automatically ask you to save it in a new style sheet), edit a previously existing style sheet, or attach a style sheet to a page.

Y ou are free to apply, as necessary and appropriate, styles to your document. However, it is in no way necessary if you are creating small pages that are easy to format on their own. This is more of an advanced feature that may be helpful to learn for future web projects.

Create a New Style Sheet in the Design Panel
If you never made a style sheet before, don’t worry. You can make one using the “Design” panel in Dreamweaver MX. Alternatively, you can chose to hand-code a style sheet, save it, and apply it to a web page (see farther below for more information on this). For now, let’s discuss how to make a style sheet within Dreamweaver MX’s “Design” panel, without having to do any hand-coding.

In the “Design” panel, click on the “New CSS Style” icon.

You will then be taken to the “New CSS Style” window.

Give your style a unique name in the text box. NOTE: Your style MUST begin with a period (“.”), and cannot have any spaces in between words. A good way to differentiate between words without using spaces is by capitalizing the first letter in each work. However, the first word in the name should be lowercase. An example of a good name for a style would be “.smallHeading”.

For “Type,” select “Make Custom Style (class).” This means that you will be making a style from scratch. Click the “OK” button.

The “Save Style Sheet As” window will now appear. Give your style sheet a unique name, and be sure to end it with “.css”. When you click “Save,” a new style sheet file will be saved, and you can begin to create your own styles. For more information on how to make a style, skip the next section, and go to “Create a New Style For Your Style Sheet.”

Create a New Style Sheet From Scratch
Making your own style sheet from scratch may seem a bit intimidating at first, but in the end, having one to work with can help make formatting your web site a lot easier.

To start a new style sheet, go to the menu bar and select “File” and then “New.” From the window that appears, make sure you are in the “General” tab area. Then, make sure you have selected “Basic Page” from the “Category” column, and select “CSS” from the “Basic Page” column. When these are selected, click on the “Create” button.

A new blank page will appear with the words “/* CSS Document */” at the top. This is a comment that indicates that you are working with a style sheet. This will have no effect on the code you will create.

Hand-Code a New Style
Now it’s time to set up some styles of your own.

Body
The first style you should create is one that controls the look of the page itself. To create the style for “Body,” simply type the word “BODY” followed by an open brace {. After this, press the “Enter” key to bring you to a new line. You’ll want a background color for your web page, and this will be controlled in your “BODY” style. On this line, type:

background-color: #CCCCCC;

This will give all pages that have your style sheet attached to it a gray background.

Hit the enter key again to bring you to a new line. Now, you’ll want to create a style that controls the font for the text on your page. On this line, type:

font-family: Arial, sans-serif;

Now, your text will need a size. Make a new line, and type:

font-size: 10pt;

These will be all of the characteristics that the “BODY” style will manage. It is now time to close the tag. Do this by putting a close brace “}” right after the last line of code.

In Dreamweaver MX, your styles sheet should now look something like this:

Save a Style Sheet
Let’s save this style sheet as it current is, and then apply it to a web page. Go to the menu bar and select “File” and then “Save As.” Give your style sheet a name, and add “.css” at the end of the file name. For example, you can name your file “stylesheet.css”:

Now that you have saved your style sheet, you can now apply it to as many web pages in your site as you like.

Apply a Style Sheet to a Page
Open up a page in Dreamweaver MX. Since we will be working with a style sheet, you will need to have access to the “Design” panel. If it is not yet already open, go to the menu bar and select “Window” and the “CSS Styles.” This will open the “Design” panel, if it is not already open.

On the “Design” panel, click on the small icon called “Attach Style Sheet.” It’s the third icon from the right, located at the bottom of the panel.

A window will appear asking you to browse your computer for a style sheet to attach to the page. Click on the “Browse” button to find the file. Make sure the “Link” button is also selected.

Once you have found the file you want to attach, click the “OK” button.

Go back to the “Design Panel” and click on the radio button next to “Edit Styles.” In this mode, you can edit previously defined styles, and create some new ones using Dreamweaver MX’s “CSS Style Definition” menus, which you will soon see. You will also notice that all of the styles you created in your sheet are listed here.

As you can see, the names of the styles (in this case, only a “BODY” style has been defined in the style sheet) and their properties (located in the right column) are listed so that you can better keep track of your styles.

Apply a Style to Text
The main point of creating styles is to format text and other web page elements in very specific ways. Applying a style to text is extremely simple.

First, highlight the text (or other area in your web page) that you want to apply the style to.

Then, go to the “Design” panel, make sure you’re in the “CSS Styles” tab, and have the “Apply Styles” radio button clicked. “Apply Styles” is the mode you need for this step.

Find the style you want to apply to your selected text. Simply click on the name of that style.

The style will immediately be applied to the highlighted text.

Remove a Style From Text
Removing a style from text or any other web page element is just as easy as applying it. First, put your cursor inside the text with the style you want to remove.

Then, go to the “Design” panel, and select the first option listed, “No CSS Style”.

Clicking on “No CSS Style” will remove the style from the text.

Create a New Style For Your Style Sheet
CSS is a great tool because you can make an infinite number of styles for nearly anything on a web page. You can make a style just for headings, links, table borders, or just about anything you can imagine. Using the “Design” panel in Dreamweaver MX, you can easily make new styles.

On the “Design” panel, click on the icon “New CSS Style” (it looks like a piece of paper with a + sign). The following window will appear:

Give your style a unique name in the text box. NOTE: Your style MUST begin with a period (“.”), and cannot have any spaces in between words. A good way to differentiate between words without using spaces is by capitalizing the first letter in each work. However, the first word in the name should be lowercase. An example of a good name for a style would be “.smallHeading”

For “Type,” select “Make Custom Style (class).” This means that you will be making a style from scratch. Click the “OK” button. The “CSS Style Definition” window will appear.

At this point, you can use the various menus to make your very own style. This may take some getting use to, but you will eventually be able to figure out which styles create what effects. Most of the Categories are self-explanatory, so deciding what style to make should not be too hard. Keep in mind that any style can have as many attributes as you want, but you shouldn’t make any one style too cluttered. You can make as many styles as you want to control different formatting and style elements.

Once you create a style, click on the “OK” button. This will automatically save your new style in the style sheet, and you will see it listed in the “Design” panel at this point.

Edit a Style
You can edit any of the styles you have made in a style sheet at any time. Simply click on the style that you want to edit while you are in the “Edit Styles” mode, and click on the “Edit Style” icon (the icon on the right near the bottom of the panel, shaped like a pencil).

The “CSS Style Definition” window will now appear, and you can edit a style as needed. Click “OK” when you are finished so that the changes can take effect.

Delete a Style
If you need to remove a style from your style sheet, highlight a style in the “Edit Styles” mode on the “Design” panel, and then click on the “Delete CSS Style” icon (the button shaped like a trash can, on the bottom right corner of the panel).

>> next