CSS, Technology

How CSS inheritance affects the HTML tags output

inheritance_in_cssInheritance is the basement of the CSS structures. Elements’ properties can actually inherit the values from the dominant HTML tags unless you specify a different value for a child element (i.e. <h1 style="font-family:Arial, Helvetica, sans-serif; font-size:13px; font-weight:normal;">....</h1> has a style defined inside the h1 tag, a so-called child element). If no value defined for the clild element, the entire content of the page follows the rule defined by the dominant tags (usually defined in the head section of the page or included from an external CSS file). You must also pay attention that not all properties such as borders, paddings or margins are inherited by the clild elements.

There are three ways to define CSS styles:

    1. external CSS linked from the HTML page (with a code like this: <link rel="stylesheet" href="mystyle.css" type="text/css">)

  • internal CSS (usually defined in the Head section of the page)

  • inline CSS (whose properties only affect the HTML tags they are defined into)

Having an idea about how CSS can be defined is crucial to understand how and which HTML tag inhertis the CSS properties. In other words, the uppermost in the hierarchy is the element appearing closest to the HTML tag. The inline style is the latest applied by the browser so its properties prevail over other previously defined styles in the HTML page.

Internal CSS’s properties prevail over those defined by the external CSS and inline CSS prevail over both the internal and external.

Let’s have the following example of an external CSS declared as a file called mystyle.css

.myclass {
background-color:blue;
}

Then mystyle.css gets imported into the HTML page where an inline and an internal style are defined as following:

<link rel="stylesheet" href="mystyle.css" type="text/css">
<style type="text/css">
. myclass {
background-color:white;
}
</style>
<article style="background-color:red; ">
My CSS file.
</article>

Now, let’s see which color will the browser output for the background color of the <article> tag?.

According to the CSS inheritance, the last style is which actually defines the appearance of the <article> tag, so the answer to the question is: The background color is red.

One Comment

  1. Hi,

    Nice article.. What if none of the above css styles ( external, internal or inline ) are defined in the html page.
    then what style would be applied to the elements in the html page.

If you have any questions, please ask below!