Sandra Smith-Gordon's Basic Instructions for Dreamweaver

About Style Sheets

home | dictionary | instructions pages list

 

A Style Sheet is a set of styles or formatting rules that apply to elements of a page.

 

see also the Basic CSS page and Import a Style page

 

A CSS formatting rule consists of two parts - the selector and the declaration (or in most cases, a block of declarations).

The selector is a term (such as p, h1, a class name, or an id) that identifies the formatted element, and the declaration block defines what the style properties are.  These can be seen when you look at the code:

In the following example, #container p is the selector, and everything that falls between the braces {} is the declaration block

 

#container p {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
width: 850px;
}

 

External CSS style sheets:

Collections of CSS rules stored in a separate, external CSS (.css) file (not an HTML file). This file is linked to one or more pages in a website using a link or an @import rule in the head section of a document.

External Style Sheets are used to style multiple pages of your site. Changes made on the Style Sheet will appear on all the pages that are linked to that style.

 

Internal (or embedded) CSS style sheets:

Collections of CSS rules included in a style tag in the head portion of an HTML document. Embedded Style Sheets are for the current document only.

 

To make an external style sheet:

Choose New CSS Rule > Define in > New Style Sheet File; then fill in the menu box:
Save As .. should be the name of the element you are styling
URL.. should be the name of the new style sheet (If you do not fill this in DW will give it the name untitled.css)

You will see the Style Sheet appear in the CSS panels with .css and also in the files list with .css as suffix

 

Continue to add styling to elements on the page using New CSS Rule for each but then in Define In box choose the style sheet name you have made. They will appear in the CSS panel as elements within the main style you have made.

 

To use the external style on another page:

With the page open go to CSS panel and choose the attach icon attach icon then choose the style to attach to.

 

To make an embedded style

Choose New CSS Rule > Define in > This document only

 

 

 

|