HOW TO APPLY CSS PROPERTIES IN DREAMWEAVER
You can apply some CSS properties and values while you have a html web page open in
Dreamweaver.
SETTING UP
First, you need to create a new CSS Stylesheet which will be used as your external stylesheet.
Go to File > New
Select CSS
Save this CSS document in the same folder as your webpage that you will be attaching it to:
File > Save As > Browse your Documents to choose the folder your webpage is saved in.
Attach this Stylesheet to your webpage by going to File > Attach Style Sheet:
Browse your documents to locate your stylesheet.
You will then see in the head section, this code below, which shows your stylesheet is attached:
CREATING CSS AND ADDING IT TO YOUR EXTERNAL STYLESHEET.
Go back to your HTML webpage in Dreamweaver.
1. Go to Insert > Div
2. Select ‘New CSS Rule’
3. Select ‘Tag’ from this dropdown list:
Then select which tag you would like to apply CSS rules to (above I have body selected).
In the Rule Definition section, choose your stylesheet from the dropdown list. Mine is called
example stylesheet.css. This will add any CSS properties you choose in the next step, straight to
your external CSS stylesheet.
4. Once you click OK, CSS properties will appear. Categories are on the left hand side, and
the properties for those categories are on the right hand side.
If you click on the drop-down list of the properties, it will show you the values that you can
apply:
Click OK once you have finished.
If you click back on your stylesheet you will see the CSS code has appeared:
In your source code/HTML document, you may see a DIV tag has been applied after creating
a new CSS rule. You can delete this.
§If more than one stylesheet is attached to a web page at the same time, those
attached later in the markup have priority over earlier ones.
CSS CLASS
A CSS class is an attribute used to define a group of HTML elements in order to apply unique
styling and formatting to those elements with CSS.
HOW TO CREATE A CLASS IN DREAMWEAVER
You can preview some CSS properties and values while you have a html web page open in
Dreamweaver (this may help you with adding CSS styles whether it is inline, internal or
external).
5. Go to Insert > Div
6. Select ‘New CSS Rule’
7. Ensure Class is selected from the dropdown list. Then enter the name of your class
underneath:
E.g. I have entered the name testing:
At the bottom in the Rule Definition section, you can choose your external CSS stylesheet
from the dropdown list if it the class needs to be added to your external stylesheet.
8. Once you click OK, CSS properties will appear. Categories are on the left hand side, and
the properties for those categories are on the right hand side.
If you click on the drop down list of the properties, it will show you the values that you can
apply:
Click OK once you have finished.
.testing is a class that has been created, and can now be found in your external stylesheet:
Example:
To add these properties to a specific tag in your webpage, see the example code below (this
shows me adding this class to a p tag in my webpage):
