In the last video, we talked about HTML IDs, and in this one, we're going to talk about classes.

At first look, IDs and classes may seem similar, but they have one important distinction-- IDs have to be unique whereas classes can be reused. In other words, multiple elements in your page can have the same class, but they can't have the same ID. Though HTML does not register an error while rendering a page with multiple IDs, it can be troublesome to the overall organization of the page.

Classes are mostly used for styling different elements. For example, we have a certain style for all titles, and these titles are defined under a class called "Title". Now, if we want to change the font for all the titles, all that we have to do is simply change it in the class. This is much more efficient than changing the style of every title individually.

Now, let's change all IDs to classes, refresh the browser, right-click on the page and select "Inspect". If you see, the "#" tag is replaced with a "."

This is because "#" symbol is used only for IDs, whereas classes are represented by "."

If you want to see the distinction more clearly, change one of the values to ID, and keep the other one as class. If you refresh the browser, the difference is evident.

Although the idea of IDs and classes may be difficult to grasp, you'll appreciate these differences when we begin utilizing them in the next section.