1.
Choose File > New.
2.
In the New Document dialog box, select the CSS style
Sheets category from the category list on the left.
The list in the middle column of
the dialog box is relabeled CSS Style Sheets. A list of pre-designed style
sheets appears.
3.
In the CSS Style Sheets list, select a style sheet. For
the Global Car rental site, select Basic: Verdana, which redefines the body,
td, and the tags by specifying fonts for them. Then click create
Dreamweaver creates a new text
file containing a small set of predefined CSS styles.
4.
Choose File > Save to save the new CSS file. Save it
in the site’s assets folder; name it text.css (or any other name you like).
5.
Choose File > Close to close the CSS file.
To style your text using CSS styles:
1.
In the window menu, choose and HTML file (such as
index.html).
Note: If your system preferences are
set to now show file extensions, the index.html file appears in the window menu
with the name index.
2.
Choose Window > CSS Styles to display the CSS Style
panel.
3.
A the top of the CSS
Styles panel, click the Edit Styles radio button to show available styles.
If you haven’t previously defined
styles for this document, no styles are available.
1.
At the bottom of the CSS Style panel, click the Attach Style
Sheet button.
2.
In the Link External Style Sheet dialog box, click Browse
to locate a style sheet.
3.
In the Select Style Sheet File dialog box browse to and
select the new style sheet you created in the assets folder, then click OK (Windows)
or Choose (Macintosh) to attach the style sheet.
4.
In the Link External Style Sheet dialog box, click OK to
attach the style sheet.
The style sheet’s name and contents
appear in the CSS Style panel. The styles defined in the style sheet are applied
to the text in the HTML document. For example, body text appears in Verdana.
5.
Save your document.
To edit the styles in the style sheet:
1. At
the top of the CSS Style panel, click the Edit Styles radio button to show available
styles.
2. Select
the name of the CSS file in the CSS Styles panel and click the Edit Style Sheet
button at the bottom of the CSS Style panel.
A dialog box appears showing the names
of the styles in the style sheet.
3. Select one of the styles, such as body, and click
Edit.
The CSS Style Definition dialog box appears.
4. Enter a size for the text, such as 13 pixels. Adjust other options as you like.
5. Click OK to redefine the style.
6. Edit the other styles. To create the styles used in the Global Car Rental site, set the body, td,
and the styles to a size of 13 pixels.
When you're done editing styles, click the save button to save your changes and close the
stylesheet dialog box.
The changed styles are applied to your document. For example, body text appars in 13-pixel
verdana.
Set a style for links.
With the new styel appled you can barely distinguish the
hypertext links in the documents. Let's create a style for the links.
1. In the CSS Styles panel, click the New CSS Style button (+) locateed at the bottom of the
panel.
The New CSS Style dialog box appears.
2. In Type, select Use CSS Selector.
3. In the Selector pop-up menu, select a: link.
4. In Define In, select This Document Only.
5. Click OK.
The CSS Style definition dialog box appears.
6. Set the following Type attributes for the Link:
In Decoration, select Overline
7. In color, in the text box, enter #FFCC99.
8. Click OK.
9. To see the style you applied to the links you must view the page in a browser, press F12 to
preview your page.