Using CSS is a way of formatting in Dreamweaver. CSS stands for Cascading Style Sheets. A style sheet is a set of formatting rules.
Parts of a page can be formatted using the Properties Bar at the bottom of the screen, but this does not offer many options. Using CSS allows you to format in more detail and to save and use the formatting elsewhere.
You need to recognise the CSS panel:
The CSS panel (above): it is among of the panels on the right of the DW screen(by default at the top), with its own blue title bar. Click on the arrow (triangle) before CSS to show the drop-down panel.
New CSS Rule icon: it looks like a sheet of paper with a +sign on it, at the bottom of the CSS panel.
Edit CSS Rule icon: it looks like a pencil, next to the New CSS Rule icon
Attach Style Sheet icon: looks like two links of a chain, next to the New CSS Rule icon.
Trash can icon: next to the Edit CSS Rule icon – select an element on the list and click on the trash to delete it – any formatting contained in that part will disappear.
All these will be hidden if you close the CSS panel arrow.
The CSS panel will be blank until you add any formatting when DW will open a style. (The example above shows body and header)
All: this refers to all the styles for the page
Current: this refers to the current style of a particular element
Also recognise the elements listed in the Tag Selector Bar:
DW puts the names of the page elements on a bar at the bottom of the page, called the Tag Selector Bar, above the Properties bar, starting on the left. Clicking on an element on the page (such as the header, a table, etc) shows the name on the bar.
Example:
Also recognise the Document Flow:
(Are you sitting comfortably?)
Everything on the page will be in the body. In the body you will probably have the wrapper, (or container, same thing, different name).
Within the wrapper you will probably have a header, main content and footer.
Within the main content you might have other Div Tags containing images or a table; within the table you will have rows and cells.
Within the footer you might have links.
So, using the table as an example, it will be inside the main content, inside the wrapper.
Styles added to the wrapper will also apply to the main content and the table.
Styles added to the main content will also apply to the table, but not the wrapper
Styles added to the table will also apply to the rows and cells, but not the main content
Styles added to the footer will also apply to the links
The links can also be formatted separately
To start adding styles (formatting)
Select the container on your page (here used as an example). Click within the container and notice the name selected on the tag selector bar.
Click on the New CSS Rule icon, a box opens. In Advanced you should see <div#container>, check This Document only and click on OK.
This brings up a menu box with CSS Rule for #Container at the top and a list of elements down the left side which each open a new page of things to choose from.
The first one is Type – here you can choose the font, colour, etc. Choose a font and click on Apply – you will see that it has changed but the menu box remains. Only click OK when you are finished.
In Box you can choose padding (blank space round the inside of the border) and margin (blank space round the outside of the border).
In Border you can choose whether you want the border to show, and its appearance and colour.
In Background you can choose a colour, etc.
Click on OK to finish.
To edit styles (change formatting)
Notice the two tabs in the CSS Panel CSS Styles and AP Elements, choose CSS StylesThen notice two more tabs: All and Current. All contains the list of all elements on the page that have formatting. Current shows the detail of the element chosen.
To edit the container styles, in All select the container from the list and click on the Edit CSS Rule icon. This brings up the same menu box as before where alterations can be made.
A bit more advanced:
Recognise that you might have more than one instance of an element:
eg: To make all links have the same formatting you need only format <a>
but if you had two Div Tags on a page both containing images you might want them formatted differently. If you formatted <#divimage> you would format them both the same. To make them different you would have to give them each a separate ID and separate formatting.
You can give the element an ID when first giving it a New CSS Rule - to make it clear to yourself which is which and to distinguish it from other similar elements that you want to have different properties.
To do this select the element and notice the ID box on the left of the Properties Inspector bar. Type in a short name. This name will be used by Dreamweaver when you now go to New CSS Rule.
Notice that if you keep opening New CSS Rules for the same element DW will happily allow you to do so, calling them all the same thing which is very confusing. Remember to use the Edit CSS Rule icon if you already have that element in the list of styles.
If you are using a template you will not be able to format the pages made from it, except in the editable regions. You can add formatting to the template, though, and the additional formatting will appear on all the pages made from that template. (Or you can detach the file from the template if necessary.)
see also page About Style Sheets and Template page
see the website www.csszengarden.com for examples of the same wording laid out in many different ways using CSS.