Question:

Describe what style inheritance is and use examples to fully describe how it works.

Rules of Style Inheritance

Style Inheritance is a common theme when we are dealing with CSS, let’s discuss several rules of this everyday concept.

1. Styles can be inherited from a parent

Certain styles can be inherited from a parent such as font-family, color, padding, etc. There are styles such as border though that will not be inherited which is good because then we would probably end up with border where we dont want any. Of course we change this by using the style="border:inherit;" to allow the paragraph to inherit the border from the parent div.


Example showing inheritance

I'm text that's part of the div.

This is just an example. See I'm a paragraph that inherited from my parent the div.

Notice how the paragraph doesn’t inherit the parents border lets change that.


Example showing paragraph border:inherit style

I'm text that's part of the div.

I'm a paragraph and I inherited the divs border property because I was told too or else I wouldn't have done it otherwise.

2. Later styles Rule All

We have covered this topic before but it is an important concept to be aware of so let’s touch on it here. What ever style comes last which means that is read last by the browser that style will be the one that shows up on the webpage. This is the core of style inheritance.


Example of Later styles rule

I'm part of the body.

I am a paragraph with a style that came last in the styles so I overrode the other div's yellow background


This also applies to stylesheets in the order that you list them in your html header so the last stylesheet will override any styles in previous sheets.

3.Different sources are allowed for styles

There can be different sources as we touched upon in our last rule that means as long as later styles don’t override previous styles you can have changes coming in various formats such as:

  • external stylesheets
  • on-page style definitions
  • inline styles
  • inherited styles from a parent

4.You can style elements that are nested

Using this as an example you can see how you can target nested elements with the style

div div {
 this will target all divs that are nested in another div
}

ul li {
    will target all li element within ul tag
}

li a {
    will target all a tags within li elements
}

5.You can target an element in various ways

Examples:

.class {
 using a class 
}

#id {
 using an id
}

div {
    using plain html this will target all divs
}

This was a quick showing of how you can target elements in ways to style them using ids, classes and plain html or a combination of several.

Summary

These are the main pillars of style inheritance and now you should have a good a idea what the rules are.