How to Use CSS class and ID selectors in HTML In this tutorial, you will learn the difference in Class and ID Selectors
The difference in Class and ID
A class is a style that can be duplicated on the page multiple times. For instance, if you want every div tag with the class “green box” to have a green background with a black border, you would write it like this:
<div class="greenbox">
</div>If you wanted to make more than one of these boxes on the page it would need to be a class.
But suppose you only want it to show up on the page once?
Then you would make it an id, which would look like this:
<div id="greenbox">
</div>Selecting IDs and Classes with CSS
To select a class in your CSS you use a dot before the class name. So following the previous example, the CSS would go something like this (entering your values):
.greenbox { background: green; border: 2px solid #000; }To select an ID, you use the pound sign (#). Again, following the previous example, the CSS would look like this:
#greenbox { background: green; border: 2px solid #000; }And that’s pretty much it! Happy coding 🙂
