CSS Inheritance

Pradipta Choudhury
Last Updated: May 13, 2022

Introduction:

Inheritance occurs in our day-to-day life. Children inherit their parent’s features, behavior, and personality. Inheritance occurs the same way in software development. It shaves off the repeating codes. 

But, what about CSS, the design language of the web? 

Come, let’s find out about CSS inheritance.

 

Approach: 

Some CSS properties acquire if you don't indicate an incentive for them. Discover how this works and how to utilize it for your potential benefit in this module.

Let's assume that you wrote some CSS to make elements look like a button.

You then, at that point, add a link to an article of content, with a class value of .example-button. Anyway, there's an issue; the text isn't the shading that you anticipated that it should be. How did this occur?

 

Some CSS properties inherit if you don't specify a value for them. In this case, the button is inheriting the colour from this CSS:

 

HTML:

<main>
  <div class="wrapper">
    <div class="flow">
      <a href="#" class="my-button">A link that looks like a button</a>
      <article class="flow">
        <p>
          Here is some content in an article. The <a href="#">link style</a> of the button will
          inherit from this article's CSS.
        </p>
        <p><a href="#" class="my-button">A link that looks like a button</a></p>
      </article>
    </div>
  </div>
</main>

 

 

CSS:

.my-button {
  display: inline-block;
  padding1rem 2rem;
  text-decoration: none;
  background#eabdb3;
  font: inherit;
  text-align: center;
}

/* The button will inherit this style */
article a {
  color#7c3626;
}

.my-button:hover {
  background#e2a294;
}

 

Output:

 

 

In this illustration, you'll realize why that occurs and how legacy is an incredible component to assist you with composing less CSS.

 

Inheritance flow :

We should investigate how inheritance works, utilizing this simple  piece of HTML:

 

<html>
  <body>
    <article>
      <p>hicoders this is a sample snippet code</p>
    </article>
  </body>
</html>

 

Here, the root element <html> won't inherit anything; it is the first element in the document.

 

HTML {
  Color: red;
}

 

The shading property is inheritable by different components. The HTML component has shading: red; in this way, all features that can acquire shading will presently have a shade of red.

 

body {
 font-size1.9em;
}

 

Output:

 

p {
  font-style:italic;
}

 

Just the <p> will have italic text since it's the most profound settled component. Legacy just streams downwards, not back up to parent components.

 

Output :

 

Which properties are inheritable?

Not all CSS properties are inheritable, but instead, there are a ton that are. For reference, here is the whole rundown of inheritable properties.

  • Azimuth 
  • Border-collapse 
  • Border-spacing 
  • Caption-side 
  • Color 
  • Cursor 
  • Direction 
  • Empty-cells 
  • Font-family 
  • Font-size 
  • Font-style 
  • Font-variant 
  • Font-weight 
  • Font 
  • Letter-spacing 
  • Line-height 
  • List-style-image 
  • List-style-position 
  • List-style-type 
  • List-style 
  • Orphans 
  • Quotes 
  • Text-align 
  • Text-indent 
  • Text-transform 
  • Visibility 
  • White-space 
  • Widows 
  • Word-spacing

How inheritance works 

Each HTML component has each CSS property characterized naturally with an underlying worth. An underlying worth is a property that is not acquired and appears as a default if the course neglects to work out an incentive for that component.

Properties that can be inherited are cascaded downwards, and the child will get values computed from their parents. This implies, if parent property has font-weight set to bold, then child properties will also be bold until and unless it is set to some other value.

 

Code :

 

Html :

 

<main>
  <div class="wrapper">
    <article class="flow">
      <h1>Inheritance cascades downwards</h1>
      <p>Properties that can be inherited cascade downwards, and child elements will get a computed value which represents its parent's value. This means that if a parent has <code>font-weight</code> set to <code>300</code>: all child elements will be light unless they have <code>font-weight</code> set to a different value <code>font-weight</code>, for that element. </p>
      <p>That is the case here. All text is <code>font-weight: 300</code>, but <code>&lt;span&gt;</code> elements have a <code>font-weight</code> of <code>700</code> which overrides the inheritance. <span>This sentence is wrapped in a <code>&lt;span&gt;</code>, so the text is bold weight</span>.</p>
      <p>Notice also how the inline code <em>also</em> inherits the bold <code>font-weight</code>.</p>
    </article>
  </div>
</main>

 

CSS:

 

article {
  font-weight300;
}

span {
  font-weight700;
}

 

Output :

 

 

How to explicitly inherit and control inheritance?

Legacy can influence components in unforeseen ways, CSS has apparatuses to assist with that.

 

The inherit keyword :

 

You can make any property acquire its parent's figured worth with the inherit watchword. A valuable method to utilize this watchword is to make exemptions.

 

strong {
 font-weight900;
}

 

Below code snippet sets all <strong> elements font-weight as 900.

 

.my-component {
 font-weight500;
}

 

     Below, the .my-component class is setting font-weight to 500. Now, to add <strong> elements inside .my-component:

 

.my-component strong {
 font-weight: inherit;
}

     Code :

     Html :

<main>
  <div class="wrapper">
    <article class="flow">
      <h1>Controlling and utilising inheritance</h1>
      <p>The <strong>bold elements inside a <code>&lt;strong&gt;</code></strong> have a <code>font-weight</code> of <code>900</code> by default. </p>
      <div class="my-component">
        <p>This text is in a component called <code>.my-component</code>, which has a <code>font-weight</code> of <code>500</code></p>
      </div>
      <div class="my-component">
        <p><strong>This <code>&lt;strong&gt;</code> element is inside <code>.my-component</code>. It inherits the <code>500</code> weight because it's <code>font-weight</code> is set to <code>inherit</code>.</strong></p>
      </div>
    </article>
  </div>
