CSS - Class Selector
If we have a requirement to apply the same style rules to many HTML elements where the HTML elements are not of the same type.
We will not be able to use element selector or id selectors in this case as element selector can select only the particular type of elements and id selector will be able to select only one element.
We can use the class selector in this scenario.
Let us now learn how to use the class selector.
Class selectors match an element based on the contents of the element’s class attribute and apply the styling.
When you want to style a set of elements with common styling you can assign a single class name to a set of elements.
All the elements with that class name will be applied with the same styling.
The class name should be prefixed with a “.”
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;}