CSS Rules

Contact Us or call 1-877-932-8228
CSS Rules

CSS Rules

CSS rules are statements that define the style of an element or group of elements. The syntax is as follows:

selector { property: value; property: value; property: value; }

Each property: value pair is a declaration. Multiple declarations are separated by semi-colons. The selector defines which elements are affected by the rule. Take a look at the following rule.

p { color: darkgreen; font-family: Verdana; font-size: 10pt; }

This rule specifies that all paragraph text should be dark green and use a 10-point Verdana font.

Adding Your First Rule

To illustrate how to add rules in Dreamweaver:

  1. Open ClassFiles/Dreamweaver/Exercises/hello-world.html in Dreamweaver in Design View.
  2. Place the cursor in the first paragraph under the heading.
  3. Open the CSS Styles panel if it is not already open (Window > CSS Styles):
  4. Make sure All is selected and click on the New CSS Rule icon in the CSS Styles panel:
  5. Fill out the New CSS Rule dialog as follows and click OK:
    • Selector Type: Tag. All paragraphs (<p> tags) will take on this new style.
    • Select Name: p. The name of the tag.
    • Rule Definition: New Style Sheet File. We will be prompted to save the new file.
  6. Fill out the Save Style Sheet File As dialog as follows and click Save:
    • Click the Site Root button to jump to the site root folder.
    • Save in: Navigate to the ClassFiles/Dreamweaver/Exercises folder.
    • File name: main.css. This is an arbitrary file name.
    • Save as type: Style Sheet Files (*.css)
    • URL: This should be filled in automatically when you name the file.
    • Relative to: Document. This will create relative paths from the HTML files to the CSS files. If you prefer to use absolute paths, you can choose Site Root; however, for the purposes of this course you should choose Document.
  7. Fill out the CSS Rule Definition dialog as follows and click OK: Your paragraphs should update to the new style.

Adding Your First Rule (using Dreamweaver CC)

To illustrate how to add rules in Dreamweaver:

  1. Open ClassFiles/Dreamweaver/Exercises/hello-world.html in Dreamweaver in Design View.
  2. Place the cursor in the first paragraph under the heading.
  3. Open the CSS Styles panel if it is not already open (Window > CSS Designer):
  4. Add a new source:
  5. Name the source, click OK:
  6. Make sure the new .css file is selected and add a new Selector:
  7. Click on the new Selector, then click on the Text choice. Set the text properties:
Next