Stylesheets lets you create standard text styles that you can use throughout your site. We will just create an external stylesheet file. This file will store all the styles that we will need for our project. Our other HTML files will link to this stylesheet.
Part 1. Creating an external style sheet
Let's create an external style sheet.
1) Open up your site. From the "File" menu select "New". The "New Document" window pops up Select "Basic Page > CSS"
2) Save the blank page as "tour.css". This is the css file that will store all your styles.
3) From the top menu select "Window > CSS styles"
4) A new window appears. Right Click on the first line inside this window and select "New".
5) Let's start by redefining an existing HTML tag. Let's choose the h1 tag. h1 tag is used to markup your page headings. We want to change its font and color.
"Selector Type" should be "Tag". Make the "Tag" h1. The last field "Define in" should show "This document only". Click on "OK"
6) Here is where you define how your h1 tag looks like. I have selected the font, the size and the color. You can play with other settings. When you are done, click on the "OK" button.
Observe what happens on the css file behind. You should some text that reads
h1 {
font-family: Georgia , "Times New Roman", Times, serif;
font-size: 16px;
color: #660000;
}
This is the style definition. People who do not have the Dreamweaver software have to type this by hand.
7) Let's try an experiment. Copy and paste the text below it. In the second set, change the h1 to h2 and the font size to 14px. It should now look like this.
h2 {
font-family: Georgia , "Times New Roman", Times, serif;
font-size: 14px;
color: #660000;
}
8) Save the page and check your "Design Panel". Now you should see two styles. h1 and h2. If you want to edit any of these, just right click on them and select edit.
9) Let's save and close the css page and we will try applying the style to our html pages.
Part 2. Linking your html page to the css file.
1) Open up any of your html files.
2) From the top menu select "Window > CSS styles"
3) Look for the "Attach Style Sheet" icon. The icon in on the bottom border of this box
4) You will now see this box "Attach External Style Sheet". Select the css file using the "Browse" Button. Make sure that you select "Link".
5) As soon as you click on "OK", you will notice that your h1 and h2 tags change.
Part 3. Creating a new stylesheet class.
1)Close all the files. Open your css file again. From the top menu select "Window > CSS styles"
2) A new window appears. Right Click on the first line inside this window and select "New".
4) Another panel appears. In the " Name " field type in a style name. e.g. .regular_text. Note that I am typing a "." before the name.
5) For the Type option, select the first choice i.e.. Make Custom Class .
6) For the " Define In " field select "This document only " .
7) A new panel appears. This is the style definition window. This panel needs information like fonts, size, color etc. Fill in this info. A new style is created with the options you entered.
Part 4. Applying a Style to a paragraph.
1) Select the paragraph or text.
2) From the top menu, select Window-> CSS styles .
3) A panel appears with all the styles you have defined. Click on the style that you want. Your text will take on that style.
Part 5. Editing a Style.
1) From the top menu, select Window-> CSS styles .
2) A panel appears with all the styles you have defined. Right click on the style that you want to change. Select Edit .
3) A new panel appears. This is the style definition window. Edit the info.
Part 6. Deleting a Style.
1) From the top menu, select Window-> CSS styles .
2) A panel appears with all the styles you have defined. Right click on the style that you want to change. Select Delete .
This section (generated by Furl) contains links to interesting CSS related material I find on the web.
