EasyCode365EasyCode365

Що таке CSS?

Вступ

CSS означає Cascading Style Sheets (Каскадні таблиці стилів). Це мова, яку використовують для стилізації вебсторінок.

HTML дає сторінці структуру. CSS керує тим, як ця структура виглядає: кольорами, відступами, шрифтами, фонами, рамками та макетом.

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

Слово cascading означає, що кілька правил стилів можуть застосовуватися до одного елемента. Коли правила конфліктують, браузер вирішує, яке правило переможе, враховуючи каскад, специфічність і порядок.

HTML vs CSS

HTML і CSS — різні мови, але вони працюють разом.

  • HTML створює контент і структуру: заголовки, абзаци, списки, кнопки та секції.
  • CSS керує візуальним дизайном: кольорами, розмірами шрифту, відступами та макетом.

Уяви будівництво будинку:

  • HTML — це фундамент, каркас, кімнати та стіни.
  • CSS — це фарба, меблі, освітлення та декор.

Спочатку потрібна структура. Потім CSS може стилізувати цю структуру.

CSS і семантичний HTML

CSS може стилізувати будь-який HTML-елемент, але найкраще працює тоді, коли HTML має зрозуміле значення.

Наприклад, елементи <main>, <section>, <h1>, <p> і <button> роблять сторінку легшою для розуміння ще до додавання стилів.

Після цього CSS може покращити дизайн, не змінюючи значення контенту.

Базове CSS-правило

CSS-правило каже браузеру, як має виглядати вибраний HTML.

Кожне CSS-правило має три основні частини:

  1. Селектор: HTML-елемент або група елементів, які ти хочеш стилізувати.
  2. Властивість: візуальна характеристика, яку ти хочеш змінити.
  3. Значення: налаштування, яке ти обираєш для цієї властивості.

Ось короткий приклад:

Лише читання

У цьому правилі:

  • h1 — це селектор.
  • color — це властивість.
  • blue — це значення.

CSS-селектор, властивість і значення

Способи додати CSS

Є три поширені способи додати CSS до HTML-документа.

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

Зовнішній CSS — найкращий довгостроковий підхід для реальних сайтів, бо багато сторінок можуть використовувати одну спільну таблицю стилів.

Приклад, який можна запустити

Ось невеликий HTML-документ, який використовує внутрішній тег <style>.

Натисни Показати вивід, щоб побачити, як CSS змінює сторінку.

Можна редагувати
<!doctype html>
<html>
  <head>
    <style>
      h1 {
        color: darkblue;
      }

      p {
        font-size: 18px;
      }

      button {
        background-color: green;
        color: white;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>Ласкаво просимо до CSS!</h1>
      <p>Це мій перший стилізований абзац.</p>
      <button>Натисни мене</button>
    </main>
  </body>
</html>

Міні-вправа

Відредагуй приклад вище.

Спробуй зробити такі зміни:

  1. Зміни колір заголовка h1 на purple.
  2. Зміни розмір абзацу p на 22px.
  3. Зміни колір тексту кнопки button на black.
  4. Зміни колір фону кнопки button на yellow.

Потім натисни Показати вивід і перевір попередній перегляд.

Підсумок

  • CSS означає Cascading Style Sheets.
  • HTML створює структуру сторінки, а CSS керує візуальним дизайном.
  • CSS-правило зазвичай має селектор, властивість і значення.
  • CSS можна додати inline, внутрішньо через <style> або зовнішньо через файл стилів.
  • Зовнішні таблиці стилів — найкраща практика для більших сайтів.

Продовжуй навчання

Продовжуй вивчати CSS крок за кроком: практикуйся на маленьких прикладах і змінюй по одному стилю за раз.