Inheritance in CSS

The intelligent application of this concept allows to define centralized way all the general properties of the application (such as, for example, the font and its size, the background color, etc.) instead of having to assign the same properties to each of the elements each time.

Inheritance in CSS | Learn CSS | The intelligent application of this concept allows to define centralized way all the general properties of the application (such as, for example, the font and its size, the background color, etc.) instead of having to assign the same properties to each of the elements each time

The intelligent application of this concept allows to define in a centralized way all the general properties of the application (such as, for example, the font and its size, the background color, etc.) instead of having to assign the same ones each time properties to each of the elements.

The style sheets remain so short and clear and are easy to maintain.

The properties assigned to certain elements pass as inheritance to the child elements. Of course, an element can also inherit the inherited properties of its parents from its parents.

But how exactly does an inheritance occur? Let's see what an HTML code without inheritance would look like:

<div id=”box”>
<p>Texto</p>
<ul>
<li>entry 1</li>
<li>entry 2</li>
</ul>
<p>Other text</p>
</div>

Suppose that the text of Box1 we want to give a different font and font size to the rest of the document. Without inheritance, we would have to explicitly define these modifications for each type of existing element in Box, for example, with the help of an offspring selector:

#box1 p {
font-family: Arial, sans-serif;
font-size:85%;
}
#box li {
font-family: Arial, sans-serif;
font-size:85%;
}

Then we would have to add one more selector for each type of item in Box1.

But thanks to the mechanism of inheritance is enough with a single selector. So:

#box {
font-family: Arial, sans-serif;
font-size:85%;
}

The defined source and font size are inherited by all child elements of the element whose id = "box1", in this case, the <p> and <li> elements.

Here we can see the advantages of defining basic properties such as fonts, font sizes and colors as soon as possible, for example for the <body> element, so that they do not have to be repeated for each element of the document.

Inheritance of relative values

The inheritance of relative values such as, for example, the size of the source in MS, or percentages, is often the cause of unpleasant surprises. The relative values are defined with respect to other quantities. This implies that a representable value must be calculated (on screen) from the value defined in an instruction. This calculation is done in four steps:

  1. Based on the instructions of all the referenced style sheets, a specific value is assigned
  2. Taking the cascade into account, the calculated value is diverted and inherited by the child elements
  3. In the next step, the relative value in pixels is calculated. The result is the value that is used, that is, the absolute and definitive value that is used for the design itself
  4. A pixel value expressed as a whole number is required for screen representation. The fourth and final step consists of a rounding process with which the current value is determined and applied to the corresponding element
🤖

ChatGPT Free
Ask questions on any topic

CITE ARTICLE


For homework, research, thesis, books, magazines, blogs or academic articles

APA Format Reference:

Delgado, Hugo. (2019).
Inheritance in CSS.
Retrieved Mar 15, 2024, from
https://disenowebakus.net/en/inheritance-css

Participates!

Share it with your friends in Social Networks!

Professor at the University of Guadalajara

Hugo Delgado Desarrollador y Diseñador Web en Puerto Vallarta

Professional in Web Development and SEO Positioning for more than 10 continuous years.
We have more than 200 certificates and recognitions in the Academic and Professional trajectory, including diploma certificates certified by Google.

CONTINUE LEARNING

IT ALSO DESERVES TO PAY TO VISIT:

Not finding what you need?

Use our internal search to discover more information
Related content:

Would you like to learn more about Web Design?

Meet all the courses and tutorials that we have for you completely free
Learn Web Design
 

Leave your Comment

SPONSOR

Your business can also appear here. More information

Next article:

Your browser has blocked advertising.
Please 🙏 allow to visualize the announcements to be able to access, thank you.