Al's TAFE Certificate IV I.T. (Website Design) Exercises

Cascading Style Sheets 5

CSS » Using Dreamweaver MX to develop Style Sheets .

In Dreamweaver® you can write your own style sheet, by selecting File > New and on the General Tab choose a CSS Basic Page to create your own external style sheet coding. There are also some built-in Dreamweaver style sheets under the CSS Style Sheets heading.

Another way to work with Styles in Dreamweaver is to use the CSS styles panel which can be opened using Shift + F11 or Windows > CSS Styles.

Click the "New CSS Style" button on the panel to begin a new style.

The New CSS Style dialog box opens

Here you can define a custom class or redefine a tag or selector, and you can choose to put this style information in the local document or in an external style sheet.
The options are: -

• Tag (Name);
  1. (If the type is "Make Custom Style (class") then the choice is Name – pick a suitable name that will make it easier to know what the style refers to as this name will appear in the styles panel.
  2. (If the type is "Redefine HTML tag") then the choice is Tag – Choose the tag you want to redefine
  3. (If the type is "Use CSS Selector") then the choice is Selector – Name the selector or choose from the link options
• Type – what kind of style will this be?
  1. Make Custom Class – makes a custom class that can be applied to any tag.
  2. Redefine HTML tag - will create a style that will apply to every instance of the selected tag.
  3. CSS Selector – allows you to set link styles.
• Define in – allows you to decide whether this will be an external style sheet applying to many pages, or just applying to this page only.

When you make your choices from the above box you are then presented with the CSS Style Definitions dialog box.

This box allows you to create a new style and to edit existing styles. It has 8 different windows that cover different aspects of CSS, controlled by the Category list at the left of the above picture.

Using Redefined HTML Tags
These are used when you want to have every instance of a tag to have identical properties.
For example, you may want to have all td (table data) displayed with certain colours, size, font etc.
You can apply this internally for this document only, or externally to this or many documents. As you see in the picture below, the “Define In” section has two options: -
1. Define in a separate style sheet file. (For external use)
2. Define in this document only. (Internal use only)

Remember that an internal style will take precedence (win over) an externally applied style.

Using Custom Classes
Custom classes would be the simplest way to apply style to a page. You choose the block element, such as a paragraph or a table, that you want to apply the style to, and then you apply the style to that block element as you need to.
The difference with "Redefined HTML tag" we learnt above and Custom Classes is that when you redefine an HTML tag the changes will apply to every instance of that tag on the page, whereas the Custom Class will only apply to selective elements wherever you choose to apply them. So you could have just one element on a page that is styled different to every other instance of that element on the same page.

To create a Custom Class click the New Style button in the CSS Styles panel. Under Type choose Make Custom Style (class). Under name type a suitable name for the style you want to apply. See the example below:

Once this custom class has been created there are a few different ways to apply it to a web page.

1. You can click on the "A" in the property inspector, which will switch it to CSS mode. Then click on the drop down arrow beside "No CSS Style" to view the style options available.

2. Another way is to highlight some text on your page and then right click on the rightmost tag in the tag selector at the bottom of your page window, as shown below. You can then pick the style class from the list that appears.

3. Another way is to highlight some text on your page and then right click on the text, choose CSS styles, and then select the desired style to apply.

4. Another way is to highlight some text on your page and then click the class name in the apply styles window.

5. Another way is to highlight some text on your page and then choose Text> CSS Styles from the Menu Bar at the top of the Dreamweaver screen.

CSS Selectors

The other way to use styles in Dreamweaver is by using the CSS Selectors option in the New CSS Style dialog box, as shown below: -

Here you have four new options available in the Selector drop down list: -

1. a:link
2. a:visited
3. a:hover
4. a:active

This allows you to define styles for the different states of hyperlinks. The reason why these options are under CSS Selectors and not included amongst the define HTML tag options, is that these are four different states associated with the <a> anchor tag. They are not four differently tags themselves but only states of the <a> tag. This is known as a Pseudo-class, where the CSS element is dependent on certain conditions to be active, such as a mouseover state.