class attribute

6.1 The class attribute and the style tag

But that's not all. After hundreds of "styles" were invented, the question arose: how to use them? And then they came up with the idea of ​​grouping them into “classes”. These are, of course, not the same classes as in Java. Just special style groups.

And if before using “classes” you had a picture:

<img src="logo.png" style="width=100px;height=100px;opacity=0.5">

Now it could be written as:

<img src="logo.png" class="picture">

<style>
    img.picture {
        width=100px;
        height=100px;
        opacity=0.5
    }
</style>

We created a special one «style» pictureand transferred the style values ​​from the style. And then we tied the <img> and the "style" picture with the tag class.

6.2 Selector, types of selectors

These styles, rendered separately, became known as classes or selectors. They have several important features.

One html-elementcan have multiple selectors. Their names are indicated with a space. Example:

<img src="logo.png" class="picture main">

One reason we've touched on selectors here is because they can be applied automatically. And this useful property will be used very often in the future. Including Java developers.

Here is a short list of them:

* {
  margin: 0;
  padding: 0;
}

#img123 {
   width:100px;
   height 100px;
}

table {
   color: black;
}

table.important {
   color: red;
}

.picture {
  opacity: 0.5
}

main article {
  color: blue;
}

a:link {
color: blue;
}

a:visited {
color: red;
}

input[type=radio]:checked {
 border: 1px solid black;
}

div:hover {
  background: red;
}

ul li:first-child {
 border-top: none;
}

You don't have to memorize it all. But it would be good if you studied this table a couple of times and all this was deposited in your head. Without the web in modern life, nowhere, and on the web - nowhere without selectors.