Использование ваших новых знаний
================================

* Назад
* Обзор: First steps

С учётом того что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья даёт вам возможность сделать это.

| Необходимые знания: | Перед тем как начать, вы должны разобраться в основах CSS и HTML (смотрите Введение в HTML). |
| --- | --- |
| Задача: | Попрактиковать использование CSS с вашими новыми знаниями. |

Перед началом
-------------

Вы можете писать код в редакторе ниже или скачать исходный код, чтобы работать в вашем собственном редакторе. Это страница с кодом HTML и CSS внутри него. Если вам так удобнее, вы можете переместить CSS в отдельный файл на вашем компьютере. Или вы можете использовать онлайн-редакторы, такие как CodePen, jsFiddle или Glitch.

**Примечание:** Если у вас не получается, попросите о помощи — читайте раздел Помощь с кодом ниже.

Работа с CSS
------------

В следующем примере демонстрируется биография, стилизованная с помощью CSS. Каждое использованное мной свойство CSS — ссылка на соответствующую страницу MDN.

* `font-family`
* `color` (en-US)
* `border-bottom`
* `font-weight`
* `font-size`
* `text-decoration` (en-US)

Я использовал разные селекторы, такие как h1 и h2, а также создал класс для названия профессии для его стилизации.

Измените значения свойств CSS, чтобы поменять внешний вид биографии.

1. Сделайте заголовок розовым, используя CSS-цвет `hotpink`.
2. Значение свойства заголовка `border-bottom` сделайте пунктирным (10px dotted) и добавьте цвет `purple`.
3. Примените к подзаголовку `<h2>` курсив.
4. Установите цвет `#eeeeee` для фона `background-color` маркированного списка с контактными данными и значение 5px solid purple для `border`. Используйте `padding`, чтобы отделить содержимое блока от границы.
5. Сделайте ссылки `зелёными` при наведении.

У вас должно получиться примерно как-то так:

![Screenshot of how the example should look after completing the assessment.](/ru/docs/Learn/CSS/First_steps/Styling_a_biography_page/learn-css-basics-assessment.png)

После этого попробуйте использовать селекторы, не указанные здесь, но описанные в Руководстве по CSS. Не бойтесь ошибок — практикуйтесь!

Помните: тут нет неверного решения — сейчас вы предоставлены сами себе; развлекайтесь!

Помощь
------

Если вы хотите, чтобы вашу работу оценили, или вы не справляетесь, и вам нужна помощь:

1. Загрузите ваш код на CodePen, jsFiddle или Glitch.
2. Напишите пост с просьбой о помощи и / или оценке на форуме MDN. Добавьте тег "learning" к вашему посту, чтобы нам легче было его найти. В вашем посте должны быть:
    * Заголовок с описанием наподобие "Assessment wanted for CSS First Steps".
    * Описание того, что вам нужно, — к примеру, что вы уже пробовали, что у вас не получается и вам нужна помощь.
    * Ссылка на ваш код в онлайн-редакторе.
    * Ссылка на страницу о помощи, чтобы мы смогли помочь вам с вашим вопросом.
Что дальше?
-----------

Поздравляем вас с завершением первого модуля! Теперь вы неплохо разбираетесь в CSS и можете разобраться в таблицах стилей. В следующем модуле, Как устроен CSS, мы глубже разберёмся в некоторых аспектах языка.

* Назад
* Обзор: First steps