Create CSS Rule in Dreamweaver

Before we create CSS rules, we must know first what CSS rules are so that we will not be confused along the way.

CSS Rules are set of instructions that controls objects in your web page. This involves text color, font style, font size, alignment, margins, and so on. CSS rules consist of two parts the selector and the declaration (or in most cases, a block of declarations).

Selector is a term such as “p” for paragraph, “h1” for heading 1, class name, or an id that identifies the formatted element.

Declaration block defines what the style properties are.

Example:

h1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight:bold;
}

Showing the example above, h1 is the selector and everything that is inside the braces {} is the declaration block. For now this is the basic thing you must know on CSS rules, you will learn more along the way.

So let us move on creating our first CSS rule. In Dreamweaver, there is no coding involved but however it is recommended that you must review your code so that you will have better understanding on CSS. Now to create a CSS rule, follow the steps below:

1. Open Dreamweaver and Create a New HTML file.

2. Under Common tab click Insert Div Tag which can be found on area 1. See Figure 4 on Starting CSS in Dreamweaver.

3. You will see an Insert Div Tag window. On the insert input, select “At Insertion Point” and on the ID put “sampledivtag” or whatever id name you want then click OK.

4. After you click OK button, you will see (Content for id "sampledivtag" Goes Here) which is inside in a dashed-bordered-rectangle. That rectangle is the div tag and the (Content for id "sampledivtag" Goes Here) is the content of the div tag. You can delete (Content for id "sampledivtag" Goes Here) and change in something you want like text, buttons, or even another div tag.

5. Inside the CSS Style window which is in Area 2 shown on Figure 4, right click and select New.

6. A New CSS Rule window will appear. Selector Type: has 3 options, choose “Advanced (ID’s pseudo-class selectors)”, don’t change the Selector:, Define in: choose “(New Style Sheet File)”.

7. Click Ok and Save Style Sheet File As “style.css”.
8. After saving the file “CSS Rule Definition for # sampledivtag in style.css” will appear.

In this area, you can now set #sampledivtag’s font style, size, weight, variants, backgrounds, margins, borders, and so on. After setting up, just click OK and you have a CSS Rule with an ID name #sampledivtag.

Output:

As you can see, only the #sampledivtag tag changed after we clicked OK. The whole page was not affected because the CSS Rule Definition defines only #sampledivtag and not the whole page.

Code Review:

What we did here is that we created CSS Rules in a different file and we name it “style.css”. The reason we did this is to clearly understand how CSS work because if we mixed CSS and HTML which is also possible, there is a possibility that you will get confuse of so many different codes. It is recommended to separate CSS from your HTML for easy debugging.

In CSS Rule Definition we set:

Font: Arial, Helvetica, san-serif
Font Size: 12 pixels
Font Style: Normal
Weight: Normal
Variant: Normal
Background: #FF9900

Open style.css or just click the tab next to your HTML file.

As you can see, #sampledivtag is our selector and everything which is inside our braces {} is our declaration block. If you review this post from top to bottom, you will see that CSS is not that complicated. So have fun with CSS.