Раз в неделю мы отправляем дайджест с самыми популярными статьями.

Основы работы с DIV элементами на HTML странице

блоки DIV в HTML  на примере index.html с комментариями

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="divs.css">
    <title>Div элементы</title>
</head>
<body>
<!-- Тег <div> -->
<!-- Тег, который группирует контент в блоки на странице -->
<!-- Вы можете различать блоки заданные тегом <div> задав им класс -->
<div class="header">
    <h1>Заголовок Один</h1>
    <h1>Заголовок Два</h1>
</div>
<div class="main-content">
    <p>Контент</p>
</div>
</body>
</html>

блоки DIV в CSS на примере divs.css с комментариями

/*Div элементы*/
/*Тег, который группирует контент в блоки на странице*/

/*Перенастройте браузер: Удалите все отступы на странице*/
body {
    padding: 0 0 0 0;
}

/*Затем вы можете задавать стили каждой <div> секции */
.header {
    padding: 10px 10px 10px 10px;
    background-color: coral;
}

.main-content {
    padding: 20px 20px 20px 20px;
    border: 2px solid darkgreen;
    margin: 30px 0 0 0;
}

/*Ширина и высота области содержимого любого тега могут быть изменены в CSS */
.main-content {
    width: 150px;
}

/*Центрирование контента*/

/*Автоматическое значение*/
/* Вставляет контент так, чтобы занимать столько места, сколько возможно*/
/* Это заставляет контент перемещаться в противоположном направлении*/

/*Если вы хотите отцентрировать целый уровень блоков И*/
/*Он имеет фиксированную ширину ТОГДА*/
/*Установите левый и правый margin на auto*/
.main-content{
    margin: 30px auto 0 auto;
}

/*Если вы хотите отцентрировать дочерний уровень блоков ТОГДА*/
/*Установите выравнивание текста для дочерних элементов по центру*/
h1 {
    text-align: center;
}