CSS - Grouping of Selectors
If we have a requirement to apply the same style to all the headings like h1, h2, etc. on the webpage.
We may not like to repeat the same style code for all headings.
We may use grouping options in such scenarios and use style code only once.
Let us now learn how to use grouping for styling.
Grouping reduces repetitive styling statements.
The multiple HTML elements that we are grouping should be separated using a comma.
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;}