CSS 4
Grouping of Elements
Class Attribute
The class attribute is used to define a related group of HTML elements on a page.
Attribute : class="whatever name you want to give"
For example is Html code is
<html>
<head>
<title>My PAGE</title>
</head>
<body>
<p>This is a para</p>
<ul>
<li>Sample 1</li>
<li>Sample 2</li>
</ul>
<p>This is 2nd Para</p>
<ul>
<li>Sample 1</li>
<li>Sample 2</li>
</ul>
</body>
</html>
Class Attribute
The class attribute is used to define a related group of HTML elements on a page.
Attribute : class="whatever name you want to give"
For example is Html code is
<html>
<head>
<title>My PAGE</title>
</head>
<body>
<p>This is a para</p>
<ul>
<li>Sample 1</li>
<li>Sample 2</li>
</ul>
<p>This is 2nd Para</p>
<ul>
<li>Sample 1</li>
<li>Sample 2</li>
</ul>
</body>
</html>
Now if you want to color sample 1 Blue and sample 2 as Red . so, you can use this attribute
<html>
<head>
<title>My PAGE</title>
</head>
<body>
<p>This is a para</p>
<ul>
<li class="a">Sample 1</li>
<li class="b">Sample 2</li>
</ul>
<p>This is 2nd Para</p>
<ul>
<li class="a">Sample 1</li>
<li class="b">Sample 2</li>
</ul>
</body>
</html>
Css
.a {
color: blue;
}
.b {
color: red;
}
<head>
<title>My PAGE</title>
</head>
<body>
<p>This is a para</p>
<ul>
<li class="a">Sample 1</li>
<li class="b">Sample 2</li>
</ul>
<p>This is 2nd Para</p>
<ul>
<li class="a">Sample 1</li>
<li class="b">Sample 2</li>
</ul>
</body>
</html>
Css
.a {
color: blue;
}
.b {
color: red;
}
Result
0 Comments