Dreamweaver 3: Further CSS

Text and other objects can be styled in CSS to a very refined extent. Rather than use formatting properties to add formatting and layout features you should nearly always use CSS so that the style can be applied consistently wherever it is needed.

For any new HTML document you will almost certainly apply the external CSS style sheet you created earlier. This external style sheet should contain most of the styles you create for a web site, though you may have styles that are restricted to a single page.

All of the style properties that you can add are contained in the CSS Rule Definition dialogue box. To expand the range of styles in your CSS file open a document to which the CSS file is attached and then click on the New CSS Rule icon in the CSS palette.

The first step is probably to define a style for a HTML tag, as described in the previous section.

The <p> tag is a likely candidate for several alternative styles in a document because it such a basic unit of a page. Any tag style can be extended by defining a class for the tag as follows:

Here the new style is defined as a class and its details are stored in the external file mystyles.css.

On pressing OK the CSS Rule Definition dialogue box opens:

It's now a matter of working through the categories on the left of the box (Type, Background, Block, etc.) and setting the detailed properties of the style or class on the right. To begin with you will probably experiment to see what effects you can achieve. Once you know what is possible you can use the styles quickly and effectively to design your pages.

Once you have created a style or a class for a tag you can apply it to an object such as a block of text by selecting the object and choosing the style from the list in the Properties box. The class of a style appears in the CSS file as a name preceded by a dot, as in '.highlight'. Classes can also be defined with a '#' character, as in '#highlight'.

Another style ripe for re-definition is that relating to the <body> tag, even if it is only to change its background colour. To re-define the <body> tag click the New Rule icon and choose the <body> tag from the Tag list. Change the properties that you want to change.

Any CSS style definition can be edited by clicking on the Edit icon in the CSS palette.

Any of a style's properties can be changed through the palette by selecting them in the CSS palette and choosing from the options. The list of properties in this section of the palette gives a good idea of what is possible.

Return