The title is a bit misleading. There's really no true inhertance in CSS. But that doesn't mean we can't do inheritance-like things. For example, say we wanted to make a css class called "button" that would apply a bunch of styles to make something look like a button. The styling for that class might look something like this:
.button { /* base styles for all buttons */
display: inline-block;
margin: 5px;
font-weight: bold;
font-size: 12px;
text-align: center;
padding: 8px 12px;
border-radius: 3px; /* css3 */
box-shadow: 1px 1px 8px #666; /* css3 */
background-color: #f6f6f6;
cursor: pointer; /* makes the cursor a "hand" instead of a "pointer" */
}
Now we've got a nice gray button. Hooray! But what if want to make a green button now, to indicate positive actions? We might consider making a new class, copying all the styling from the existing buttons, but changing the background color. But this would be a lot of duplicate code.
Ideally, we'd be able to specify that the button-good class inhertis all of it's styles from the button class. Unfortunately, no such structure exists in CSS. But we can do something that is effectively the same. For example, here's our new button-green class:
.button-good { /* a green button */
background-color: #66bb66;
}
Note that all it contains is the background-color rule. Now, our html might look like this:
<div class="button button-good">Press Me!</div>
Here we've given the element both the button and button-good classes, so both sets of styles will be applied. On the background-color property though, we've got two values specified, one from each class. However, as long as we've defined the styles for button-good after the styles for button in the css file, the background-color from button-good will be applied. The ordering of the class names in the html has no effect.
.
For a more complete example of this technique, see this link.
