Существует несколько способов внедрения 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>.
