Стилей как на отдельных элементах. Внедрение CSS в HTML документ. Основные элементы CSS

CSS = Стили и цвета

Манипулировать текстом

Цвета, Коробки

Стилизация HTML с CSS

CSS означает каскадные таблицы стилей.

CSS описывает, как HTML-элементы должны отображаться на экране, бумаге или на других носителя х.

CSS экономит много работы . Он может контролировать расположение нескольких веб-страниц все сразу.

CSS можно добавлять к элементам HTML тремя способами:

• Встроенный - с помощью атрибута Style в элементах HTML
• Internal -с помощью
  
  

  This is a heading

  
  

  This is a paragraph.

  
  

  Внешние CSS

  Внешняя таблица стилей используется для определения стиля для многих HTML-страниц.

  С помощью внешней таблицы стилей можно изменить внешний вид всего веб-узла, изменив один файл!

  Чтобы использовать внешнюю таблицу стилей, добавьте ссылку на нее в разделе страницы HTML:

  Пример

  
  
  
  
  
  

  This is a heading

  
  

  This is a paragraph.

  
  

  Внешняя таблица стилей может быть написана в любом текстовом редакторе. Файл не должен содержать HTML-код и должен быть сохранен с расширением. CSS.

  Вот как выглядит "styles.css":

  body {
  background-color: powderblue;
  }
  h1 {
  color: blue;
  }
  p {
  color: red;
  }

  Шрифты CSS

  Свойство CSS color определяет используемый цвет текста.

  Свойство CSS font-family определяет используемый шрифт.

  Свойство CSS font-size определяет размер текста, который будет использоваться.

  Пример

  
  
  
  
  
  

  This is a heading

  
  

  This is a paragraph.

  
  

  Граница CSS

  Свойство CSS border определяет границу вокруг элемента HTML:

  Пример

  p {
  }
  

  CSS заполнение

  Свойство CSS padding определяет отступ (пробел) между текстом и границей:

  Пример

  p {
  border: 1px solid powderblue;
  padding: 30px;
  }

  Нам уже известно, что для того, чтобы веб-сайт выглядел красиво и стильно нам необходимо поработать с CSS-файлом. И чтобы наши стили применялись необходимо соединить HTML файл и файл CSS.

  Существует несколько вариантов осуществления данной операции: использование таблиц вложенных стилей , таблиц внешних стилей и встроенный стиль.

  Сегодня мы поговорим именно о последнем способе.

  Внедрения стиля в тег HTML

  Суть данного способа заключается в том, что необходимое оформление мы внедряем внутрь тега. Для этого создан отдельный атрибут - style . Данный атрибут может быть применен к любому тегу, однако только в рамках тела сайта, то есть в границах body . Значением этого атрибута выступают операторы тех стилей, которые необходимо применить к заданному элементу.

  Для примера зададим разные размеры шрифта для двух разных абзацев текста:

  < p style= "font-size:25px;" > Задаем этому отрезку текста высоту букв в 25 пикселей. < p style= "font-size:15px; color:#2400ff;" > А этот текст будет с буквами, высотой 15 пикселей, причем еще и подкрасим его синим, чтобы продемонстрировать применение нескольких стилей одновременно.

  Недостатки

  Пример отлично демонстрирует, как такое навешивание стилей засоряет код страницы.

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

  Также возникнет трудность в оформлении больших объемов текста. Думаю, никого не радует перспектива прописывать для каждого абзаца размер шрифта, особенно если таких абзацев штук 40.

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

  Стоит также отметить и путаницу, которая обязательно всплывет в использовании атрибута style. Эта путаница возникнет из-за использования разных кавычек при вписывании стилей.

  Для наглядности посмотрим на пример ниже:

  < div style= "font-family: "Roboto Condensed", sans-serif" > Запись корректна. < div style= "font-family: " Roboto Condensed ", sans-serif" > Так тоже правильно. < div style= "font-family: " Roboto Condensed ", sans-serif" > Это не корректная запись. < div style= "font-family: " Roboto Condensed ", sans-serif" > И это тоже не верно

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

  Когда стоит использовать встроенный стиль

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

  < div id= "productRate" > < div style= "width: 40%" >

  Запись нужной ширины для этого блока будет простейшей операцией.

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

  < div style= "background:url(fon.jpg)" >

  Также программисты частенько обращаются к встроенным стилям в процессе верстки всплывающих окон. Зачастую этот процесс проходит следующим образом: блоку, над оформлением которого идет работа, прописывается display:block, а остальные окна скрываются посредством display:none, чтобы они визуально не мешали работе программиста. Вот пример:

  < div class = "element" style= "display:block" > Всплывающее окно, которое оформляется в данный момент

  Итог

  Использование встроенных стилей связано с рядом трудностей и неудобств, однако в процессе оформления некоторых элементов веб-мастера часто обращаются к этому методу для оптимизации своей работы.

  Каскадные таблицы стили CSS (Cascading Style Sheets) – стандарт стилей, объявленный консорциумом W3C. Термин каскадные указывает на возможность слияния различных видов стилей и на наследование стилей внутренними тегами от внешних.

  CSS – это язык, содержащий набор свойств для определения внешнего вида документа. Cпецификация CSS определяет свойства и описательный язык для установления связи с HTML-элементами.

  CSS – абстракция, в которой внешний вид Web-документа определяется отдельно от его содержания.

  
  

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

  
  

  Возможно, Вам понадобятся также:

  
  

  По методам добавления стилей в документ различают три вида стилей.

  Внутренние стили

  Внутренние стили определяются атрибутом style конкретных тегов. Внутренний стиль действует только на определенные такими тегами элементы. Этот метод мало отличается от традиционного HTML.

  Пример

  Абзац с текстом синего цвета

  РЕЗУЛЬТАТ:

  Абзац с текстом синего цвета

  Абзац с текстом красного цвета

  Не стоит использовать внутренние стили слишком часто, так как тогда Web-документ оказывается перегружен кодом и его внешний вид трудно изменить.

  Глобальные стили

  Глобальные стили CSS располагаются в контейнере , расположенном в свою очередь в контейнере ... .

  
  

  Атрибут type="text/css" , ранее обязательный для тега .........

  Серый цвет текста во всех абзацах Web-страницы

  РЕЗУЛЬТАТ:

  Серый цвет текста во всех абзацах Web-страницы

  Серый цвет текста во всех абзацах Web-страницы

  Внешние (связанные) стили

  Внешние (связанные) стили определяются в отдельном файле с расширением css . Внешние стили позволяют всем страницам сайта выглядеть единообразно.

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

  В этом теге должны быть заданы два атрибута: rel="stylesheet" и href , определяющиЙ адрес файла стилей.

  Пример

  ......... ......... .........

  Подключение стилей

  Правило подключения глобальных и внешних стилей состоит из селектора и объявлений стиля .

  Селектор, расположенный в левой части правила, определяет элемент (элементы), для которых установлено правило. Далее, в фигурных скобках перечисляются объявления стиля, разделенные точкой с запятой. Например:

  P { text-indent: 30px; font-size: 14px; color: #666; }

  Объявление стиля – это пара свойство CSS: значение CSS .

  Например: color: red

  При внутреннем подключении стиля правило CSS, которое является значением атрибута style , состоит из объявлений стиля, разделенных точкой с запятой. Например:

  Селекторы CSS

  Селектор	Описание	Подробнее
  *	Любой элемент
  E	Элемент, определенный тегом E
  E#myid	Элемент E с идентификатором "myid"
  E.myclass	Элемент E класса "myclass"
  E	Селектор существования атрибута
  E	Селектор равенства атрибута
  E	Селектор атрибута со списком значений	Селекторы атрибутов
  E	Селектор префикса атрибута
  E	Селектор суффикса атрибута
  E	Селектор подстроки атрибута
  E:link	Элемент E – еще не посещенная пользователем ссылка	Динамические псевдоклассы
  E:visited	Элемент E – уже посещенная пользователем ссылка	Динамические псевдоклассы
  E:hover	Элемент E при наведении на него указателя мышки	Динамические псевдоклассы
  E:active	Элемент E, активированный пользователем	Динамические псевдоклассы
  E:focus	Элемент E в фокусе	Динамические псевдоклассы
  E:target	Элемент E, который является целью ссылки	Целевой псевдокласс
  E:lang	Элемент E, написанный на указанном языке	Псевдокласс языка
  E:enabled	Элемент E – доступный элемент формы	Псевдоклассы состояний
  E:disabled	Элемент E – недоступный элемент формы	Псевдоклассы состояний
  E:checked	Элемент E – включенный флажок или переключатель	Псевдоклассы состояний
  E:indeterminate	Элемент E – неопределенный флажок или переключатель	Псевдоклассы состояний
  E:root	Элемент E, корень документа	Структурные псевдоклассы
  E:nth-child(n)	Элемент E, n-й ребенок родительского элемента	Структурные псевдоклассы
  E:nth-last-child(n)	Элемент E, n-й ребенок родительского элемента, считая с конца	Структурные псевдоклассы
  E:nth-of-type(n)	n-й элемент типа E	Структурные псевдоклассы
  E:nth-last-of-type(n)	n-й элемент типа E, считая с конца	Структурные псевдоклассы
  E:first-child	Элемент E, первый дочерний элемент родителя	Структурные псевдоклассы
  E:last-child	Элемент E, последний дочерний элемент родителя	Структурные псевдоклассы
  E:first-of-type	Первый элемент типа E	Структурные псевдоклассы
  E:last-of-type	Последний элемент типа E	Структурные псевдоклассы
  E:only-child	Единственный у родителя дочерний элемент	Структурные псевдоклассы
  E:only-of-type	Единственный у родителя элемент типа E	Структурные псевдоклассы
  E:empty	Элемент E, не содержащий дочерних элементов	Структурные псевдоклассы
  E:not(X)	Элемент E, который не соответствует простому селектору X	Псевдокласс отрицания
  E::first-line	Первая строка элемента E	Псевдоэлементы
  E::first-letter	Первая буква элемента E	Псевдоэлементы
  E::before	Содержимое до элемента E	Псевдоэлементы
  E::after	Содержимое после элемента E	Псевдоэлементы
  E::selection	Выделение в элементе E	Псевдоэлементы
  E F	Элемент F, который находится внутри элемента E
  E > F	Элемент F, который находится непосредственно внутри элемента E
  E + F	Элемент F, который следует сразу после элемента E
  E ~ F	Элемент F, который следует после элемента E

  Универсальный селектор

  Универсальный селектор соответствует любому элементу html-документа.

  Для обозначения универсального селектора применяется символ "звёздочка" (*).

  Его используют, если надо установить одинаковый стиль для всех элементов Web-страницы. Например:

  * { margin: 0; padding: 0; }
  

  В некоторых случаях символ "звёздочка" (*) может быть опущен:
  *.myclass и .myclass эквиваленты,
  *#myid и #myid эквивалентны

  Селекторы тегов

  В качестве селектора может выступать любой html-тег, для которого определяются правила стилевого оформления. Например:

  H1 {color: red; text-align: center;}

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

  H1, h2, h3, h4 {color: red; text-align: center;}

  Селекторы идентификаторов

  HTML предоставляет возможность присвоить уникальный идентификатор любому тегу. Идентификатор задается атрибутом id . Например:

  ...

  Значение идентификатора должно начинаться с латинской буквы и может содержать буквы (,), цифры (), "дефисы" (-) и "подчеркивания" (_).

  Значения всех атрибутов id в html-документе обязаны быть уникальными. Если встречаются id с одинаковыми значениями, то эти идентификаторы игнорируются, а код Web-страницы становится невалидным.

  В CSS-коде селектор идентификатора обозначается знаком "решетка" (#). Так как идентификатор id применяется только к уникальным элементам, название тега перед знаком "решетка" (#) обычно опускают:

  Div#a1 {color: green;}

  аналогично

  #a1 {color: green;}
  

  Желательно использовать id не для стилевого оформления элемента, а для обращения к нему через скрипты или перехода по ссылке.

  Селекторы классов

  Для стилевого оформления чаще всего используются селекторы классов. Класс для тега задается атрибутом class . Например:

  ...

  Имя класса должно начинаться с латинской буквы и может содержать буквы (,), цифры (), "дефисы" (-) и "подчеркивания" (_).

  Если атрибут id применяется для уникальной идентификации, то при помощи атрибута class тег относят к той или иной группе.

  В CSS-коде селектор идентификатора обозначается знаком "точка" (.). Разные теги можно отнести к одному классу. В таком случае имя тега перед знаком "точка" (.) опускают:

  I.green {color: #008000;} b.red {color: #f00;} .blue {color: #00f;}

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

  ...

  Если некоторые из этих классов содержат одинаковые свойства стиля, но с разными значениями, то будут применены значения стиля класса, который в CSS-коде расположен ниже.

  Селекторы атрибутов

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

  
  h1 {color: #800000;} /* элемент h1, у которого есть атрибут title */
  input { border: 1px solid #ссс; padding: 4px 6px; width: 300px; }
  a { text-decoration: none; border-bottom: 1px solid #06c; color: #06c; }
  span { display: inline-block; background-image: url("/img/icon_sprite.png"); }
  a, a { background: url("pic.gif") bottom left no-repeat; display: inline-block; width: 32px; }
  { display: block; float: left; width: 280px; }
  

  Между именем тега и квадратной скобкой ([) не должно быть пробела!

  
  

  Универсальный селектор, селекторы тегов, идентификаторов, классов и атрибутов, а также псевдоклассы относятся к простым селекторам.

  Простые селекторы можно связать в определенные последовательности на основе отношений элементов в дереве Web-документа. Такие конструкции называют комбинаторами.

  Контекстные селекторы

  Один из самых часто используемых комбираторов – контекстный селектор.

  Контекстные селекторы или селекторы потомков определяют несколько элементов, один из которых находится внутри другого. В контекстном селекторе простые селекторы разделены пробелом.

  Пример

  1. Пушкин А.С.
     • «Выстрел»
     • «Метель»
     • «Дубровский»
  2. Гоголь Н.В.
     • «Ревизор»
     • «Тарас Бульба»
     • «Мертвые души»
  3. Толстой Л.Н.
     • «Война и мир»
     • «Анна Каренина»
     • «Воскресение»

  РЕЗУЛЬТАТ:

  1. Пушкин А.С.
     • «Выстрел»
     • «Метель»
     • «Дубровский»
  2. Гоголь Н.В.
     • «Ревизор»
     • «Тарас Бульба»
     • «Мертвые души»
  3. Толстой Л.Н.
     • «Война и мир»
     • «Анна Каренина»
     • «Воскресение»

  Дочерние селекторы

  Дочерний селектор определяет элемент, который находится внутри другого непосредственно. В дочернем селекторе простые селекторы разделены знаком "больше" (>).

  Пример

  1. Пушкин А.С.
     • «Выстрел»
     • «Метель»
     • «Дубровский»
  2. Гоголь Н.В.
     • «Ревизор»
     • «Тарас Бульба»
     • «Мертвые души»
  3. Толстой Л.Н.
     • «Война и мир»
     • «Анна Каренина»
     • «Воскресение»

  РЕЗУЛЬТАТ:

  1. Пушкин А.С.
     • «Выстрел»
     • «Метель»
     • «Дубровский»
  2. Гоголь Н.В.
     • «Ревизор»
     • «Тарас Бульба»
     • «Мертвые души»
  3. Толстой Л.Н.
     • «Война и мир»
     • «Анна Каренина»
     • «Воскресение»

  Соседние селекторы

  Соседний селектор определяет знак "плюс" (+), разделяющий две последовательности простых селекторов. Элементы, представленные этими последовательностями, находятся внутри одного контейнера и следуют второй за первым непосредственно, не разделенные никакими другими тегами.

  Пример

  РЕФЛЕКСОТЕРАПИЯ

  РЕЗУЛЬТАТ:

  РЕФЛЕКСОТЕРАПИЯ

  Смежные селекторы

  Смежный селектор определяет знак "тильда" (~), разделяющий две последовательности простых селекторов. Элементы, представленные этими последовательностями, находятся внутри одного контейнера и следуют второй за первым (необязательно непосредственно).

  Пример

  ---

  РЕФЛЕКСОТЕРАПИЯ

  "Все акты сознательной и бессознательной жизни по способу происхождения суть рефлексы". И.М. Сеченов

  ---

  Рефлексотерапия – лечение заболеваний через управление рефлексами. Успешно применяется в программах комплексного лечения или как индивидуальная методика.

  РЕЗУЛЬТАТ:

  РЕФЛЕКСОТЕРАПИЯ

  "Все акты сознательной и бессознательной жизни по способу происхождения суть рефлексы". И.М. Сеченов

  Рефлексотерапия – лечение заболеваний через управление рефлексами. Успешно применяется в программах комплексного лечения или как индивидуальная методика.

  
  
  

  Таблица стилей CSS, если уж брать само определение, это язык описания внешнего вида документа. То есть за структуру страницы отвечает HTML, а за всё оформление именно таблицы стилей CSS. Я собрал здесь информацию, которая позволит Вам свободно использовать таблицу стилей. Я не буду писать о том, как необходимо ее знать, потому что и так понятно — без нее Вы не сможете привести сайт в более менее нормальный вид. Если кто-то только начинает изучать CSS стили, то этих материалов хватит чтобы начать изучение CSS.

  Чтобы получить структурированные знания и применять HTML+CSS+JS максимально эффективно для своих проектов и для проектов заказчика необходимо регулярно обучаться и поддерживать свой уровень.

  Но хорошо иметь основу. Многие, обучаясь самостоятельно, упускают многие базовые вещи и затем страдают клиенты, а человек не понимает, почему им недовольны.

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

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

  Одна из таких онлайн-школ — это Нетология и мне приглянулся курс « «, также, в качестве альтернативы от другой школы Skillbox образовательный курс « «. Обязательно изучите их внимательно, а особенно преподавателей, которые ведут этот курс.

  1. Базовые вещи

  Начну с самых основ. Когда я начинал вести этот сайт, я написал небольшие уроки по изучению таблиц стилей CSS. Уроки хорошо подойдут как для тех кто только начинает, так и для тех кто уже кое-что знает, чтобы освежить свои знания. Там всё оформлено в картинках и на реальных примерах.

  Маленькое отступление: когда я сам начинал изучать тему сайтостроения, я выучил практически все HTML теги и они меня не сильно вдохновили. Но после того как я начал изучать таблицу стилей CSS и пробовать применять каждое из свойств — мне это так сильно понравилось (я бы не создал , если бы мне это не нравилось). Я увидел что можно делать просто поразительные вещи только с помощью CSS. Это не язык программирования, который нужно учить месяцами. Таблицу стилей можно освоить за одну (максимум за две) недели.

  Конечно, Вы не изучите абсолютно все свойства и их значения, да это и не нужно! Вам нужно знать лишь основы, чтобы Вы начали применять и использовать в своих проектах. Одним важным нюансом является то, что нужно СРАЗУ же применить свойство, которое Вы только что узнали, на реальном примере. Пусть это будет Ваш собственный сайт или же простой HTML сайт — нет разницы. Важно то, чтобы Вы своими руками попробовали написать и увидели результат.

  У меня на сайте есть очень много примеров в которых используется CSS. Только и вместе содержат более 100 уроков! Когда Вы будете знать хотя бы основы, тогда Вы сможете смело менять и применять все примеры из уроков.

  Мои уроки об основах каскадных стилей CSS

  2. Шпаргалки CSS и CSS3

  Ну вот изучили Вы основы и через пару дней всё с «успехом» забыли и, наверное, думаете что это не Ваше и всё сложно. Хочу Вас сразу немного подбодрить — я сам не знаю всех свойств CSS. Но что мне мешает посмотреть их в интернете?

  Правда пока зайдешь в Яндекс или Google, потом наберешь тот запрос, который нужен. А если еще и не выдаст в поиске то что нужно. Так можно потратить очень много времени но так и не найти то, что действительно искал.

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

  Шпаргалки CSS и CSS3

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

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

  Это как в школе: даже если не пользуешься шпаргалкой, но с ней всё равно как-то на душе спокойнее 😆 .

  Дополнение к уроку — HTML шпаргалки

  Помимо CSS шпаргалок также есть HTML шпаргалки. Если забыли какой-нибудь тег, Вы всегда их можете подсмотреть в такой HTML шпаргалке. Ссылка на скачивание появится после того как Вы нажмете на одну из кнопок социальных сетей ниже этого видео.

  Вывод

  Если Вы начинающий, и только осваиваете азы CSS, то Вам отлично подойдут мои уроки по CSS. Материал в них изложен кратко и Вам нужно лишь повторить своими руками то, что о чем урок. А также более опытные веб-мастера смогут освежить свои знания быстро просмотрев все уроки. Также Вы можете скачать шпаргалки CSS и CSS3, которые помогут Вам не забыть основные свойства и всегда будут под рукой, в случае чего Вы можете быстро посмотреть и вспомнить необходимую информацию.

  Ну и конечно же, основные пункты статьи.

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

  Внешняя таблица стилей

  Стили располагаются в отдельном файле с расширением css, для связывания HTML-документа с CSS-файлом применяется элемент . Он располагается внутри , как показано в примере 1.

  Пример 1. Подключение внешних стилей

  Заголовок

  Значение атрибута rel у всегда будет stylesheet и остаётся неизменным. В качестве значения href указывается путь к CSS-файлу; путь может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте. В примере выше мы подключаем кириллический шрифт Lobster с сайта Google Fonts.

  Содержимое файла style.css показано в примере 2.

  Пример 2. Содержимое файла style.css

  H1 { font-family: "Lobster", cursive; color: green; }

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

  Внутренняя таблица стилей

  Стили пишутся в самом HTML-документе внутри элемента

  Заголовок

  В данном примере задан стиль элемента

  , который затем можно повсеместно использовать на данной веб-странице (рис. 1). Обратите внимание, что мы можем спокойно комбинировать со

  Заголовок 1

  Заголовок 2

  В данном примере для первого заголовка задан красный цвет и размер 36 пикселей с помощью атрибута style , для второго заголовка - зелёный цвет через элемент

  Заголовок 1

  Заголовок 2

  В данном примере показан импорт стилевого файла с сайта Google Fonts для подключения кириллического шрифта Lobster.