Dreamweaver allows you to incorporate CSS "styles" with ease. Once new styles have been created in a CSS document, styles can be applied to your webpages. This page will explain, by way of example, how to add (i.e. create) such a CSS style using Dreamweaver.

No knowledge of CSS syntax nor HTML is required, but a working knowledge of Dreamweaver is assumed.

The Goal

To create a style that has the attribute of being in bold text. We want to apply this to specific text within webpages where we mention SJU faculty names, with the intention of distinguishing their names from the normal text.

How to do it

Follow these steps:

1. First, you must know which CSS file you should be editing. In most cases, it will be a file called "styles.css" found within your "css" folder. If you do not have this file, and you are unsure which CSS file your webpages link to, please contact the Help Desk at helpdesk@sju.edu or 610-660-2920.
2. Open styles.css. Open the styles.css file for editing in Dreamweaver.
3. Open "Manage Styles..." window to edit the style sheet. To open this window, click on the "Text" menu, then "CSS Styles", then "Manage Styles..." (show me).
4. Click "New". In the "Edit Style Sheet" window, click the "New" button.
5. Choose a name. Let's call our style ".faculty" -- straightforward enough! Keep the style the default "Class" selector type. Note the "." preceding "faculty". This is important, and means that "faculty" is a "class" selector type in CSS terminology. Thankfully, Dreamweaver is smart enough to add the period (a.k.a. "dot") for you in case you forget this small detail. (show me).
6. Choose the properties we want to assign this style. In this example, we want our style to be bold. Bold text is found under the "Weight" drop-down box in the "Type" category (show me).
7. Click "OK".
8. Click "Done".
9. Save styles.css

The new style, ".faculty" should be visible somewhere in your CSS file (show me) and is now ready to use. Return to your HTML documents to incorporate the style by applying it to certain text. If you are new to applying styles, please read about how to incorporate styles using Dreamweaver.