There are several ways to style text in HTML. One approach is to use Cascading Style Sheets (CSS) styles to define specific HTML tags to format text in specific ways.
This lesson shows how to create a simple CSS style sheet from a predesigned style sheet, then apply the new style sheet to text and modify the styles.
To create a CSS style sheet:
In the CSS Styles panel (Window > CSS Styles), click the Attach Style Sheet button.
The Attach External Style Sheet dialog box appears.
Click the "sample style sheets" link at the bottom of that dialog box.
The Sample Style Sheets dialog box appears, showing a list of predesigned style sheets.
Select a style sheet. For the Trio Motors site, select Basic: Verdana, which redefines the body, td, and th tags by specifying fonts for them.
At the bottom of the dialog box, click the Browse button. Browse to the Assets folder in your site, then to the CSS folder inside the Assets folder. When the CSS folder is selected, open it and click Select (Windows) or Choose (Macintosh).
Tip: If you don't have a CSS folder in your site, skip this step; Dreamweaver automatically creates a CSS folder when you attach a style sheet using the Sample Style Sheets dialog box.
Click OK to create the style sheet and dismiss the Sample Style Sheets dialog box.
Dreamweaver creates a new file containing a small set of predefined CSS styles. Dreamweaver also attaches this new style sheet to your current document.
The style sheet's name and contents appear in the CSS Styles panel. The styles defined in the style sheet are applied to the text in the HTML document. For example, body text appears in Verdana.
Save your page.
To add styles to the style sheet:
In the Document window, click in the heading text that you typed in earlier (in Add text).
In the CSS Styles panel (Window > CSS Styles), select the Level1_Verdana.css style sheet.
Click the New CSS Style button.
The New CSS Style dialog box appears.
Select Tag from the Selector Type options, and select h1 from the Tag pop-up menu if it's not already selected.
In the Define In pop-up menu, leave Level1_Verdana.css selected.
Click OK.
The CSS Style Definition dialog box appears.
In the Size text box, type 120. Select % from the pop-up menu next to the Size text box.
Click OK to redefine the h1 tag's style and dismiss the dialog box.
Click in the "Previews & More" heading in the sidebar.
Repeat steps 2 through 8 to redefine the h2 tag, setting the size to 100%.
The headings in the page are now closer in size to the body text.
If you copied your sidebar text from the HTML document instead of the Word document, repeat the above steps to add a style called sidebar-text. This time, select Class from the Selector Type options, and type .sidebar-text (the beginning period is important) in the Name text box. Set the size to 80%. If you do this step, skip the following procedure.
Save your page.
To edit a style in the style sheet:
If you copied the sidebar text from the HTML document instead of the Word document, skip this procedure. If you copied the text from the Word document, follow this procedure.
In the Document window, click in the sidebar text paragraph.
Open the Tag inspector (Window > Tag Inspector), and select the Relevant CSS tab.
In the upper part of the Relevant CSS tab, select the p.sidebar-text rule.
The status line in the middle of the panel says "In current document."
Click the Show Category View button in the middle of the panel.
You can list CSS properties either by category or alphabetically.
Expand the font category, and scroll down if necessary to find the font-size property.
Click in the right column on the font-size line. Type 80 in the first text box, and select % (percent) from the second pop-up menu.
The sidebar text changes to 80% of its original size.
Make any other changes desired.
When you're done editing styles, switch to the Level1_Verdana.css window using the Window menu and save that file.
