Using CSS to Format Text

With Cascading Style Sheets we can change the look of our headings, lists, links and other body elements. In Dreamweaver, the CSS Styles panel allows us to create, view, apply or edit style attributes.

CSS Styles Panel

The CSS Styles panel allows us to create, view, apply and edit style properties.

1. Open the CSS Styles panel (Window > CSS Styles), if it is not already open.

Redefine an HTML Tag

1. In the CSS Styles panel, click the New CSS Rule icon (+) at the bottom of the panel.

2. In the New CSS Rule dialog box, under Selector Type, select Tag, which redefines the look of a specific tag.
3. In the Tag pop-up menu, select or type h1.
4. In Define In, select This Document Only.
5. Click OK.

Note: For now we'll apply the style to this document, later you'll see how to export the style so you can use it in other pages in the site.

Type Properties

The Type Category section changes properties such as font, size, style, color and many other type properties.

For example we can set the following properties for our h1 tag.

- For the Font, Select Arial, Helvetica, sans-serif.
- For the Size, type 3 and select ems from the unit drop down.
- For Color, select the color picker and choose a color, or type #990000 for the hexidecimal color.

Background Properties

1. Click on the background category in the left pane.
2. In the background color field, click on the color picker to the right to select a color or type in a hexidecimal value. For example, the color tan has a hexadecimal color of #FFCC99.

Remember: This is the background color for your h1 so make sure that the text is still visible and there is enough contrast between the text color under the type properties and the background color.

View the Changes

Click Apply to see the changes in the Dreamweaver Design Window and then continue making changes.

Click OK to have the settings applied immediately.

View the changes to your tag in the design window or preview your page in the browser to see what the results are. For best results always preview in the browser. Don't always trust what Dreamweaver shows you.

Remember: Save your changes before previewing in the browser, or you might not see the latest version of your page. Dreamweaver sometimes opens the seperate CSS file, and you must save both or all pages that are open before seeing the final results.

CSS Panel Views

Once creating a new CSS Rule it will appear under the style tag of the All Rules View (or the css file name if its an external style sheet). From this view you can edit a style by double clicking on that style or using the icons below.

The Attach Style Sheet icon (link), attaches an external style sheet to the current document.
The New CSS Rule icon, (+), adds a new CSS rule to the style sheet.
The Edit Style icon (pencil), brings up the edit dialog box of the selected CSS Style.
The Delete icon, deletes the CSS property, CSS rule, or style sheet depending on what is selected above.

The CSS Panel Current View shows the properties currently effecting the selected tag. For example, with an h1 selected in the design view, we can see in the Current View Tab that the background color is tan and the color of the text is red and the font is Arial, etc.

The properties view allows you to change any of these properies or add more properties by clicking on the Add Property link.

Create a Style for the List Items

With CSS we can also change the look of the list items in our document. To change these properties create a new CSS rule for the list item tag or li tag and go to the List Category.

1. Click on the New CSS Rule icon and type or select li from the drop down list.

2. Select the List Category on the right.
3. Select from the Type drop down menu one of the various options, including: square, disc, circle, etc.