CSS id and class selectors are often used to style web page elements. The id (unique identifier) selector uses the id attribute of an HTML element to select a specific element. To specify the id, you can use # symbol followed by the element. For instance, #design.
The class selector is used when the same style must be applied to multiple HTML elements. It is specified with ( . ) character followed by class name. For example, .info
Difference Between id and class
| id | class |
|---|---|
| The id is a unique identifier | Classes are not unique |
| Each element can have only one id | The same class can be used on multiple HTML elements |
| A specific style must be applied to a single HTML element | The Same style must be applied to multiple HTML elements |
Example for the id Selector:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#blue {
color: #1c87c9;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p id="blue">The second paragraph.</p>
<p>The third paragraph.</p>
</body>
</html>
In the above code, we have assigned blue as id selector to the second paragraph and declared a style using the color property inside the head section.
Result:
After executing the above code, you will get the output as shown in the below image.
Example for the id Selector:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>
<h2 class="blue">This is some heading.</h2>
<p>The second paragraph.</p>
<p class="blue">The third paragraph.</p>
</body>
</html>
In this code, the class selector is used twice in the heading and paragraph. We have assigned blue as a class selector and declared its style using color property inside the head section.
Result:
By running the above code, you will see the result as given in the below image.
The post CSS id and class appeared first on Share Point Anchor.
Top comments (0)