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)