• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

4.2. Inheritance

One of the chief concepts behind CSS is that CSS properties should be able to take on, or “inherit,” the display properties of dominant HTML tags. For example, if you set specific properties for the <body> tag, all of the HTML elements that fall under this tag (which includes all displayable Web elements) should take on these same display properties. In other words, the “child” elements (tags such as <p>, <i>, <b>, etc.) should take on the display properties set by the “parent” (in this case, <body>). In effect, all of the child elements will take on the display properties set to the parent; further changes made to any child element are additive. This can be seen in Figure 4-2, which is derived largely from the code from Listing 4.1.

Listing 4.1. Sample Code Showing Inheritance

<head>
<title>Inheritance</title>
</head>
<style>
p.large-italic-blue {font-size: 24pt; font-style: italic; color: blue}
</style>
<body>
<p class="large-italic-blue">
The text in this paragraph should appear in an italic blue-colored 
24 point font. The only exception to this is <b>this bold 
section</b>. Note how the bold section (the "child") still retains
the formatting belonging to the rest of the paragraph (the "parent").
</p>
</body>
</html>


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint