CSS - Cascading Style Sheets - are not to be confused with CS - Adobe's Creative Suite. CSS is defined by the international standards organization W3C, whilst CS is defined by the commercial organization Adobe.

Overview of Styles

Cascading Style Sheets, or CSS, are the most powerful tool that you have as a web designer to control the look of your pages. Styles can be used to define pretty much every aspect of visual presentation from the font used for parts of the text to the position and alignment of images in the page. Dreamweaver will write the CSS code for the style rules, hiding a lot of the technical details from you, allowing you to concentrate on the creative aspects of the design. However, because Dreamweaver inevitably lags behind the development of the CSS language itself, if you want to use the latest features, you will have to learn to edit the style rules directly.

For example, look at the text box at the top right of this page (if you can't see rounded corners, then you need to update your browser). Rounded corners on elements can be defined in CSS3, but the current version of Dreamweaver (CS6) does not include support for this feature through the dialog box discussed later. However, it is supported in the style properties window, and if you switch to code view and edit the rule manually, it will offer you the properties in the code autocompletion pop-up.

Dreamweaver Page Styles

We saw when creating new pages, that the detail of their layout is controlled by a style sheet. Each specific page layout has its own style sheet specifying exactly how the different page elements are to be positioned and coloured. The different layouts available are discussed here.

It is fairly easy to edit the rules to change the colours of the various page areas, and even the relative sizes and positions of the areas can be altered. However, once you have decided that your page is going to be a two column page with a left side bar, it is very difficult to later change it to, for example, a three column layout with a header and footer. This is because Dreamweaver selects a style sheet based on your initial choice and then writes code into the page skeleton to use the given style rules.

Thus, a page layout is a combination of structure coded in to the page itself and a particular style sheet which describes the appearance of that structure.

Implicit Styles

Left to its own devices, Dreamweaver will create styles automatically as you format your page. Try selecting a piece of text in a page and changing the properties for Font and Size and then make the text bold. Check the Style box in the Properties window and you should notice that Dreamweaver has turned your formatting into a named style. In the case of the example here, Dreamweaver has called the style Style1 and added the style definition to the current page. If I then wanted to apply the same formatting to other elements in this page, rather than manually applying each of the options again, I could simply make the selection and then change the Style to Style1.

Behind the scenes Dreamweaver has created a new rule that looks like this:

.style1 {
    font-family: "Times New Roman", Times, serif;
    font-size: 120%;
    font-weight: bold;
}

This says that style1 is defined as making the font-family property Times New Roman, the font-size property 120% of normal, and the font-weight bold. This is a class rule, which means it will apply to any element that is given the class "style1". If I later change my mind about this formatting and decide that instead of bold, it should be italic, I could simply change the definition from the one given above to this:

.style1 {
    font-family: "Times New Roman", Times, serif;
    font-size: 120%;
    font-style: italic;
}

Then, everywhere on the page that the class style1 had been used would change from bold to italic. Of course, Dreamweaver provides a friendly interface in the Panel Groups window to let you do this.

Clearly this can save a lot of editing time and helps to ensure consistency of design across your site. However, even better than allowing Dreamweaver to define your styles implicitly on a page-by-page basis, is making your own named styles in an external style sheet than can then be applied to every page in your site.

That is the topic of the next page... Next