Dreamweaver Article

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

Relevance of the Type selector

Well, it looks very nice, but what exactly does it do? And why is the paragraph text blue when the color was set on the body? Good questions. I'll give you some answers.

CSS has a fantastic thing called inheritance, which allows styles to be inherited—that is, be used in other rules without having to specifically declare them. This is why your paragraph text is blue; it has inherited the color from the body rule. Inheritance can go a long way toward keeping your style sheet down to a minimal size. Imagine this scenario:

You have the following elements on your page:

• h1
• h2
• h3
• h4
• p
• blockquote
• Ordered list
• Unordered list

Without inheritance, you would need to set a specific color value against each of those elements. In total you would declare the color value eight times. Inheritance allows you to define the color just once on the body, and because each of the eight elements in the list are all within the body, they can inherit its color value. Cool, huh?

With the exceptions listed below follow the steps you used above to create the body rule, but this time you will create a rule for the p element.

In the previous section, replace Step 3 with this:

3. Type p into the Tag field.

Replace Steps 8, 9, and 10 with the following three steps:

8. Select Background in the Category list.
9. Click the Color option cube.
10. Select #ffff00 with the color picker (yellow) and click OK.

All other steps are the same. The p rule should now appear in the CSS panel (see Figure 5).

Figure 5. The p rule in the CSS panel

Viewing your elements.html page, you will now see that your paragraph of text has a yellow background. You can also see that the background runs the width of your page with the exception of any default margins on the body.

A paragraph is a block-level element. All block-level elements expand to fill their containing element unless you restrict them in some way. You will now remove the default margins from your body element. When you do so, notice how your paragraph moves into the newly available space as the restrictions placed on it by the body margins are removed.

You will now add more properties and values to your p rule—on this occasion, using the longhand syntax. Check your current settings by pressing Control+U to open your Preferences panel. Select the CSS styles option from the Category list and match your settings to those shown in Figure 6.

Figure 6. Setting your preferences for writing CSS in longhand

When your settings match, click OK.

Now complete the following steps:

1. Select the body rule in the CSS panel.
2. Click the Add Property link.
3. Select margin from the pop-up menu.
4. Type 0 into the Value field. Your paragraph now repositions itself to take advantage of the newly available space.
5. Select the p rule in your CSS panel and click the Add Property link.
6. Select margin-top from the pop-up menu.
7. Type 20 into the Value field. The unit of measure defaults to pixels and you can accept that.
8. Click the Add Property link and select margin-left from the pop-up menu.
9. Type 20 into the Value field. The unit of measure defaults to pixels and you can accept that.
10. Click the Add Property link and select width from the pop-up menu.
11. Type 200 into the Value field. The measurement defaults to pixels and you can accept that.

Some examples of block-level elements include the following:

• div
• headings
• p
• lists
• blockquote
• table
• pre
• form

The opposite of a block-level element is an inline element, which can exist on the same line as another inline element—whereas a block-level element always wants to occupy its own line. A block-level element forces elements that follow down to the next line while positioning itself below preceding content.

It is possible to move block-level elements out of the document flow so that they can sit next to each other without forcing adjacent content onto a separate line. This is, in fact, the technique that forms the very basis of designing layouts with CSS. (But this is something for much later on in this series, so I'll leave that there for now.)

Here are some examples of inline elements:

• span
• a
• strong
• em
• img
• input
• label
• abbr
• acronym
• cite
• q

There are a few more I could have listed, but the ones here are likely the most commonly used.

Page 3 of 5

Previous Page

Next Page