Inheritance in HTML with respect to CSS:
Example 1:
<div id="div1">
<div id="div2">
<div id="div3">
...
</div>
</div>
</div>
Here, div1 is parent of div2, and div2 is parent of div3 or you can say div3 is child of div2 and div2 is child of div1
OR
Example 2:
<div id="div1">
<div id="div2">...</div>
<div id="div3">...</div>
</div>
div1 is parent of div2 & div3 And div2 & div3 are child of div1
In Example 1, if we define any css for div1, common properties will be automatically implemented on its all child contents. Suppose we define CSS
body{
font-family:arial;
color:green;
}
All the Markup tag that will be defined in body tag of an HTML document, will inherits font-family and color as defined. i.e because of body tag is parent of all other Markup tags that are defined in HTML document.
Advance rules:
Question is that, if you need to modify, or you need to apply any specific css rule on any child content, without effecting parent rules, is it possible to implement?
The answer is YES.
Solution to this problem is,
1. Inline Style for that child content can be defined in HTML.
<body style="font-family:arial;color:green;">
<h1 style="color:red;">This is Red H1</h1>
<p>abcdefghijk.........</p>
</body>
2. Using CSS (Embedded or External), defined in HTML and CSS files
In HTML:
<body>
<h1>This is Red H1</h1>
<p>abcdefghijk.........</p>
</body>
In CSS document:
body{
font-family:arial;
color:green;
}
body h1{
color:red;
}
The code represents that all the contents font-family will be arial, and color will be green except all h1 tags.
We'll discuss in next topic about advance External CSS tips.
