Інтеграція СSS&HTML без створення окремого файлу

Про матеріал
Як інтегрувати CSS та HTML в один файл без створення та підключення окремого файлу.
Перегляд файлу

Інтеграція 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.

docx
Додано
9 липня 2023
Переглядів
162
Оцінка розробки
Відгуки відсутні
Безкоштовний сертифікат
про публікацію авторської розробки
Щоб отримати, додайте розробку

Додати розробку