The CSS Panel (I)

Let's see how the CSS panel works.

The Panel


We have already seen how Dreamweaver lets us create styles quickly and simply. Created styles are grouped in a style sheet located in our document, but we could use styles in external sheets. 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 eases a lot the design.

Let's see how styles sheets work, through the CSS panel, select the CSS styles tab, it can be opened through the Window menu, CSS styles option. You can open it in other ways, as by pressing Shift+F11 or clicking the CSS button in the properties inspector.

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 bottom which allow make changes in the styles.


As you can see in the image, in the bottom you find a grid with tue properties of the style, you can edit them by only clicking and then edit them, or even add new properties clicking in the Add Property link.

With the buttons you could sort the properties in many ways. With the firs button all thew properties will display sorted by categories (Font, Background, Block, Border...) ; you can also sort them by name clicking on the second button. And as default the third one, that only displays the properties that are being used.


If the grid at the bottom doesn't show try to modify the height of the panel placing the cursor on its bottom border and click-and-drag until you can see it.


How to attach a style to a document


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

This window will show up:

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

You will need to select whether you want to link, or import the style sheet.

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

This option is the most recommendable if we are going to use the styles in more than one page, so in this way you will only have to attach them to the style file.

If we choose Import, the sheet will be inlayed in the Page.

The Media option will allow you to define a style for different types of media, for example, screen, print, tv (webTV), etc... You can create a style sheet for the screen media (the one you will see as you browse the internet) and other one to the print one, so when the user prints your page he/she will see it in tha way you defined in the latter.

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


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">






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>


Índice del curso  Ir a la siguiente página

More advanced...