Введение в CSS

CSS — это язык для стилей.

С помощью стилей можно менять на сайте цвет фона, размер шрифта, добавить рамки к картинкам и так далее.

Напишем какой-нибудь простой стиль:

Задание:

  1. Создайте новый пустой файл style.css. Туда мы будем писать стили.

  2. Теперь надо подключить стили. Добавьте в самое начало файла index.html три строчки:

    index.html

    <head>
    <link rel="stylesheet" href="/style.css">
    </head>
    <body>
    ...

    Эти строчки говорят, что страница должна использовать стили из "style.css".

    В элементе <head> пишутся "настройки" страницы — какие стили использовать на странице, какая у нее должна быть иконка, и так далее. <head> — это единственный элемент, который должен быть не внутри <body>, а снаружи.

  3. Напишите в style.css:

    style.css

    body {
    background-color: blue;
    }

    Страница должна стать пронзительно голубого цвета.

Давайте сделаем цвет нормальным.

Задание:

  1. Откройте гугл и введите "color picker"цвето-выбиралка. Появится штука для выбора цветов.

  2. Выберите любой цвет.

    Скопируйте строчку под "HEX" (которая начинается с #) и поменяйте в style.css слово blue на эту строчку.

    Цвет страницы должен поменяться.

Синтаксис CSS — как именно пишутся стили

Внутри фигурных скобок в style.css пишутся свойства. Каждое свойство на новой строке, в конце — точка с запятой.

Когда свойство одно:

Когда свойств несколько:

Задание:

  1. Свойство backgroundфон-colorцвет меняет цвет фона.

    Свойство color меняет цвет самого текста.

    Добавьте строчку со свойством color (как на картинке выше) и поменяйте цвет текста на странице на какой-нибудь другой.

Возможные ошибки:

  1. Если забыть точку с запятой в конце первой строки — вторая не заработает.

    🚫 Неправильно:

    style.css

    body {
    background-color: blue
    color: red
    }

    ✅ Правильно:

    style.css

    body {
    background-color: blue;
    color: red;
    }

Задание:

  1. Селектор (штука перед фигурными скобками) говорит, к каким элементам будет применяться правило. Если написать body, правило применится ко всей странице. Если написать, например, h1 — правило применится только к заголовкам.

    Поменяйте код в style.css, чтобы цвета поменялись не у всей страницы, а только у заголовков.

    Заголовок

    какой-то текст

Возможные ошибки:

  1. Не забудьте число — h1, а не h. (Чтобы применить ко всем видам заголовков, надо будет писать h1, h2, h3.)

  2. Селекторы надо писать без угловых скобок.

    🚫 Неправильно:

    style.css

    <h1> {
    background-color: ...;
    color: ...;
    }

    ✅ Правильно:

    style.css

    h1 {
    background-color: ...;
    color: ...;
    }

Вся штука целиком — селектор + свойста — называется правилом.

В CSS-файле может быть много правил. Тогда они пишутся друг под другом.

Задание:

  1. Свойство text-alignвыровнять меняет выравнивание текста:

    • text-align: left; — слева.
    • text-align: right; — справа.
    • text-align: center; — по центру.

    Добавьте правило, чтобы все абзацы (элементы <p>) были выровнены по центру — как на картинке.

    Заголовок

    какой-то текст

Возможные ошибки:

  1. align — трудное слово. Легко случайно набрать aling вместо align.

  2. Дефис обязателен. textalign или text align не заработает.

  3. Правила нельзя писать друг в друге. Сначала должна закрыться фигурная скобка } для прошлого правила, только потом — начинается новое правило.

    🚫 Неправильно:

    style.css

    h1 {
    color: red;
    p {
    text-align: center;
    }
    }

    ✅ Правильно:

    style.css

    h1 {
    color: red;
    }
    p {
    text-align: center;
    }

Задание:

  1. Cвойство fontшрифт-sizeразмер меняет размер текста. Например, 16px — это обычный текст, а 60px — огромный текст. "px" значит "пикселей".

    Добавьте еще одну строчку в уже написанное правило для h1, чтобы текст в заголовках стал огромным.

    Заголовок

    какой-то текст

Возможные ошибки:

  1. Нельзя ставить пробел перед px. То есть, 60 px не заработает.

  2. Проверьте, что font написано правильно. Часто пишут fond вместо font.