Войти
Регистрация

Как добавить CSS стили

Как добавить CSS стили

Здравствуйте, дорогие друзья!

Это первая статья из цикла статей по основам CSS и здесь мы с Вами разберем, как же можно подключать CSS стили в HTML-страницу.

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

Об этом более подробно простыми словами изложу далее в статье.

Первый способ: добавление из файла или связанные стили

Здесь к HTML-странице подключается файл с расширением .css через тег <link> внутри тега <head>

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

В этом примере в атрибуте href мы указали путь к файлу style.css в котором и будут прописаны все CSS-стили.

Второй способ: глобальный стиль

Этот способ подразумевает написание стилей прямо в HTML-файле. Внутри тега <head> прописывается парный тег <style> и уже внутри него прописываются стили:

<head>
  <style
    h1 {
     color:#FF0000;
    }
  <style
</head>

В этом примере мы заголовок c тегом <h1> задали красным цветом. В принципе, внутри тега <style> пишется тоже самое, что и в файле с расширением .css, только он подключается к странице, а здесь пишется прямо на странице.

Третий способ: Встроенный стиль

Данный способ предполагает задание стиля напрямую для тега на странице через атрибут style:

<p style="color:#FF0000;">Абзац красным цветом</p>

Здесь мы также задали абзац с тегом <p> красным цветом индивидуально только для этого абзаца с тегом <p>.

Это 3 основных способа подключения CSS-стилей. В 99% случаев используется первый способ с подключением из файла. Он самый удобный.

В чем заключается приоритетность данных способов подключения? Объясняю.

Допустим у Вас в стилях появилась конфликтная ситуация, когда Вы одному и тому же элементу, например, абзац с тегом <p> во встроенном стиле задаете красным цветом, а в файле с CSS-стилями задаете зеленым. В этой ситуации необходимо расставить приоритеты и понять, каким же цветом будет наш абзац? Он будет красным и вот почему.

Здесь я распишу стили подключения в порядке из приоритета. Верхний - менее приоритетный, нижний - более приоритетный.

  • добавление из файла
  • глобальный стиль
  • встроенный стиль

Т.е. если Вы в файле стилей и в глобальном стиле зададите элементу цвет красный, а во встроенном зеленый, то элемент будет зеленым. Точно также если в файле стилей укажете шрифт 15px для элемента, а в глобальном 17px, то элемент будет с размером шрифта 17px.

Когда стоит применять каждый из способов?

  • Первый способ - когда нужно установить стили для всех страниц сразу. Например, размер шрифта 15px и серый цвет текста везде на всех страницах.
  • Второй способ - когда нужно установить особый стиль элементов для конкретной страницы. Например, Вы хотите сделать серый фон и красный цвет первой буквы только на этой странице.
  • Третий способ - когда нужно задать особый стиль для конкретного элемента. Например, сделать размер 17px у конкретного текста, когда везде он 15px.

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

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?