HTML/CSS Heredity & Other Relations

Heredity is the passing of traits from parents to their offspring. Ok, that's part of the dictionary definition, but what does this have to do with HTML? Did you know that there is heredity being passed down through our HTML tags? Well, heredity, as in "passing of traits", or in this case, properties. Properties are beings passed down to nested, or child tags from the parent. Now, if it seems we have gotten off track and you feel like you stumbled across a topic on genetics, let's start from the beginning.

In a standard HTML structure of tags we have a hierarchy of sorts. Tags can be nested inside of other tags. The most common nesting of tags is that most of our content tags are nested inside of the <body> tag.

    <h1>HTML Heredity & Other Relations</h1>
    <p><strong>Heredity</strong> is the passing of traits from parents to their offspring.</p>

Look at the code above. Both the <h1> and the <p> tag are nested inside of the <body> tag. And, the <strong> tag is nested inside of the <p> tag. In HTML we refer to this nesting as a parent/child relationship. The <body> tag is the parent of the <h1> and <p> tags, and conversely the <h1> and <p> tags are children of the <body> tag. In our example the <p> tag is also a parent of the <strong> tag and, you guessed it, the <strong> tag is a child of the <p> tag.

Traits, or properties of these HTML tags are passed down to their descendants much in the same way we inherit traits from our ancestors. If we set a font color of blue for the <body> tag, then all of the tag's children will inherit that color. In the <strong> tag's case, it is inheriting the color from its parent, the <p> tag, which in turn got it from its parent, the <body> tag. This is why we often use the <body> tag properties as a way to set the defaults on a web page. We create a CSS style rule for the <body> tag and declare anything we don't want to leave up to the browser to decide, like font color, type, and size, because we know that all of the descendants will inherit those properties. So, if we never set font properties for the <p> tags, they will still be set by the <body> through inheritance.

Now you may be thinking, "That's all well and good, but if all the children of the <body> inherit font properties, and we set the <body> font size to 14px, then how come the <h1> tag still show as a larger font-size?" Good question! I'm glad you are paying attention.

By design, some tags do NOT inherit certain properties. Our <h1> tag will never inherit font-size from its parent, and for good reason. How would the reader know it was a heading if it looked like everything else on the page? There are other tags that don't inherit certain properties. Take the <a> tag for example. It does not inherit font color or text-decoration. That is why without intervention from an 'a' selector in the CSS styles, the <a> tag is blue and underlined by default. Again, if it just looked like the paragraph around it, how would the reader know it was a clickable link?

There are also certain properties in general that don't get inherited regardless of tag type. The margin and padding properties for example. Just because you set a margin on the <body> wouldn't mean that you want ALL the tags to have that same margin. You can find a complete list of properties at that indicates whether a property in general is inherited or not.

Something else to consider. If we do set a particular property on a tag through CSS, then that property will not inherit from its parent. We have overridden that default inheritance. So, as a general rule you could say that inheritable properties will inherit the value from their parent unless specifically set from a rule in the CSS styles.

Let's look at an interesting example that comes up my HTML and CSS training class here at Training Connection. Consider the follow HTML and CSS code:

    p {
        font-size: small;
        color: navy;
    .fun {
        color: #339999;
        font-family: Georgia, Times, serif;
        letter-spacing: 0.05em;
    } {
     font-style: italic;

    <blockquote class="fun">
        <p>"Four score and seven years ago..."</p>

The result of this code will make this quote from the "Gettysburg Address" appear in a navy color, font Georgia, and letter spacing of 0.05em. (If you don't know what an 'em' is, look at this article, "The Trouble With EM 'n EN", by Alistapart Magazine.) When my students first apply the class of 'fun' to the <blockquote> they wonder why the color is navy and not #339999 (that's teal).

Well, let's look at the general rule I mentioned above one more time, "Inheritable properties will inherit the value from their parent unless specifically set from a rule in the CSS styles". Look at the style section of the code. You see, there is a rule for the <p> tag to set the color to navy. The 'fun' class was assigned to the <blockquote>, not the <p>. The <p> tag will not inherit font color from its parent because it has specifically been told to have a font color of navy from a rule in the CSS styles. If we move the class of 'fun' out of the <blockquote> and assign it to the <p> tag instead, then the paragraph will take on the teal color.

If you don't understand why the <p> tag with a class of 'fun' would take on the '.fun' rule properties and not the 'p' rule properties then you should see my article, "Being Specific. CSS Specificity Demystified!".

As you can see, especially from our example above, that understanding how HTML/CSS inheritance works will go a long way in understanding how the elements render on the web page.


Related HTML/CSS Lessons

Onsite HTML/CSS training

Through our network of local trainers we deliver onsite HTML/CSS classes right across the country. Obtain a quote for an onsite HTML/CSS class.

To view a sample of our past students testimonials, please click on the following link: HTML/CSS reviews.