TechNote (Archived)

Using Cascading Style Sheets in Contribute

Cascading Style Sheets (CSS) is a language used in conjunction with HTML to define how a page look. CSS consists of a set of rules defined by the web developer or designer that tell the browser how to display the page elements.

With CSS, you can specify the page layout, font size, type and color, borders and other design parameters. Not only does CSS provide more options for design than HTML, but it also allows developers to manage the look of the entire web site from a central file. Simply change a rule of style and it's automatically applied across the site!

Overview of CSS style types

There are 3 main types of styles. They are:

Custom classes: These are styles that can be applied to specific page elements, such as paragraphs and tables. These can be made available to Contribute users.
Redefined HTML tags: These are rules that are defined for specific tags. They are automatically applied to every instance of that tag. For instance, developers can specify that every table on the site will have a 2-pixel, red border. Every new table that is made will automatically have that rule applied.
CSS Selectors: Selectors are used to specify styles for special combinations of tags. For instance, selectors are used for removing the underlines from links. Like redefined HTML tags, these are applied automatically to every instance of the selector rule.

As noted above, custom classes are the only CSS styles available to Contribute users. This is because the other types are already applied globally to the tags. With custom classes Contribute users can select from the list of defined classes and apply them to whatever element they wish.

Contribute users cannot create CSS files, but they can use the custom classes that have been linked to the page by the Dreamweaver MX administrator. Once linked to the page in Dreamweaver, the custom classes will be available in the Style drop-down menu.

Applying the custom classes

To apply a custom class:

Highlight the page element to which you would like to apply the style.
Click on the Style drop-down menu (shown above) and select the desired style. It will automatically be applied to the selection.
Note: The style options are also available in the Format> Style menu.
To remove the class, highlight the selection and select None from the Style drop-down menu.