Встроенный(Inline) CSS
С помощью встроенного стиля, применяется уникальный стиль к одному элементу.
Чтобы использовать встроенный стиль, добавьте атрибут style к соответствующему тегу.
В нижеуказанном примере отображено, как создавать параграф с серым фоном и белым текстом:
<p>style="color:white; background-color:gray;"> This is an example of inline styling. </p>Вложенный(Embedded) CSS
Вложенные стили определяются с помощью элемента <style> , внутри секции head HTML страницы.
Например, следующий код определяет стиль всех параграфов:
<html>
<head>
<style>
p {
color:white;
background-color:gray;
}
</style>
</head>
<body>
<p>This is my first paragraph. </p>
<p>This is my second paragraph. </p>
</body>
</html>
Внешний(External) CSS
В этом способе, все правила стилей содержатся в одном текстовом файле, который сохраняется с расширением .css.
Затем на этот файл ссылается HTML с помощью тега <link>. Элемент <link> располагается внутри секции заголовка (head).
Например:
HTML:
<head>
<link rel="stylesheet" href="example.css">
</head>
<body>
<p>This is my first paragraph.</p>
<p>This is my second paragraph. </p>
<p>This is my third paragraph. </p>
</body>
CSS:
p {
color:white;
background-color:gray;
}