Інтеграція CSS & HTML без створення окремого файлу
Сьогодні ми дізнаємось об’єднати стилі CSS з HTML без створення та підключення окремого файлу CSS.
Крок 1.
Створюємо стандартну структуру HTML-файлу.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Інтеграція стилів </title>
</head>
<body>
<h1>Привіт, світ!</h1>
<p>Цей текст буде розміром 16px та червоного коліру</p>
</body>
</html>
Крок 2.
Між перед закриттям тегу «</head>» відкриваємо тег «<style> </style>»
<!DOCTYPE html>
<html lang="en">
<head>
<title>Інтеграція стилів </title>
<style>
</style
</head>
<body>
<h1>Привіт, світ!</h1>
<p>Цей текст буде розміром 16px та червоного коліру</p>
</body>
</html>
Крок 3.
В тег «<style> </style>» додаємо наступне правило:
p{
font-size: 16px; - Таким чином ми даємо зрозуміти що ми хочемо бачити наш текст розміром 16px.
color: red; - Таким чином ми даємо зрозуміти що ми хочему бачити наш текст червоного коліру.
}
Повний код виглядяє так:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Інтеграція стилів </title>
<style>
p{
font-size: 16px;
color: red;
</style
</head>
<body>
<h1>Привіт, світ!</h1>
<p>Цей текст буде розміром 16px та червоного коліру</p>
</body>
</html>
Таким чином ми виконали інтеграцію CSS коду з HTML кодом без створення та підключення окремого файлу CSS.