CSS - Inheritance
If we have a requirement that entire content in the webpage is to be displayed in a particular font-style or font-size.
In this scenario, you should not try styling all the elements individually using id selector, element selector or class selector but use the concept of inheritance.
Style can be applied to body element only and all the elements within the body will have those styles.
This is because all the elements within the body tag can inherit styles from it.
Let us explore inheritance in CSS.
The child elements can inherit the style properties of the parent element but the styling is not always inherited by child elements.
Some of the CSS style properties have “inherit” value associated with them. For example, Font and Text properties are inherited but the border and margin properties are not inherited.
If the “inherit” value is associated with the property then styling is also inherited. Otherwise, styling is not inherited.
If we want the styling which is not inherited by default to be inherited then we have to specify inherit to the style attribute explicitly.
Example :
border: inherit;
In the previous example, we saw that the font-size property is inherited by the child element by default.
In this example, we can observe that the border property is not inherited by the child element.
In the previous example, we observed that border property was not inherited by default.
In this example we can observe the border property is inherited by the child element using inherit.
Demo
<!doctype html>
<head>
<title>Home Page</title>
<meta charset="UTF-8">
</head>
<body>
<table border="1" align="center">
<tr>
<td width="800px" height="100px">
<h2>Global Bank</h2>
</td>
</tr>
</table>
<table border="1" align="center" bordercolor="#8598CC" cellpadding="2">
<tr>
<td width="700px">
<section>
<h3>Welcome to Global Bank details Page !</h3><br />
<p>Welcome User</p><br /><br />
</section>
<table border="4 solid" align="center" bordercolor="#8598CC">
<tr>
<td>
<h3>To know your account details click on the following tabs</h3>
<table cellpadding="5">
<tr>
<td>
<form name="loginForm" action="accountSummary.html">
<button type="submit">Account Summary</button>
</form>
</td>
</tr>
<tr>
<td>
<form name="loginForm" action="funds.html">
<button type="submit">Transfer Funds</button>
</form>
</td>
</tr>
<tr>
<td>
<form name="loginForm" action="loan.html">
<button type="submit">Apply for loan</button>
</form>
</td>
</tr>
</table>
</td>
</tr><br />
</table><br />
<p dir="rtl"> <a href="home2.html">Logout</a></p>
</td>
</tr>
</table>
<table border="1" align="center">
<tr>
<td width="800px" height="30px">
<footer>
<b>© Global Bank</b>
</footer>
</td>
</tr>
</table>
</body>
</html>
body{background-color:lightgrey;}