I forgot about <h1/2/3…> 
This is a task from course. I should do something like this
Complete CSS:
@font-face {
font-family: "Merriweather";
src: url(../fonts/Merriweather-Regular.ttf) format("truetype"),
url(../fonts/Merriweather-Italic.ttf) format("truetype"),
url(../fonts/Merriweather-Bold.ttf) format("truetype");
}
@font-face {
font-family: "Fira Sans";
src: url(../fonts/FiraSans-Bold.ttf) format("truetype"),
url(../fonts/FiraSans-Italic.ttf) format("truetype"),
url(../fonts/FiraSans-Regular.ttf) format("truetype");
}
@font-face {
font-family: "Fira Sans Light";
src: url(../fonts/FiraSans-Light.ttf) format("truetype");
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 14px;
}
header,
section {
width: 80%;
margin: 0 auto;
}
/* Header */
header .heading {
text-align: left;
font-size: 2.2em;
margin: 20px 0;
font-weight: bold;
}
section {
border: 2px solid darkgrey;
padding-left: 10px;
}
section .heading {
margin: 30px 0;
font-size: 1.5em;
font-weight: bold;
}
/* Colors */
div.color-block {
display: inline-block;
min-width: 100px;
width: 33%;
height: 100px;
margin: 0px 0px 20px 0px;
text-align: center;
}
.color-block div {
margin: 20px 0;
font-size: 1.2em;
}
.white-font {
color: white;
}
.blue {
background-color: #2d5dcc;
}
.pink {
background-color: #d957d9;
}
.green {
background-color: #4fe0b0;
}
.beige {
background-color: #efd9ca;
}
/* Fonts */
section.fonts {
border: 2px solid darkgrey;
position: relative;
top: 10px;
}
div.font-block {
display: inline-block;
min-width: 100px;
width: 45%;
margin: 0px 25px 20px 0px;
text-align: left;
vertical-align: top;
}
.subHeading {
text-align: left;
font-size: 1.3em;
font-weight: bold;
text-decoration: underline;
}
.font-block p {
margin: 20px 0;
font-size: 1.2em;
}
/* Font types */
.italicMerri {
font-style: italic;
font-family: "Merriweather", "Calibri", serif;
}
.boldMerri {
font-weight: bold;
font-family: "Merriweather", "Calibri", serif;
}
.regularMerri {
font-family: "Merriweather", "Calibri", serif;
}
.regularFira {
font-family: "Fira Sans", "Calibri", sans-serif;
}
.boldFira {
font-weight: bold;
font-family: "Fira Sans", "Calibri", sans-serif;
}
.italicFira {
font-style: italic;
font-family: "Fira Sans", "Calibri", sans-serif;
}
.light {
font-style: italic;
font-family: "Fira Sans Light", "Calibri", sans-serif;
}
/* Вёрстка на три колонки */
section.columnsThree {
position: relative;
top: 20px;
border: 2px solid darkgrey;
padding: 0px;
}
.left {
width: 150px;
height: 200px;
float: left;
border: 1px solid red;
}
.right {
width: 150px;
height: 200px;
float: right;
border: 1px solid red;
}
.middle {
margin: 0 150px;
height: 200px;
border: 3px solid blue;
}
.footer {
border: 1px solid red;
clear: both;
}
HTML
<! Doctype HTML>
<html>
<head>
<title>DesignSystem</title>
<link href="./resources/css/styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header>
<div class="heading">My Website Style Guide</div>
</header>
<!-- Colors -->
<section>
<div class="heading">Colors</div>
<div class="color-block white-font blue">
<div>Cool Blue</div>
<div>#2d5dcc</div>
</div>
<div class="color-block pink">
<div>Pink</div>
<div>#d957d9</div>
</div>
<div class="color-block green">
<div>Mint Green</div>
<div>#4fe0b0</div>
</div>
<div class="color-block beige">
<div>Beige</div>
<div>#efd9ca</div>
</div>
</section>
<!-- Fonts -->
<section class="fonts">
<div class="heading">Fonts</div>
<div class="font-block">
<div class="subHeading">Merriweather</div>
<p class="regularMerri">The quick brown fox jumps over the lazy dog.</p>
<p class="boldMerri">The quick brown fox jumps over the lazy dog.</p>
<p class="italicMerri">The quick brown fox jumps over the lazy dog.</p>
</div>
<div class="font-block">
<div class="subHeading">Fira Sans</div>
<p class="regularFira">The quick brown fox jumps over the lazy dog.</p>
<p class="boldFira">The quick brown fox jumps over the lazy dog.</p>
<p class="italicFira">The quick brown fox jumps over the lazy dog.</p>
<p class="light">The quick brown fox jumps over the lazy dog.</p>
</div>
<div class="font-block">
<div class="subHeading">Source Code Pro</div>
<p class="regular">The quick brown fox jumps over the lazy dog.</p>
<p class="bold">The quick brown fox jumps over the lazy dog.</p>
<p class="italic">The quick brown fox jumps over the lazy dog.</p>
</div>
</section>
<section class="columnsThree">
<div class="left">left column</div>
<div class="right">Rifgt column</div>
<div class="middle">Middle</div>
<div class="footer">Footer</div>
</section>
</body>
</html>
