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.
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:
- Based on the instructions of all the referenced style sheets, a specific value is assigned
- Taking the cascade into account, the calculated value is diverted and inherited by the child elements
- 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
- 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 Dec 13, 2024, from
https://disenowebakus.net/en/inheritance-css
Participates!
Share it with your friends in Social Networks!CONTINUE LEARNING
IT ALSO DESERVES TO PAY TO VISIT:
The usability is a feature that measures how intuitive and easy to use is a web page for the common...
With style sheets we should also strive to eliminate all superfluous bytes and Keep the instructions...
CSS allows to release the elements of the normal flow of the document and position them at will with...
The first part of a CSS instruction consists of a selector, which is the one that creates the link...
