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 🙂

Add CSS in html

Categorized in:

Web Design

Tagged in:

,