Что такое классы в CSS

Last updated: 9 мая 2025 г.

А что, если мы хотим применить определённый набор CSS-свойств вообще к любому элементу на странице, не указывая конкретный тег, например h1 { ... } или p { ... }?

Для этого используются классы.

Классы определяются в css файлике. У класса есть имя и оно может быть любым, его придумывает программист. Этому имени сопоставляется определённый набор CSS-свойств.

1/*создаем класс с именем imagePropsClass.
2Теперь свойства в этом классе можно применить
3к любому тегу на html странице*/
4.imagePropsClass {
5    width: 600px; /*ширина html тега*/
6    height: 350px; /*высота html тега*/
7}
8
9/*ниже из прошлых уроков*/
10h1, h2 {
11    font-weight: 600;
12    font-family: ‘Brush Script MT’, cursive;
13}
14
15h3 {
16    font-weight: 600;
17    font-family: ‘Courier New’, monospace;
18}
19
20img {
21    border-style: dashed;
22    border-color: red;
23    border-radius: 15px;
24}

Всё, что нужно, чтобы применить этот набор свойств к конкретному элементу на html странице, это указать это имя класса в аттрибуте class этого элемента

1<!DOCTYPE HTML>
2<html>
3<head>
4    <title>Page tab text</title>
5    <link rel="stylesheet" href="C:\HTML\style.css" />
6</head>
7<body>
8    <!-- применяем свойства класса imagePropsClass 
9    к картинке с помощью атрибута class. -->
10    <center>
11        <img decoding="async" class="imagePropsClass" 
12         src="C:\HTML\PatrickLearnsHtml.png">
13    </center>
14</body>
15</html>