Interactive online courses HTML Academy
2026-03-09 10:53 Diff
https://htmlacademy.org/courses/html-css-basics/css-essentials/css-multiple-classes

Let’s reinforce what we learned about this styling technique using multiple classes, which we already used in the introductory chapter. Let’s consider a short example in order to recall how this technique works. Suppose you have different types of notifications on your website:

<div class="alert">A simple message.</div> <div class="alert alert-error">A mis-s-s-take! Everything is go-o-o-one!</div>

They all have the same styles with the exception of the background. The background for ordinary messages is gray, whereas the background for errors is red. We can specify the styles for these notifications in the following way:

.alert { /* Properties for frames, margins, etc. */ background-color: lightgrey; } .alert-error { background-color: red; }

All messages have the alert class with common styles. The alert-error class with its own styles is used only for errors. Remember that if several classes are assigned to the class attribute, then they are separated by spaces.

Why is it better to organize the code in this way? We already know how cascading works in CSS, so it’s easy to give you an answer.

The use of several classes in the markup helps us to clearly specify which styles will be combined using the cascading mechanism. Of course, it is the easiest option to list these styles in the code, one next to the other.

The use of selectors of the same type (such as, for example, class selectors) makes it possible to use the simplest mechanism for resolving conflicts: according to the order in which they occur in the code. Let’s place the private CSS rules after the common ones along with everything that needs to be redefined more exactly.

And now, since we fully understand what is happening, let’s improve the skill block: let’s make our high-percentage scale green. To do this, add another class to the markup and also add a CSS rule for this class to the styles. Make sure to add these entries after the general CSS rule.