Designing with CSS – Part 2: Defining style properties and working with floats

Inheritance and specificity

In the exercise above, we created a CSS rule for the <p> tag element to define both the text size and the margins that surround text that is inside <p> tags. When you look at the index.html page, it may appear as though the CSS Layout already has a defined font—even though we haven’t set one. This is due to inheritance. When a CSS style is set, it will affect the element itself, as well as any other page elements within it. In this case, the <p> tag surrounds all of the text elements on the index.html page, causing the text to display differently when different values are set.

Let’s examine how inheritance works. To follow along with this next exercise, launch Dreamweaver and open index.html with the Document window set to Design view. Also, if it is not already open, access the CSS Styles panel by selecting Window > CSS Styles.

1. At the top of the CSS Styles panel, click the All button to see all the styles.
2. If the list below shows only twoColElsLtHdr.css, click the arrow to the left to expand the list of styles. Select the body rule.
3. The properties section of the CSS Styles panel updates to show the values of the body rule.
4. Click the Color Picker next to the Color property. Select a red color.

5. Notice that the text content in index.html is now displayed in red.

   In this example of inheritance, the text is inheriting its color value from the body property. If you look at the CSS Styles panel again, you’ll see the body has its font property set to 100% Verdana, Arial, Helvetica, sans-serif. Since the body surrounds all of the other elements on the page, changes made to the CSS rule for the body will cause all other elements to inherit the same styles throughout the page.

6. Select the Color Picker again and select black.
7. All of the text now returns to black.
8. Select the P rule in the top section of the CSS Styles panel.
9. Expand the font section by clicking the plus sign (+).
10. Click the Color Picker next to the Color property. Select a blue color.
11. All of the text that exists within p elements is now displayed in blue.
12. Notice that all other text (not surrounded by <p> tags) remains black.
13. Change your p element text back to black
14. Save the CSS page.

In the example above, we’ve seen that when you add a color specifically to the p element, it overrides the inherited color of black that was applied to the body rule. This is the basis of specificity, where the CSS rule applied to a tag that is most specific to a page element overrides the inherited values of other CSS rules. In this case, the color setting on the p rule is more specific to the text than the color setting on the body rule. That is why settings made to the p tag override the inherited settings of the body tag. This is an important concept when working with CSS, and you can use this to great advantage when developing your style sheets. It is also critical that you understand how this works, because it will help you troubleshoot your CSS rules as you design them.

To learn more about inheritance, see the Developer Center article, Understanding Inheritance. To find out more about how specificity works and how to use it to your advantage, read Understanding Specificity.

Page 3 of 7

Previous Page

Next Page