</main>

 

CSS :

 

strong {
  font-weight900;
}

.my-component {
  font-weight500;
}

.my-component strong {
  font-weight: inherit;
}

/* System font stack to show the difference in weights */
body {
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir,
    helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial,

    sans-serif;
}

     Output :

     Presently, the <strong> components inside .my-component  will have a textual style weight of 500.

     You could expressly set this worth, however, on the off chance that you use to acquire and the CSS of .my-component changes, later on, you can ensure that your <strong> will        consequently keep awake to date with it 

   The Initial keyword:

 

Inheritance can cause issues with your components and at first, furnishes you with an incredible reset choice. 

 

You learned before that each property has default esteem in CSS. The underlying catchphrase hinders a property to that underlying, default esteem.

 

aside strong {
 font-weight: initial;
}

 

This bit will eliminate the intense load from all <strong> components inside a <aside> component and, on second thought, make them ordinary weight, which is the underlying worth.

     Code :

     HTML :

<article>
  <p>

     <strong>

              I am a strong element that is bold because that is the inherited  

               user agent style.

     </strong>

  </p>
  <aside>
    <p>

      <strong>

              I am a strong element but my font weight is normal because it is        

              in an aside element.

      </strong>

    </p>
  </aside>
</article>

     CSS:

aside strong {
  font-weight: initial;
}


/* presentational styles */
article > * + * {
  margin-top1em;
}

 

Output : 


 

The unset keyword 

The disconnected property acts distinctively if a property is inheritable or not. If the property is heritable, the disconnected watchword will be equivalent to acquire. If the property isn't inheritable, the disconnected motto is equivalent to the underlying. 

 

Recalling which CSS properties are inheritable can be hard; disconnected can be useful in that unique circumstance. For instance, shading is inheritable, yet the edge isn't so that you can compose this:

 

/* In authorised CSS, taking global colored styles */
p {
 margin-top2em;
 color: goldenrod;
}

/* The p is “reset” so that you can use unset */
aside p {
 margin: unset;
 color: unset;
}

 

Code :

  HTML:

 

<article>
  <p>

      I have various properties set, globally.

  </p>
</article>
<aside>
  <p>

      I want the global properties set on paragraphs unset.

  </p>
</aside>

     CSS:

/* In authorised CSS, taking global colored styles */
p {
margin-top2em;
color: goldenrod;
}

/* The p is “reset”, so that you can use unset */
aside p {
margin: unset;
color: unset;
}

     Output :

     Through this, the margin is removed and it backtracks to its original value. 

/* In authorised CSS, taking global colored styles */
p {
margin-top2em;
color: goldenrod;
padding2em;
border1px solid;
}

/* Not all properties are accounted for anymore */
aside p {
margin: unset;
color: unset;
}

 

     Code: 

     Html :

<article>
  <p>

     I have various properties set, globally.

  </p>
</article>
<aside>
  <p>

     I want the global properties set on paragraphs unset.

  </p>
</aside>

     CSS:

/* In authorised CSS, taking global colored styles */
p {
margin-top2em;
color: goldenrod;
padding2em;
border1px solid;
}

/* Not all properties are accounted for anymore */
aside p {
margin: unset;
color: unset;
}

/* Decorative styles */
aside {
  margin-top2em;
}

     Output :

If you change the aside p rule to all: unset instead, it doesn't matter what global styles are applied p in the future; theyCSS inheritance will always be unset.

 

aside p {
margin: unset;
color: unset;
all: unset;
}

 

     Code:

 

     Html :

<article>
  <p>I have various properties set, globally.</p>
</article>
<aside>
  <p>I want the global properties set on paragraphs unset.</p>
</aside>

 

     CSS :

/* In authorised CSS, taking global colored styles */
p {
margin-top2em;
color: goldenrod;
padding2em;
border1px solid;
}

/* All styles are now accounted for */
aside p {
  all: unset;
}

/* Decorative styles */
aside {
  margin-top2em;
}

     Output :

 

Key takeaways:

 

Frequently asked questions:

 

What role does inheritance play in CSS?

 

Inheritance provides the default values for a particular property of an element when no values are supplied instead. 

 

What is inheritance in OOP?

 

Using inheritance, the property and methods of the parent class get inherited in the child class. 

 

Is it possible to inherit a CSS class to another?

 

No, it is not possible to inherit a CSS class to another. CSS doesn’t provide the inheritance, just as other programming languages used to do. 

 

Mention some limitations of CSS?

 

The following are the limitations of CSS:

  • CSS fails to perform logically or if/else operations.
  • It is unable to request a webpage.
  • It cannot interact with databases.

 

Which is more suitable for performing operations, inline CSS or external CSS?

 

Inline CSS is more suitable as it reduces the number of files needed to download before displaying a webpage. Rather, in external CSS, first, the HTML file is loaded and then the CSS files.

 

Key Takeaways:

 

In this blog, we learned what CSS inheritance is and the types of CSS inheritance with an example, and this will give you an obvious cut sketch of CSS inheritance.

 

Now, we recommend you practice problem sets based on these concepts to master your skills. Keeping the theoretical knowledge at our fingertips helps us get about half the work done. To gain complete understanding, practice is a must. To gain complete understanding, visit our page.
 

Keep learning - keep coding. 

 

~ Pradipta Choudhury

 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think