You already know how to apply the same style to all elements of the same type. This is usually a good practice because it keeps the design of your page coherent. However, there are a limited number of useful element types, and sometimes a web page needs more than one type of paragraph...
You also know how to customize individual elements using style attributes. This is great for trying out lots of distinct styles, but if you're trying to make a group of similar elements, it would be tedious to manually set all the same style properties on each individual element...
The solution is the class attribute, which allows you to invent new types of elements and re-use them as much as you'd like. It has nothing to do with school or social rank! Instead, think of it as classifying elements by their purpose.
Both of the above elements are like paragraphs, but with a more specific purpose: to display messages that people might send to each other. I added the attribute class="message" to these elements. You can name your classes after any word you want, but I recommend naming them after their purpose, rather than what they look like, since you may decide to change what they look like later!
And this is how I styled those messages. I could have just added style attributes with all of these settings to each of the messages, but that would be redundant if they're supposed to look the same. Besides, I think it's a lot easier to read the style settings and the messages elements themselves if we keep them separate in the script.
Also note the period at the beginning of ".message" in the style element. That is how CSS distinguishes between classes and ordinary element names like "p" or "body", so it's very important to remember to include the period, otherwise the style won't get applied to your elements correctly.
Classes can give a new purpose to any kind of element, but the element still serves its original purpose, so you should choose an appropriate element as a starting point. For example, imagine you're designing a menu for a restaurant website. A menu is basically just a special kind of list, right? So the ul and li elements would be most appropriate.
As another example, I'd like to add some buttons at the bottom of this tutorial page that can take you to the previous or next page. Of course, they're really just links to other pages! However, ordinary links are usually blue text in a paragraph that can refer to any page on the internet, and often use target="_blank" to open a separate browsing session. I want to make it obvious that these links just continue the current session on this website, so I'll add a class called "navigation" to these links, like this: