The Cascade

Contact Us or call 1-877-932-8228
The Cascade

The Cascade

Web designers can define style rules in three different places:

  1. In an external (or linked or imported) style sheet.
  2. In an embedded style sheet.
  3. Inline in an element.

In the examples above, we have been using external style sheets. This is generally the best approach as it allows you to apply a single style sheet to an unlimited number of HTML files.

Embedded Style Sheets

To create and embedded style sheet in Dreamweaver, create a new rule as we have done above, but in the New CSS Rule dialog, select "(This document only)" for the Rule Definition:

To create and embedded style in Dreamweaver CC, select "(Define in Page)" for the Rule Definition:

Inline Styles

Inline styles are applied directly to an element within the HTML code using the style attribute. The value of the style attribute is a list of one or more property-value pairs separated by semi-colons. The code snippet below illustrates how inline styles are used:

<p style="color:red; font-weight:bold;">Hello, world!</p>

To illustrate how to add inline styles:

  1. Open ClassFiles/Dreamweaver/Exercises/sales-report.html in Dreamweaver if it's not open already.
  2. Place the cursor in the heading 1.
  3. In the Properties Inspector, click CSS.
  4. Select <New Inline Style> from the Targeted Rule menu:
  5. Click the Edit Rule button.
  6. Style the heading however you want.

Generally, you should avoid using inline styles as you will not be able to reuse them in the same document or in others.