Lesson 4 - CSS Styles

Before we get started, I want to show you all the styles that I have available. There are two ways to see them in the PI. In HTML mode select the Class dropdown menu to see the styles. 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.

In CSS mode the styles can be viewed from the Targeted Rule dropdown menu. 

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

CSS Inline Style

We will use DW to create an inline style that we will apply to a paragraph that will be written in blue font. Remember that an inline style is applied directly to a tag in the HTML code. If you want only this paragraph to be written out in blue font then you would use inline styling.

1. Create some text in a paragraph and highlight it.
2. In the PI in CSS mode in the Targeted Rule dropdown menu select <New Inline Style>. Click the Font Color button to select a new font color.
   

   

   
   After you select the color the paragraph will turn blue.
   
   
3. Make sure you are in Split view so that you may see the inline style in the code.
   
   

   <p style="color: #36F">Your blue paragraph</p>  

 

CSS Internal Style

In this section we will use DW to define an internal style for the HTML body tag. An internal style is placed in the head of the document inside of style tags. Make sure that the document is not linked to any external style sheets that might contain the body tag style definition. DW made this easy to see by adding their names next to the 'Source Code' in the area between the tabs of filenames and the layout selection bar. In the example below there are two files to which class04b.htm is linked, screen_styles.css and print_styles.css.

We will define the font family and size for the body tag.

1. In the PI select CSS mode and select the body tag in the Targeted Rule dropdown menu. If it does not appear in the menu then select New CSS Rule.
2. Click the Edit Rule button to bring up the CSS Rule Definition for body window.
   

   

3. If the body tag has no style attached to it then the New CSS Rule window will come up. Select Tag for the Selector Type and then select body for the Selector Name. Since we are creating an internal style we will set the Rule Definition to be '(This document only)'. Press OK.
   

   

4. In the CSS Rule Definition for body window select the font family and a font size of 14. Press OK and you will see the new font family and size in the Design panel as well as in the PI.
5. Make sure you are in Split mode so that you can scroll up to the head section to see the CSS style defined for the body tag.
   
   

   <style type="text/css">
   <!--
      body {
            font-family: Verdana, Geneva, sans-serif;
            font-size: 14px;
            }
   -->
   </style>

   
   
6. Now that the body tag has a style defined you can change the font family, size, and color directly from the PI. After you make those changes they will be reflected in the style in the head section.
   

   

Note: When you set Page Properties from the PI, selecting Appearance (CSS), DW will add these styles internally even if you have an external style sheet with the body style defined.

CSS External Style

There are several advantages to using an external style sheet. I mentioned before that you can link and reference styles in an external css file from all the pages in your site, managing the modifcation of the styles to one location. In addition, all the code for your styles takes time to load on each page. When you write the code once and link to it, the pages in your site will load quicker because the style code only has to download once.

First, we are going to move the internal styles into an external style sheet.

1. In the Code view scroll up to the head part of the document and highlight the internal styles.
   

   

2. On the Dreamweaver menu bar select Format> CSS Styles > Move CSS Rules...
   

   

3. A window will come up where a new style sheet may be selected or an existing one. We will create a new one.
   

   

   

4. Scroll up to the head section of your document and look at the Code view to see that the styles have been removed and that a link to the external style sheet has been added.
   

   

5. Now that a style sheet has been created you can copy any future internal styles into it rather than creating a new stylesheet like we just did. There are two ways to do this:
   
   
   1. First, highlight the internal styles that are to be moved then bring up the Move to External Style Sheet window and select Style sheet and then enter the external style sheet filename.
      

      

   2. Highlight and cut the internal styles, then select the external style file which is located next to the 'Source Code' button, and paste them directly into the external file, in this case MyTest.css. Notice the asterisks following MyTest.css and MyTest.html below. This means that the files need to be saved which we do now. If Dreamweaver 'crashes' then any unsaved changes will be lost.
      

      

Creating Styles using the CSS Styles Panel

Open the CSS Styles Panel by going to the Dreamweaver menu bar and selecting Window > CSS Styles. Or, from the PI in CSS mode click on the CSS Panel button located below the Targeted Rule dropdown menu. You will see all the styles in the page listed in the All Rules pane after you press the All button in the CSS Styles tab. Notice that the internal and external styles are listed.

To see a style's associated attributes, click on the style and view its properties in the Properties window.

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.

When the window first came up I changed the Selector Type to Tag (redefines an HTML element). Notice, that since I had selected the body tag in the All Rules pane, which is defined in an external style, the Rule Definition listed the external file as the location of where the rule will be defined. Had I selected a tag in the All Rules pane that was defined internally then the Rule Definition would have been set to this document only.

* click the link below to continue with this lesson *
CSS Selectors

Top

Copyright © 2010 - 2011 Robert D. Cormia - December 14, 2010