Theory
Theory
Comments

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.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The website of a beginning coder</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>The website of a beginning coder</h1> </header> <main> <img class="avatar" src="img/raccoon.svg" width="80" height="80" alt="Avatar"> <nav class="blog-navigation"> <h2>Recent Posts</h2> <ul> <li><a href="day-1.html">Day One. How I forgot to feed the cat</a></li> <li><a href="day-2.html">Day Two. I want to become a coder</a></li> <li><a href="day-3.html">Day Three. My cat is offended at me</a></li> <li><a href="day-4.html">Day Four. How I almost got sick</a></li> <li><a href="day-5.html">Day Five. I am relaxing</a></li> <li><a href="day-6.html">Day Six. How I failed to understand anything</a></li> <li><a href="day-7.html">Day Seven. Muffin gave me an assignment</a></li> <li><a href="day-8.html">Day Eight. It’s getting very serious</a></li> <li><a href="day-9.html">Day Nine. Or more precisely night</a></li> <li><a href="day-10.html">Day Ten. Summing up</a></li> <li><a href="day-11.html">Day Eleven. Everything should be taken in moderation</a></li> <li><a href="day-12.html">Day Twelve. Everyone loves cookies</a></li> <li><a href="day-13.html">Day Thirteen. I found an article</a></li> <li><a href="day-14.html">Day Fourteen. A New Format</a></li> <li><a href="day-15.html">Day Fifteen. The Selfie Gallery</a></li> </ul> </nav> <section> <p>Greetings to everyone! Welcome to my first site. Up until just recently I had no idea what a coder does for a living, but now I have found <a href="https://htmlacademy.org/courses">interactive courses in HTML and CSS</a> and I have set myself the goal of becoming one. I even was assigned an instructor, Muffin, who does not allow me to slack off and will track my progress.</p> <p>My first assignment is to keep a diary and honestly write about all of my accomplishments.</p> </section> <section> <h2>Skills</h2> <dl class="skills"> <dt>HTML</dt>  <dd><div class="skills-level">60%</div></dd> <dt>CSS</dt> <dd><div class="skills-level">20%</div></dd> <dt>JS</dt> <dd><div class="skills-level">10%</div></dd> </dl> </section> </main> <footer> Website footer </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: "Arial", sans-serif; color: #222222; background: #ffffff url("img/bg-page.png") no-repeat top center; } h1 { font-size: 36px; line-height: normal; } h2 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } .avatar { border-radius: 50%; } .blog-navigation { margin-bottom: 30px; padding: 20px; background-color: #4470c4; border: 5px solid #2d508f; color: #ffffff; } .blog-navigation h2 { margin-top: 0; } .blog-navigation ul { list-style: none; padding-left: 0; } .blog-navigation li { margin-bottom: 5px; } .blog-navigation a { color: #ffffff; } .skills dd { margin: 0; margin-bottom: 10px; background-color: #e8e8e8; } .skills-level { font-size: 12px; text-align: center; color: #ffffff; background-color: #4470c4; } /* Uncomment the rule below */ /* .skills-level-ok { background-color: #47bb52; } */ footer { margin-top: 30px; }

Goalscompleted

Add the second skills-level-ok class to the div with the skills-level class in the first dd tag.
Uncomment the rule with the .skills-level-ok selector in the styles.

Multiple classes

Comments

Log in

Sign up

Restore access