logo

Як підключити CSS

Зовнішні стилі підключаються до HTML-документу за допомогою елемента <link> у секції <head>. Внутрішні стилі прописуються всередині HTML-документу за допомогою елемента <style>, а inline-стилі застосовуються безпосередньо до HTML-елементів через атрибут style. Найзручнішим способом є використання зовнішнього файлу стилів, що полегшує підтримку і розвиток проекту.

Для створення файлу CSS потрібно створити текстовий файл з розширенням .css і прописати в ньому стилі. Існує три основні способи додавання CSS до HTML: зовнішні стилі, внутрішні стилі та inline-стилі.

Як розшифровується CSS

CSS розшифровується як Cascading Style Sheets, що перекладається як “каскадні таблиці стилів”. Цей термін описує принцип роботи CSS, де стилі застосовуються послідовно, один за іншим, утворюючи каскад.

Як створити файл CSS

Для початку потрібно створити файл CSS. Це звичайний текстовий файл, який має розширення .css. Наприклад, створіть файл styles.css і збережіть його в тій же директорії, де знаходиться ваш HTML-документ. У цьому файлі ви будете писати всі стилі, які хочете застосувати до свого сайту.

/* styles.css */
body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    color: #666;
    line-height: 1.6;
}

Як підключити CSS до HTML

Існує кілька способів додавання CSS до HTML-документу. Найбільш поширеними є зовнішні стилі, внутрішні стилі та inline-стилі.

Додавання CSS до HTML-документу

Зовнішні стилі

Зовнішні стилі дозволяють зберігати CSS-код у окремому файлі, що спрощує управління стилями. Щоб підключити зовнішній файл CSS до HTML, використовуйте елемент <link> всередині секції <head> вашого HTML-документу.

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад підключення CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Вітаємо на нашому сайті!</h1>
    <p>Це приклад сторінки з підключеним CSS.</p>
</body>
</html>

Внутрішні стилі

Внутрішні стилі визначаються безпосередньо всередині HTML-документу за допомогою елемента <style>, який також розміщується всередині секції <head>.

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад внутрішніх стилів</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        h1 {
            color: #333;
            text-align: center;
        }

        p {
            color: #666;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <h1>Вітаємо на нашому сайті!</h1>
    <p>Це приклад сторінки з внутрішніми стилями.</p>
</body>
</html>

Inline-стилі

Inline-стилі застосовуються безпосередньо до HTML-елементів за допомогою атрибута style. Цей метод менш зручний для великих проектів, але може бути корисним для швидких змін.

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад inline-стилів</title>
</head>
<body style="background-color: #f0f0f0; font-family: Arial, sans-serif;">
    <h1 style="color: #333; text-align: center;">Вітаємо на нашому сайті!</h1>
    <p style="color: #666; line-height: 1.6;">Це приклад сторінки з inline-стилями.</p>
</body>
</html>

Як додати CSS до HTML та імпортувати в head

Використання зовнішнього файлу стилів є найзручнішим способом додавання CSS до HTML. Щоб імпортувати CSS-файл у секцію <head>, використовуйте наступний код:

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад імпорту CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Вітаємо на нашому сайті!</h1>
    <p>Це приклад сторінки з імпортованим CSS.</p>
</body>
</html>

Таким чином, ви створите стильний і привабливий сайт, використовуючи каскадні таблиці стилів. Пам’ятайте, що добре структуровані стилі значно полегшують підтримку та розвиток вашого проекту.

Схожі записи: