The Steps
Cascading Style Sheets are one way to get control of the text in your documents. Of course you could just use the Property Inspector or Page Properties to modify your text but CSS will allow you more global changes once you become comfortable with its features.
There are 2 style sheets categories.
- Internal style sheets affect the look of a particular document storing the code of your different styles within the head tag of your html document.
- External style sheets are an outside file that can be referenced or attached to the different web pages within an entire site to achieve a consistent look.
Dreamweaver lets you create 3 types of styles:
- Custom CSS styles (also known as class styles) allows us to create our own styles
- HTML tag styles, which redefine the formatting for certain html tags
- Advanced styles, which we will use to change the link tag
1. Open a new Dreamweaver document and name the file style.htm. Take a look at your Property Inspector.
Since this is a brand new document and you haven't created text or made any changes to it you will notice the Style menu is set for None or the default settings. Type your Name and change the font, color, size and alignment of your name. Once you do that your style menu is keeping track of your changes. You should see it change to 
Jim Berry
Now type your favorite food and make some changes to that. What do you notice?
2. View your Dreamweaver document in the Code mode and you should see some changes to your head tag.
3. As you begin to create different styles you may not want them to be named Style1, Style2, Style3, etc. You may want to rename them. If you select the Style menu you see a place where you can rename your styles. Please rename one or two of your styles.
4. Let's say you have a style you like and you want to apply it to other text. Just select the text you want to change and then find your desired style in the style menu on the properties inspector. Try it out.
5. Now it's time to explore the CSS menu. Select Window in the menu bar then CSS Styles. You will see a window with your different styles. The four icons on the lower right bottom are very important. The first icon on the left is to attach an external style sheet. The second is create new style sheets. The third (with the pencil) is to edit style sheets. The fourth icon with the trash can is to delete style sheets.
6. Click the "New..." button. Type in .bodytext (you must keep the period before the Name). Click in the Class button and make sure This document only is selected.
7. Now you play. Change the Font, the size, the color and the style.
8. This custom made style or class will now appear in your Properties Style menu and your CSS window listing the internal styles available for this document.
Select your new class - .bodytext and start typing to see what happens.
9. What if you wanted to redefine some basic html tags we learned about in the beginning of the course. Let's say you wanted to redefine the paragraph tag to produce red font in bold with a size 16 pixel font. This way every paragraph you type would appear in that style.
10. Click the icon on the CSS styles window to create a new style. Click on Tag button in the Selector Type and then select p from the different Tag choices. Make the changes suggested in step 9. What happens to your document?
Do the following, and explain in your page (still style.htm) how you did it.
1. Make your paragraph text red, and heading1 purple.
2. Make your links NOT underlined (hint: links use the "a" tag).
3. Change five other html tags. Let me know what other tags you are changing by typing that information within your style.htm document. Try some other cool things, and be prepared to share them with the class. As usual have a link on your home page to this new assignment.
Add a horizontal rule in style.html. Underneath the horizontal rule, add several links. Explore the Advanced styles and change link properties (such as colors, size, style, etc.) when the page is opened, the user clicks on the link, the user hovers over the link, the link has already visited it. Underneath the links that you've given new properties, explain what changes you made. (Remember, you already changed the link tag, <a>, to make it not underlined. Is this new stuff you are doing changing that?)
Create an External Style Sheet called external.css and apply it to either a new page or one of the pages you have already created this year. On style.htm, tell me what styles you created in your external style sheet and what web page you applied it to.
The Assignment
1. Create style.html, so that:
- The paragraph tag, <p>, is altered so that any text surrounded by only a paragraph tag is red
- The heading 1 tag, <h1>, is altered so that all text that is heading 1 is purple
- Links in style.html are not underlined
- Link properties are changed for general links, links being hovered over, links being clicked, and links that have been visited
- Style.html contains information about what changes were made to the links in each of these states
- The styles of five additional tags have been changed
2. Create an external style sheet (external.css), so that:
- External.css has at least three styles defined in it
- External.css is applied to at least one webpage
- Style.html includes information about external.css (what styles are changed in it and what document it is attached to/it modifies)