Wprowadzenie do CSS

1. Co to jest CSS i do czego służy?

CSS (Cascading Style Sheets) – czyli Kaskadowe Arkusze Stylów – to język służący do opisu wyglądu i formatowania stron internetowych zapisanych w HTML lub XHTML. Dzięki CSS możemy oddzielić strukturę dokumentu (HTML) od jego prezentacji (wygląd).

Najważniejsze zastosowania CSS:

definiowanie kolorów (tekstu, tła, ramek),
ustawianie czcionek (rodzaj, rozmiar, pogrubienie, kursywa),
kontrola nad układem elementów (rozmieszczenie, odstępy, marginesy, padding),
tworzenie responsywnych stron (dostosowanie wyglądu do różnych ekranów),
dodawanie animacji i efektów wizualnych.

CSS sprawia, że strony są:

estetyczne i atrakcyjne wizualnie,
spójne (jeden arkusz może zmieniać wygląd wielu stron),
łatwiejsze w utrzymaniu (zmiana w jednym pliku wpływa na całą witrynę).

2. Jak podłączyć CSS do HTML?

Istnieją trzy główne sposoby dołączenia stylów CSS do dokumentu HTML:

a) Inline (w linii)

Styl zapisuje się bezpośrednio w atrybucie style danego elementu HTML.
Przykład:

✅ Zalety: szybkie do zastosowania w pojedynczych przypadkach.

❌ Wady: nieczytelny kod, trudny w utrzymaniu, brak separacji treści od stylów.

b) Internal (wewnętrzny)

Styl umieszcza się w sekcji <head> dokumentu HTML w znaczniku <style>.
Przykład:

✅ Zalety: dobre przy małych stronach, łatwiejsze w utrzymaniu niż inline.

❌ Wady: style obowiązują tylko w tym jednym pliku HTML.

c) External (zewnętrzny)

Najczęściej stosowane rozwiązanie. Style zapisuje się w osobnym pliku .css, a następnie podłącza do HTML przy pomocy <link>.
Przykład:

✅ Zalety: największa przejrzystość, jeden plik CSS może stylować wiele stron, łatwa edycja.

❌ Wady: wymaga dodatkowego pliku (nie działa offline, jeśli plik CSS nie zostanie załadowany).

3. Składnia i podstawowe reguły CSS

Każda reguła CSS ma określoną strukturę:

a) Selektor

Określa, do jakiego elementu HTML odnosi się styl. Przykłady:

p – wszystkie akapity <p>,
.nazwa-klasy – elementy z klasą nazwa-klasy,
#id-elementu – element o konkretnym identyfikatorze,
div p – wszystkie <p> znajdujące się wewnątrz <div>.

b) Właściwość

Cecha, którą chcemy zmienić (np. color, font-size, background-color).

c) Wartość

Konkretne ustawienie dla danej właściwości (np. red, 20px, center).