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

Использование внешних CSS

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

Пример внешнего CSS-файла (StyleSheet.css)

.warning { color: #ff0000; }
h1.warning { text-decoration: underline; }
p.warning { font-weight: bold; }

Подключение внешней таблицы стилей

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>External Style Sheet</title>
  <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <h1 class="warning">WARNING</h1>
  <p class="warning">Don't go there!</p>
</body>
</html>

Атрибуты тега <link>

href — путь к файлу CSS
rel — должно быть stylesheet
type — должно быть text/css

Количество внешних CSS не ограничено. Можно использовать несколько файлов и объединять их при необходимости.

Встроенные стили

Также можно использовать встроенные стили через атрибут style в тегах HTML:

<p style="color:blue; font-weight:bold; font-size:12pt">Common Greetings</p>
<ul style="margin-top:-20px; font-size:10pt">
  <li style="list-style-type:square">Hello</li>
  <li style="list-style-type:circle">Hi</li>
  <li style="list-style-type:disc">Howdy</li>
</ul>

← Цвета | Псевдоклассы →