Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Якими способами можна підключити CSS до HTML?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

CSS можна підключити до HTML трьома основними способами:

---

### **1. Зовнішній файл (рекомендований спосіб)**

Стилі знаходяться в окремому `.css`-файлі, який підключається в `<head>` за допомогою тегу `<link>`.

**HTML:**

```html
<link rel="stylesheet" href="style.css">
```

**style.css:**

```css
p {
  color: blue;
}
```

Плюси: порядок у коді, зручно підтримувати, багато сторінок можуть використовувати один файл.
Мінуси: потрібен окремий файл.

---

### **2. Внутрішні стилі (всередині** `<style>` **в** `<head>`**)**

```html
<head>
  <style>
    p {
      color: green;
    }
  </style>
</head>
```

Плюси: зручно для невеликих сторінок або швидкого тесту.
Мінуси: якщо стилів багато, код стає громіздким.

---

### **3. Вбудовані (inline-стилі)** - через атрибут `style` у самому тегу

```html
<p style="color: red;">Текст</p>
```

Плюси: швидко змінити один елемент.
Мінуси: погана читабельність, не можна повторно використовувати, не підходить для великих проектів.

---

### **Підсумок**

| Спосіб | Де пишуться стилі | Коли використовувати |
|---|---|---|
| Зовнішній CSS | окремий .css файл | звичайна розробка |
| Внутрішній `<style>` | у `<head>` | дрібні проекти, тести |
| Вбудований `style=""` | прямо в тегу | точкові зміни |

Якщо потрібно, можу далі розібрати: пріоритети стилів, каскадність і порядок їх застосування.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати186 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.