Dreamweaver MX 2004 tutorial. Free. Unit 4. Working with text (III)

Unit 4. Working with text (III)

CSS Styles (II)

We have already seen how Dreamweaver lets us create styles quickly and simply. Created styles are grouped in a styles sheet located in our document, but we could use styles in sheets external to the document.This is particularity useful when we're designing a web site with many Pages, because it allows you to define a sheet of styles to be used for all the site Pages which facilitates the design.

Let's see how styles sheets work, through the Design panel, CSS styles tab, that can be opened through Window menu, CSS styles option. Also by pressing Shift+F11.

To simplify the explanations we'll call CSS Styles panel to the tab CSS styles in the design panel.

In this panel we find the styles sheets associated to the document, the styles and each style sheet, and the buttons in the inferior part which allow make changes in the styles.

To use the styles of a styles sheet, you have to Attach style sheet to the document. To do this, click on button.

This window will show up:

In File/URL you must specify the path and the name of the styles sheet.

We need to select whether we want to link, or import the styles sheet.

If we choose Link the sheet will not be inlayed but it will add a reference to the Page, so that, when you make any change, this will be automatically referenced in all the Pages that use the sheet.

If we choose Import, the sheet is inlayed in the Page.

After clicking OK, the sheet with its styles will be in the CSS Styles panel.

To create a new style inside a sheet, we select the sheet inthe Styles panel and clic on the button which is used to create a new style in the styles sheet selected, or in a new one.

This window appear:

In this window you can specify the Name of the style, (without spaces and starting with a dot).

In Class you can specify whether the style is going to be a personal one. In Tag you can modify an existing label attribute, and in Name the HTML labels list that can be redefined, such as BODY, A, FORM, TABLE, etc. Advanced allows us to redefine the format of a labels' combination.

In Define in: it's determined whether the style is added to the style sheet of the document (This document only), whether a new styles sheet is added (New Styles Sheets File), or if the selected styles sheet is added.

After clicking on the OK button, you will see a window like this one, and you will define the style:

By selecting various categories you can specify different properties, as many of them could not have been selected through the Properties panel. For example, through the Background category, you can specify the background colour for a text paragraph or for the entire page.

To Modify a previously created style, you need to select the style to modify in the list of styles of the panel, and click on the button, and the window already described will be opened.

You can also open this window by right-clicking in the style in CCS Styles panel, selecting the drop-down panel, and selecting the Edit option.

When you want to delete a style from a styles sheet, you select the style from the list in the panel and click on the button.

As you can see, it's very easy to work with CSS Styles.

The HTML code which indicates that a styles sheet has been imported or linked in the document, would be like this:

<style type="text/css">

<!--

@import

url("file:///C|//aulaclic/prueba.css");

-->

</style>

or this :

<link href="pru.css" rel="stylesheet" type="text/css">

And the code which would indicate that a personal style has been applied to an object (a class), would be similar to this one:

<p class="mystyle">Welcome to my page</p>

Unit 4 Exercise

Unit 4 Evaluation test .

Page 4.3

Legal warning: Authorised on-line use only. It is not allowed the use of these courses in companies or private teaching centres.