On completion of this page you will understand:
As biological beings we inherit our genes from both of our parents. Whichever genes we inherti from each parent is entirely random and once and for all determine who we are.
In HTML/CSS elements such as body, main, article and so forth can have child elements. These child elements inherit features from their parent elements.
The inheritance in this case is much more simple than its biological counterpart: some features are inheritable and some are not. Those who are inheritable can be blocked using CSS code, while those who by default are not inheritable can be made inheritable, again using CSS code.
Here we shall look at CSS inheritance as part of web page design.
Go to top
<html lang="en">
<head>
<link href="Inheritance1.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<title>Romantic Poems</title>
</head>
<body>
<main>
<h1>Selection of Poems</h1>
<h2>Burns and Johnson</h2>
<article>
<p>Drink to me, only, with thine eyes,<br>
And I will pledge with mine;<br>
Or leave a kiss but in the cup,<br>
And I’ll not look for wine.<br>
The thirst that from the soul doth rise,<br>
Doth ask a drink divine:<br>
But might I of Jove’s nectar sup,<br>
I would not change for thine.</p>
</article>
<article>
<p>O, my Luve's like a red, red rose,<br>
That's newly sprung in June.<br>
O, my Luve's like a melodie<br>
That's sweetly play'd in tune.<br>
As fair as thou, my bonnie lass,<br>
So deep in luve am I;<br>
And I will love thee still, my dear,<br>
Till a' the seas gang dry.</p>
</article>
</main>
</body>
</html>
In order to keep our code as simple as possible we have taken some liberties with laying out the page in Listing 1. We have dispensed with the header and footer in order to focus on the main.
Apart from the headings h1 and h2 the main consists of two article blocks, each containing either a poem or an extract from one. We shall be using those two article blocks to examine how inheritance can be manipulated for styling purposes.
As the HTML code is very simple in this case we shall not explain it any further and will instead concentrate on the CSS code.
html{
color: #008;
background-color: beige;
}
main{
border: medium solid black;
border-radius: 20px;
padding: 20px;
width: 1000px;
margin: 0 auto;
}
article{
display: inline-block;
}
h1, h2{text-align: center;}
At lines 2 and 3 of Listing 2 the overall colour scheme for the page is specified: a dark blue (#008) for the text and beige for the background
Because main is a child of body, which is itself is a child of html, it will inherit those two colours as well.
We can see the result of this in Fig 1 below where the two headings are dark blue against a beige background.
The article blocks are children of main. Clearly they have inherited its text and background colours since they contain dark blue text against beige background.
Now let us look at what what was not inherited.
If we wish for the article blocks to inherit the border and padding properties we need to alter our CSS code as shown below.
html{
color: #008;
background-color: beige;
}
main{
border: medium solid black;
border-radius: 20px;
padding: 20px;
width: 1000px;
margin: 0 auto;
}
article{
display: inline-block;
border: inherit;
border-radius: inherit;
padding: inherit;
}
h1, h2{text-align: center;}
Above we have altered our styling for the article block. The three added lines are shown in bold. Rather than directly speicifying the values for the properties border, border-radius and padding, we gave then each a value of inherit. This means that they will have the exact same value as their equivalents in main.
This is shown below.
Comparing Fig 2 with Fig 1 we see that all of the three properties have been updated for the two article blocks. This is demonstrated by the fact that:
In Fig 2 above the two article blocks containing the poems are styled exactly like the main block, of which they are children. This is because they have inherited their colouring and bordering features from their parent element, main.
On the other hand, if we wished the article to have different styling from main then we need to alter the CSS code for article.
html{
color: #008;
background-color: beige;
}
main{
border: medium solid black;
border-radius: 20px;
padding: 20px;
width: 1000px;
margin: 0 auto;
}
article{
color: beige;
background-color: #008;
display: inline-block;
border: inherit;
border-radius: inherit;
padding: inherit;
}
h1, h2{text-align: center;}
The alteration is very simple as shown in Listing 4 above. We simply added two extra lines to article whice are now numbered 13 and 14. They simply change the text colour to beige and the background to dark blue. This is the reverse of the original colour scheme.
This is the result of the alteration to the CSS file.
Go to topNext we explore what to do if we wish for the first poem to be styled as the main block is styled, i.e. dark blue text and beige background, while the second poem remained as beige text and dark blue background just like Fig 3.
The necessary alteration to the HTML code is show at line 11 of Listing 4. As you can see we we have simply added a class named 'changeAll' to the article block that contains the first poem.
<html lang="en">
<head>
<link href="Inheritance2.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<title>Romantic Poems</title>
</head>
<body>
<main>
<h1>Selection of Poems</h1>
<h2>Burns and Johnson</h2>
<article class="changeAll">
<p>Drink to me, only, with thine eyes,<br>
And I will pledge with mine;<br>
Or leave a kiss but in the cup,<br>
And I’ll not look for wine.<br>
The thirst that from the soul doth rise,<br>
Doth ask a drink divine:<br>
But might I of Jove’s nectar sup,<br>
I would not change for thine.</p>
</article>
<article>
<p>O, my Luve's like a red, red rose,<br>
That's newly sprung in June.<br>
O, my Luve's like a melodie<br>
That's sweetly play'd in tune.<br>
As fair as thou, my bonnie lass,<br>
So deep in luve am I;<br>
And I will love thee still, my dear,<br>
Till a' the seas gang dry.</p>
</article>
</main>
</body>
</html>
Despite a small alteration to the HTML code we have made more extensive canges to the CSS code below. The result is that the two poems will have different presentations. The first poem will be presented as it had been before but the second one will have the text and background colours reversed.
html{
color: #008;
background-color: beige;
}
main{
border: medium solid black;
border-radius: 20px;
padding: 20px;
width: 1000px;
margin: 0 auto;
}
article{
color: beige;
background-color: #008;
display: inline-block;
border: inherit;
border-radius: inherit;
padding: inherit;
}
.changeAll{
color: revert;
background-color: revert;
}
h1, h2{text-align: center;}
Recall that lines 13 and 14 reverse the colours of the article blocks in relation to main. This is why we gave it a class 'changeAll' at line 11 of Listing 4.
The body of 'changeAll' consists of lines 21 and 22. They simply reverse the values of the properties color and background-color.
What does it mean to reverse the colours? Initially the article elements inherited the values of the text and background directly from main. The new specifications at lines 13 and 14 changed this and now article has its own colour for both text and background.
We want, however, that the first poem would be styled according to the original specification stated at lines 2 and 3. For this reason we applied the class 'changeAll' to the article block that contains the firt poem. What it does is to tell the system to ignore the new colours specified at lines 13 and 14 and instead use the colours that were inherited from main.
The result is shown below where the first poem is styled like the examples in Fig 2, while the second poem is styled with beige text and dark blue background as specified in lines 13 and 14 of Listing 4.
For our final inheritance example we shall look at another version of the poems page where there is only one level of colours. For this example the HTML file will be identical to Listing 4 above, while the CSS file is shown below in Listing 6.
main{
border: medium solid black;
border-radius: 20px;
padding: 20px;
width: 1000px;
margin: 0 auto;
}
article{
color: #008;
background-color: beige;
display: inline-block;
border: inherit;
border-radius: inherit;
padding: inherit;
}
.changeAll{
color: revert;
background-color: revert;
}
h1, h2{text-align: center;}
Here we see that there is no colour specified for main but there is both text and background colours specified for article at lines 9 and 10. Here the text colour is dark blue while the background colour is beige.
The class 'changeAll' spans lines 16 to 18 and has not changed from the previous example: it simply sets the text and background colours back to the values that they had before the specifications for article valued them at lines 9 and 10.
Of course 'changeAll' is only applied to the first poem so the second poem should be rendered as lines 9 and 10 specify, i.e. with dark blue text against a beige background
But what about the first poem? Applying the class 'changeAll' to it forces it to use the text and background colours used before lines 9 and 10 changed the to dark blue and beige. Looking at Listing 5 you may think that there has no colour specified for text or background. This is not the case however. Every browser has a default colour for text and background colours. Generally this is black text and white background. Therefore if you revert from dark blue and beige you will get black and white as shown in Fig 4 below.
Earlier we saw that the border property was not inheritable, while the color and background-color were. Why was one inheritable and not the other?
When laying out a page we generally have three colour schemes: one each for the header, main and footer
The vast majority of a page's contents will be in main. This content will be distributed among other containders such as article, section, aside and div
Generally we want colour uniformity on our page and we achieve this by giving all of the child elements of a page the same colour as their parent element.
What we have just said about colours also applies to font styles.
For the sake of uniformity of design both text properties and colour properties are inheritable. This spares us the inconvenience of having to specify colour and text properties of child elements.
On the other had there are properties that we don't want to be inheritable. Two common ones are border and width. Regarding width imagine what a web page would look like if every child element was exactly the same width as its parent element.
As a demonstration of why border is not inheritable we have prepared an example below where every element on the page has a border.
Clearly this is not a good idea. It is a good idea, however, border is not inheritable by default. Otherwise we would be writing a lot of code preventing borders from being inherited.
Go to top