Accessibility

Dreamweaver Article

 

CSS design basics with Dreamweaver – Part 2: Styling (X)HTML elements


Table of Contents

  1. Introduction
  2. Using Type selectors to target page elements
  3. Relevance of the Type selector
  4. Border syntax
  5. Margin and padding syntax

Using Type selectors to target page elements

In Part 1 of this series I briefly discussed the Type selector. Here you begin your journey into CSS. Open the elements.html and test.css files that you created at the end of Part 1, which are also available within the download for this tutorial.

Begin by adding a short paragraph to the elements.html page. Complete the following steps:

  1. Type This is my first venture into the world of CSS.
  2. Highlight the sentence.

  3. Select Paragraph from the Format pop-up menu within the Property inspector (see Figure 1).

    Selecting the Paragraph format option

    Figure 1. Selecting the Paragraph format option

  4. Switch to Code view in Dreamweaver.

  5. The body of your page should look like Listing 1.

    <body>
<p>This is my first venture into the world of CSS.</p>
</body>

    Listing 1. Code for the body of the page

Now that you have an unformatted paragraph on your page, you can set about creating a CSS rule for it. Press Shift+F11 to open the CSS panel and complete the following steps:

  1. Click the New CSS Rule button (see Figure 2). The New CSS Rule dialog box appears.

    Clicking the New CSS Rule button in the CSS panel

    Figure 2. Clicking the New CSS Rule button in the CSS panel

  2. Select the Tag option.
  3. Type body into the Tag field.

  4. Ensure that the Define In field is set to test.css (see Figure 3).

    Setting your New CSS Rule settings

    Figure 3. Setting your New CSS Rule settings

  5. Click OK. The New CSS Rule dialog box closes and the CSS Rule Definition dialog box opens.
  6. Select Type in the Category list.
  7. Click the Color option cube.
  8. Select #003366 with the color picker (dark blue) and click OK.

  9. The CSS Rule Definition dialog box closes and your new rule for body appears in the CSS panel (see Figure 4).

    The CSS pPanel showing the new rule for the body tag

    Figure 4. CSS panel showing the new rule for the body tag

  10. Save your test.css file and save your elements.html file.
  11. View elements.html in Design view. Your text should now be dark blue (#003366).

You have now created your first CSS rule.

Open your test.css file and you will see the rule you created for the p element (see Listing 2).

body {
    color: #003366;
}

Listing 2. Your body rule

Page 2 of 5
Previous Page
Next Page