Как подключить css и три базовых селектора

В этом уроке мы научимся и будем профессионально знать как подключить css к любой веб странице а так же изучим три базовых селлектора.
Подключать мы будем файл style.css, он будет управлять внешним видом нашей индексной станицы сайта, если вы не знаете как она выглядит, то посмотрите урок: Не работает CSS, там мы это всё уже разбирали.

Для начала надо открыть программу notepad++, далее создать этот самый файл style с расширением .css, прежде чем сохранять этот файл, желательно создать в корне нашего тестового сайта, отдельную папку под стили, назовите её так же просто, например: ccs.

И теперь наша задача подключить этот стилевой файл к нашей веб странице, ну во первых подключать мы его будем через тег link в области head, у этого тега есть несколько важных атрибутов которые надо знать, но для начала надо посмотреть на этот тег подключения:

href - Ну это уже всем нам хорошо известный атрибут еще из хтмл, он указывает адрес до нашей папки со стилями.

type - Это указание типа подключаемого документа.

rel - Ну это тег который указывает на взаимосвязь.

На этих атрибутах вообще не заморачивайтесь, пишите из так как есть, главное внимательно следите когда прописываете путь до стилевого файла в атрибуте href.

Если вы всё правильно сделаете, то связка html страницы с css файлом будет готова, кстати к одной веб странице мы можем подключить сразу несколько таблиц стилей, только на каждую таблицу нужно будет прописывать свой тег link, а также наоборот, к любой странице нашего сайта мы можем подключить одну и ту же таблицу стилей.

Ну что, как подключить css файл к документу вы уже знаете, теперь давайте познакомимся с тремя базовыми селекторами, которые должен знать любой маломальский верстак.

Для начала надо понять, что каждый стиль состоит из селектора а так же пары, свойства и его значения. 

Что такое селектор?, если взять перевод с английского, то он будет означать слово "выбранный", то есть через него мы должны выбрать из нашей html страницы те теги, с которыми хотим работать, так что запомните, прежде чем изменить какой либо элемент на веб странице, будь это хоть абзац, заголовок или картинка, мы должны прежде для него создать свой селектор, а уже потом писать для него правила.

Так, первый из трёх самых популярных базовых селекторов в css, который мы изучим, это "селектор тегов", через него мы можем управлять сразу всеми одинаковыми тегами со страницы, ниже показан пример как изменить цвет сразу всем абзацам на странице.

Правило color:#404040; означает что цвет должен быть серым. Но знайте, серыми станут только все абзацы, никакие другие теги не поменяются.

Далеко не всегда нам нужно поменять сразу все теги, часто бывает так, что нам надо изменить какой-то конкретный элемент, например нам надо изменить цвет только у одного заголовка, в таком случае нам понадобиться так называемый id селектор.

 В таком случае нам надо этому заголовку задать определённый id, например header, делается это так:

<h1 id="header">Заголовок</h1>

И в таблице стилей прописываем следующее правило:

Кстати цвет заголовку мы придали красный. Это был второй очень распространённый базовый вид селекторов по идентификатору.

Последний вид который нам надо изучить, это селектор классов, он позволяет нам задавать один и тот же класс абсолютно любым элементам в html странице. Вот к примеру ниже мы придумали и прописали класс который будет задавать свой определённый цвет. Название класса может быть любое.

Теперь этот класс мы можем задать любому элементу на веб странице, давайте подключим этот класс например тегу li. Если вы не знакомы с этим тегом, то рекомендую изучить этот урок: Создание списков в html

<li class="new">Это строка из какого то списка</li>

Вот и всё, теперь если мы посмотрим в браузере, то увидим что у списка появилась строчка с синеватым цветом.

Ну вот наверно и пора заканчивать наш урок, теперь мы знаем как подключить css, а так же за одно изучили три базовых селектора в css, которые применяются в 90% всех случаев.