- To create a new CSS file in Dreamweaver MX, start a new document (use CTRL+N on a PC or CMD+N on a Mac), and select Cascading Style Sheet from the pop-up menu. Dreamweaver will pre-populate the new document with the base tags necessary; you only need to begin typing in between the opening and closing tags.
-
A CSS file contains instructions for what various elements of your website look like. For example, you can place a background image or color (or both) on a page, set which font, size and color you want for various sections (such as your page header, your navigation menu, links and body text), and create various layout elements, like setting the width and position of columns or lists.
Much of this is done by using IDs (frequently, but not necessarily, used for major elements like a navigation menu) and classes. -
The syntax of a CSS file looks something like this:
#ID { attribute1:description; attribute2:description; }
or
.class element { attribute1:description; attribute 2:description; attribute3:description; } -
While you decide what to call the IDs and classes, there are specific vocabularies for the attributes and descriptions. Dreamweaver MX will offer a list of attributes, arranged alphabetically, after each space within your brackets. If you start typing, it will narrow the list of available attributes starting with the letters you have typed.
Dreamweaver does offer limited suggestions for descriptions, but it might be a good idea to have a reference guide, like the W3 Consortium's tutorial or the Webmonkey library available (See references). -
For each page in your website using a style sheet, you will need to add a link to the style sheet (or style sheets--you can use more than one if you wish) within the head of the pages.
That link will look like this (place it between the <head> and </head> tags):
<link type="text/css" rel="stylesheet" href="LocationAndNameOfYourStylesheet.css">
