Wellesley College
Dreamweaver Documentation


Cascading Style Sheets


 

Coding CSS
---------------
| Coding CSS, Creating a Style Sheet, Editing a Style Sheet |

 

Coding CSS

Coding CSS is composed of three processes: Creating the style sheet by writing style rules, applying rules to the HTML document by inserting HTML and style tags, and attaching the style sheet to the HTML document.


Creating a Style Sheet

1. Open a word processor or other software program that allows you to save a document as a text file and create a new file. BBEdit and TextEdit are two such programs.

2. Define your style rules. See the Rules section for more information on creating rules.

i.e.

p {
font-size:10pt;
line-height: 18pt;
}

.topic_heading {
font-size:36 pt;
font-style:bold;
color: 000033;
}

 

3. Save the document as a .css file i.e. myFileName.css. Remember the .css , an extension needed to identify the file type. Once you have the external style sheet you can link it to any HTML document. See the Attaching Style Sheets link for information on inline and internal style sheets.


Applying Style Rules

Once you have created a style rule, you can apply it to any HTML document. For more information, see Understanding Selectors in the Rules section.


Attaching Style Sheets

For any style sheet to affect an HTML document, it must be attached. See Attaching Style Sheets for detailed instructions.

 

Editing a Style Sheet

Style sheets can be edited in any word processing software such as BBEdit and TextEdit. Just open the style sheet in the application. Make your changes and save.

You can also edit style sheets in Dreamweaver MX.

  1. Launch Dreamweaver MX.

  2. Choose File > Open...

  3. A dialogue window will appear. Browse to the .css file that you would like to edit. Select it and click Open.

  4. Once you are done editing, go to File > Save to save changes.

 

 


Computing at Wellesley

Macintosh Documentation

PC Documentation