Как внедрить css в html

Существует несколько способов внедрения CSS в HTML-документ:

Встроенный CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Моя страница</title>
    <style>
      /* CSS-стили */
    </style>
  </head>
  <body>
    <!-- Содержимое страницы -->
  </body>
</html>

В этом примере CSS-код находится внутри тега <style> внутри блока <head>. Здесь мы используем так называемый «встроенный CSS».

Внешний CSS-файл:

<!DOCTYPE html>
<html>
  <head>
    <title>Моя страница</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Содержимое страницы -->
  </body>
</html>

Здесь мы подключаем внешний файл стилей с помощью тега <link>. Атрибут href указывает на путь к файлу CSS.

Атрибут style:

<!DOCTYPE html>
<html>
  <head>
    <title>Моя страница</title>
  </head>
  <body>
    <h1 style="color: blue;">Заголовок страницы</h1>
    <!-- Содержимое страницы -->
  </body>
</html>

Здесь мы применяем стили непосредственно к элементу при помощи атрибута style.

Во всех трех случаях CSS-код пишется на языке CSS, но встроенный CSS и инлайновые стили указываются внутри тегов, а внешний CSS-файл подключается внутри блока <head>.