Cascading Style Sheets (CSS)
  >CSS2 - Custom & External Styles           >CSS3 - Redefined tags           <DW Index

CSS Styles- a definition from Dreamweaver Help Using Dreamweaver

"A style is a group of formatting attributes that control the
appearance of a range of text in a single document. A CSS (Cascading Style Sheets) style can be used to control many documents at once and includes all of the styles for a document.

External CSS style sheet

A CSS style sheet is an external text file containing styles and formatting specifications. When you edit an external CSS style sheet, all documents linked to that CSS style sheet are updated to reflect those edits.

 

What is involved in CSS?

Dreamweaver4

There are 3 different style types

(1) A custom style that can be applied to a web page. This has 8 different types of setting!

The custom style can be extended to a group of web pages in which case it is called an External Style Sheet

(2) Redefined HTML tags - individual HTML tags can be redefined so that they behave in a different way when placed on a page.

(3) CSS Selector Style - this redefines a group of HTML tags within a table cell instead of just one. One common use is redefining the anchor tag (<a>) to create rollover buttons.

In Dreamweaver MX2004 and 8 the layout is different.

Class – Class styles are the only type of CSS style that can be applied to any text in a document, regardless of which tags control the text.

Tag - redefines the default formatting of a specific HTML tag

Advanced - To define the formatting for a particular combination of tags or for all tags that contain a specific Id attribute
eg table h1 would redefine all heading 1's within a table's cells. All Heading1's not in table cells would behave normally

 

Where are Styles Stored?

All styles are stored in the Head of a document. If you look at the page either in Code View or Code and Design view you will see them. The Dreamweaver section of the site uses an external style sheet called learn.css which is stored in the head section of the Dreamweaver Index page

Dreamweaver Style

.topstyle { font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; background-color: #00CCFF; font-size: large; font-style: normal; font-weight: bold}
.bodystyle { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FF0000; font-weight: bold}
.subhead { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #000033}
h1 { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-style: italic; font-weight: bold; font-variant: normal; text-transform: capitalize; color: #003366; text-decoration: blink}
tdh2 { font-family: Arial, Helvetica, sans-serif; font-size: 36px; font-weight: bolder; color: #669900}
td h1 { font-family: Arial, Helvetica, sans-serif; font-size: 36px; font-style: oblique; font-weight: bolder; color: #669933}

Main Site Style

The main section of the site has its styles defined as an external style sheet called main.css, stored in the head section of the main index page

.mainsitestyle {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #000066;
text-align: left;
word-spacing: normal;
white-space: pre;
list-style-type: none;
}
.subhead {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
}
.tablestyle {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #000066;
background-color: #66CCCC;
text-align: left;
white-space: pre;
margin: 3px;
padding: 3px;
border: solid;
line-height: normal;
font-weight: normal;
font-variant: normal;
}
.background {
background-color: #66FFFF;
}
.headlines {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #000033;
}

Top of page