Press enter to go to start of page

Cascading Style Sheets

Inheritance

Page Contents

Learning Outcomes

On completion of this page you will understand:

Go to top

Introduction

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

Basic Inheritance

Listing 1
                        <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.

Listing 2
                        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.

The result of the formatting specified in Listing 2
Fig 1

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.

Listing 3
                        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.

The result of the formatting specified in Listing 3
Fig 2

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:

Go to top

Breaking the Inherticance

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.

Listing 4
                            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.

Two article blocks with blue background and beige text
Fig 3

This is the result of the alteration to the CSS file.

Go to top

Going back to a previous Styling

Next 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.

Listing 4
                        <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.

Listing 5
                        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.

The result of the formatting specified in Listing 3
Fig 3
Go to top

Reverting to Default

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.

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.

The result of the formatting specified in Listing 3
Fig 4
Go to top

Inheritable or not. If not then why not?

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.

Demonstration of a page where every element has a border
Fig 5: Too many borders don't look good

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

Summary

The uploaded file provides a detailed explanation of CSS inheritance and its application in web design. It begins by introducing the concept of inheritance, drawing a parallel between biological inheritance and CSS properties, where child elements can inherit certain properties from their parent elements. The narrative explains that not all properties are inheritable by default, but inheritance can be manipulated using CSS.

The document outlines which properties, such as color and background-color, are inheritable by default and explains how non-inheritable properties like border and width can be made inheritable using the "inherit" keyword. Examples demonstrate how to use CSS to style child elements either in line with or distinct from their parent elements, showcasing the flexibility and control CSS offers in design.

One section delves into breaking inheritance, showing how child elements can have their styles overridden by directly specifying new values. Examples with poems are used to illustrate how to style child elements with different background and text colors, emphasizing the ability to customize designs while maintaining a coherent layout.

The file also introduces the use of the "revert" value, which allows properties to return to their original inherited or default browser values. It explores scenarios where reverting to a previous style or browser default can be useful, providing practical code snippets to demonstrate these concepts.

Additionally, the document discusses why some properties, like border and width, are not inheritable by default. It explains that inheriting these properties could lead to visual clutter or design inconsistencies, as demonstrated in an example where every element on a page has a border.

The narrative provides insights into how inheritance simplifies design by ensuring uniformity of styles for text and colors across child elements. It also highlights the importance of selectively breaking inheritance for specific design needs, making CSS a powerful tool for creating visually appealing and consistent web pages.

Lastly, the document includes links for further reading on CSS inheritance, covering additional concepts like the "initial" and "unset" values. These resources aim to deepen the reader's understanding of CSS inheritance and its role in web development.

Go to top

Revision

Multi choice

Fill in the blanks

Go to top

Assignment

Your assignment is to demonstrate your understanding of CSS inheritance based on the principles and examples provided. In a flowing narrative style, explain the concept of inheritance in CSS and how it can be applied in web design. Use the information about inheritable and non-inheritable properties, the "inherit" keyword, and the "revert" value to illustrate your points. Your response should reflect your grasp of the material by discussing these topics in detail.

Begin your narrative with a general explanation of what inheritance in CSS means and how it compares to inheritance in other contexts (e.g., biology). Provide an overview of which CSS properties are inherently inheritable, which are not, and why this distinction exists. Use examples from the material to explain the role of inheritable properties like "color" and "background-color," and non-inheritable properties such as "border" and "width."

Next, discuss how CSS enables developers to manipulate inheritance to suit specific design needs. Describe the use of the "inherit" keyword to force inheritance of non-inheritable properties and the "revert" value to return properties to their default or previously inherited state. Include examples from the material, such as how child elements inherit styles from their parent elements or how these styles can be overridden to achieve desired outcomes.

Finally, reflect on the practical implications of CSS inheritance in web design. Discuss the benefits it offers, such as consistency and efficiency, and the challenges it presents, such as the potential for visual clutter when certain properties are inherited unnecessarily. Include examples from the material that highlight these points, such as the case where borders are not inheritable by default to avoid cluttered designs.

Your submission should be at least 500 words and formatted as a cohesive narrative. While you are not required to create an actual web page, your narrative should demonstrate a clear understanding of the concepts discussed and their application in web design. Remember to structure your response clearly, using headings or sections if necessary, and ensure your points are supported by examples.

Go to top