Какво е CSS?

Каскадните таблици със стилове (CSS) — език за стилове, използван за описание на представянето на документ, написан на език за маркиране (HTML, XHTML, SVG, XML).

Основните функции на CSS:

Разделяне на представянето от съдържанието: Позволява да се променя външният вид на уеб страница без да се променя нейната структура.
Стил на елементите: Контролира цветовете, шрифтовете, размерите, отстоянията, границите и други визуални свойства на елементите.
Създаване на адаптивен дизайн: Чрез медийни заявки (Media Queries) могат да се прилагат различни стилове в зависимост от характеристиките на устройството на потребителя (разделителна способност на екрана, ориентация и др.).
Анимации и преходи: Създаване на визуални ефекти за интерактивност и подобряване на потребителския опит.
Управление на разположението: Позициониране на елементите на страницата с помощта на различни техники (Flexbox, Grid, float и др.).

Структура на CSS правило:

/* Селектор */
h1 {
  /* Декларации */
  color: blue; /* Свойство: стойност; */
  font-size: 24px;
}

Основните начини за свързване на CSS с HTML документ:

Външен файл (<link>): Най-често срещаният и препоръчителен начин. Стиловете се съхраняват в отделен .css файл.
```
<link rel="stylesheet" href="styles.css">
```
Вътре в <style> таг: Стиловете се дефинират директно в HTML документа, обикновено в секцията <head>. Подходящо за малки стилове или бързи тестове.
```
<style>
  p {
    line-height: 1.5;
  }
</style>
```
Вградени стилове (style атрибут): Стиловете се прилагат към конкретен HTML елемент чрез атрибута style. Има висок приоритет, но усложнява поддръжката и мащабирането.
```
<div style="border: 1px solid black;">
  Този div има вграден стил.
</div>
```

Каскадността определя как браузърът прилага стиловете, когато има няколко правила, които се конкурират за един и същи елемент. Вземат се предвид:

Приоритет на селекторите: По-специфичните селектори имат по-висок приоритет.
Ред на появяване: Правилата, обявени по-късно, отменят по-ранните с еднакъв приоритет.
!important: Декларациите с !important имат най-висок приоритет (трябва да се използва с внимание).
Източник на стиловете: Стиловете на автора имат по-висок приоритет от тези на потребителя или по подразбиране на браузъра.