Lesson 2 - The CSS Styles Panel

Before we get started, I want to show you all the styles that I have available from my Style dropdown menu in the PI.  Some of the styles have a colored background or are bolded or centered with colored text. The styles visually reflect the attributes or declarations of the selector.

These styles are also accessible from the Text Menu - Text>CSS Styles; however the menu only lists the styles but does not visually display the attributes of the styles.

Creating Styles using the CSS Styles Panel

Open the CSS Styles Panel by going to the Window Menu - Window > CSS Styles. You will see .style 1, .style2 and .style3 listed in the All Rules window. To see a style's associated attributes, click on the style and view its properties in the Properties window.

If you can't read all the properties for a style selection, drag the panel away from the edge of your screen and use your mouse to widen the window containing the CSS panel.

Review the CSS Styles Panel carefully.  All panels have an option button at the top right of the panel. Click the options button to see the available menu commands. We will work more with the icon buttons on the bottom right of the panel than we will with the menu options. The icon buttons on the bottom represent from left to right: Attach Style Sheet, New CSS Rule, Edit Style..., and Delete CSS Style.

Click on the New CSS Styles button, the second from left with the + plus sign on it. This will open the New CSS Style Window.

By default, the New CSS Style window Selector Type radio button was on Tag.  Therefore the middle dropdown menu label is Tag, and the menu allows you to choose which HTML tag you wish to attach your new style to. When you change the Selector Type to Class, the top dropdown menu label will be Name.  When the Selector Type is Advanced, the top dropdown menu will be Selector.  The Define in field allows you to choose where the style should be stored -- in the current document only, in a new CSS style sheet, or in a previously defined style sheet.

Select the Tag Radio Button for the Selector Type and the This document only for the Define in: Radio Set. Select the li tag from the Tag: dropdown menu to define a style for list items.

Press the OK button and the CSS Style definition window for the selected tag, li, will display. This is the window in which you will define the attributes for your list item. Explore the window by going through each of the dropdown menus in the Type category.  When you've filled in the attributes for the Type category, select the Background category and select a color that contrasts the color you've selected for the font in the Type category. Notice that this window is similar to the layout of several other Dreamweaver windows, such as the Preferences window. The Category is listed on the left side and the Type is listed on the right.

Take some time to experiment and play with all the possibilities in the Type and Background Categories.  We won't use most of the other categories for this Intro course, but feel free to explore on your own if you want and report your findings to our group discussions. Once you have defined the Type and Background, select the OK button and create a list. You learned to create lists in earlier lessons.  You simply select the ordered or unordered list button on the PI and start typing.  Here's a sample of my list with the new style applied to the <li> tag.

My experiment is not user friendly.  The contrast is too intense, and the numbers and bullets are not covered by the dark background so they don't display clearly against the white background.  I can simply edit the style by selecting the style selector in the CSS Styles Panel and clicking on the Edit Style...button on the bottom right of the CSS Styles Panel and this will open the CSS Style Definition for li window.

The following list displays the modified values for the list item style.  You can press the APPLY button to review the changes in real time instead of pressing the OK and then having to click the Edit Style...button to open the Style Definition window for each modification.

Take some time to assign style definitions to tags.  When you redefine an HTML tag, it won't show up in your CSS Styles Panel and you don't have to select the tag and apply the code - DW applies it automatically. When you define a class, the class will show up in the CSS Styles Panel and you need to individually select anything to which you want to apply this class and then hit the name in the CSS panel. Classes don't display automatically. When you redefine an HTML tag, the style will NOT show in the CSS panel as ALL the html tag data gets the style applied automatically. When you create a .class, the class appears in the CSS panel and you have to individually apply it to any selection or tag.

Redefine the paragraph HTML tag by assigning a style to the P tag. Now all your paragraphs will display the style assigned by your redefined <p> tag.  But what if you don't want all your paragraphs to reflect the same style?  That's where a custom style or class is defined.

* click the link below to read the next tutorial*
Defining CSS Classes