1. Пример HTML-страницы:

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<title>Мой сайт</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<h1>Мой сайт</h1>

<p>Добро пожаловать</p>

</body>

</html>

CSS-код (style.css):

h1 {

color: blue;

}

p {

font-size: 18px;

}

Результат: заголовок отображается синим цветом, а текст абзаца имеет размер 18 пикселей.

2. Пример использования класса:

HTML-код:

<p class="info">Первый абзац.</p>

<p class="info">Второй абзац.</p>

CSS-код:

.info {

color: green;

background-color: lightgray;

}

Результат: оба абзаца отображаются зелёным текстом на светло-сером фоне.

3. Пример оформления блока:

HTML-код:

<div class="box">

Содержимое блока

</div>

CSS-код:

.box {

width: 250px;

padding: 15px;

border: 1px solid black;

}

Результат: отображается блок шириной 250 пикселей с внутренними отступами и чёрной границей. При стандартном значении box-sizing: content-box общая ширина блока с границами составляет 282 пикселя.