Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг
22 Май 2023
3 мин
8101

Как подключить CSS к HTML

Узнайте о трех основных способах подключения CSS к HTML и выберите наиболее подходящий для вас, чтобы создавать захватывающие веб-страницы.

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

Станьте веб-разработчиком с нуля за 15 месяцев на курсе онлайн-университета Skypro. Преподаватели — практикующие эксперты из VK, «Альфа-Банка», Skyeng и других крупных компаний. В программе нет лишней теории, зато много практических заданий, а результаты курсовых можно положить в портфолио. Специалисты центра карьеры помогут с резюме, сопроводительными письмами и собеседованиями.

1. Встроенный стиль (Inline CSS)

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

Пример:

<p style="color: red; font-size: 18px;">Текст с красным цветом и размером шрифта 18px</p>

2. Внутренний стиль (Internal CSS)

Внутренний стиль подключается к HTML-странице с помощью тега <style> внутри секции <head>. В этом случае стили применяются ко всем элементам, указанным в селекторах CSS.

Пример:

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <p>Текст с синим цветом и размером шрифта 20px</p>
</body>
</html>

На курсе Skypro «Веб-разработчик» освоите JavaScript, GitHub, Tilda, Postman, HTML, CSS и другие программы и инструменты, научитесь решать реальные задачи разработчика и работать в команде. Все учебные проекты можно положить в портфолио и устроиться на работу по новой специальности еще в процессе обучения.

3. Внешний стиль (External CSS)

Самый распространенный и удобный способ подключения CSS — это использование внешнего файла с расширением .css. Внешний файл стилей подключается к HTML-странице с помощью тега <link> внутри секции <head>.

Пример подключения внешнего файла styles.css:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>Текст с примененными стилями из файла styles.css</p>
</body>
</html>

Файл styles.css:

p {
  color: green;
  font-size: 22px;
}

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

Теперь вы знаете, как подключить CSS к HTML, и можете выбрать наиболее подходящий для вас метод подключения стилей. Удачи в обучении веб-разработке! 😉

Добавить комментарий