Czym jest CSS?

Kaskadowe arkusze stylów (CSS) — język stylów używany do opisywania wyglądu dokumentu napisanego w języku znaczników (HTML, XHTML, SVG, XML).

Główne funkcje CSS:

Oddzielenie prezentacji od treści: Pozwala zmienić wygląd strony internetowej bez zmiany jej struktury.
Stylizacja elementów: Zarządzanie kolorami, czcionkami, rozmiarami, marginesami, obramowaniami i innymi właściwościami wizualnymi elementów.
Tworzenie responsywnego designu: Za pomocą zapytań medialnych (Media Queries) można stosować różne style w zależności od cech urządzenia użytkownika (rozdzielczość ekranu, orientacja itp.).
Animacje i przejścia: Tworzenie efektów wizualnych dla interaktywności i poprawy doświadczenia użytkownika.
Zarządzanie układem: Pozycjonowanie elementów na stronie z użyciem różnych technik (Flexbox, Grid, floaty itp.).

Struktura reguły CSS:

/* Selektor */
h1 {
  /* Deklaracje */
  color: blue; /* Właściwość: wartość; */
  font-size: 24px;
}

Główne sposoby podłączenia CSS do dokumentu HTML:

Zewnętrzny plik (<link>): Najpowszechniejszy i zalecany sposób. Style są przechowywane w osobnym pliku .css.
```
<link rel="stylesheet" href="styles.css">
```
Wewnątrz tagu <style>: Style są definiowane bezpośrednio w dokumencie HTML, zwykle w sekcji <head>. Nadaje się do małych stylów lub szybkich testów.
```
<style>
  p {
    line-height: 1.5;
  }
</style>
```
Style inline (style atrybut): Style są stosowane do konkretnego elementu HTML za pomocą atrybutu style. Ma wysokie priorytety, ale utrudnia utrzymanie i skalowanie.
```
<div style="border: 1px solid black;">
  To jest div z stylem inline.
</div>
```

Kaskadowość określa, jak przeglądarka stosuje style, gdy istnieje wiele reguł konkurujących o ten sam element. Uwzględnia się:

Priorytet selektorów: Bardziej szczegółowe selektory mają wyższy priorytet.
Kolejność: Reguły zadeklarowane później nadpisują wcześniejsze o tym samym priorytecie.
Ważność (!important): Deklaracje z !important mają najwyższy priorytet (należy używać ostrożnie).
Źródło stylów: Style autora mają wyższy priorytet niż style użytkownika lub domyślne style przeglądarki.