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

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

Подключение внешнего CSS

Используется тег <link> внутри <head>:

<link rel="stylesheet" href="styles.css">

Преимущества

  • Упрощение поддержки стилей при больших проектах.
  • Повторное использование одного CSS-файла на нескольких страницах.
  • Ускорение загрузки благодаря кэшированию.
  • Чистый и структурированный HTML-код.

Пример внешнего CSS

body {
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  color: #333;
}

header {
  background: lightblue;
  padding: 20px;
  text-align: center;
}

nav {
  background: lightgreen;
  padding: 10px;
}

main {
  background: lightyellow;
  padding: 20px;
}

aside {
  background: lightcoral;
  padding: 20px;
}

footer {
  background: lightgray;
  padding: 15px;
  text-align: center;
}