CSS

Jak działa CSS?

1. Selektory
   Określają elementy HTML, do których przypisujemy styl, np. p (akapit), .klasa (elementy z daną klasą) czy #id (konkretny element).
2. Właściwości
   To parametry, które definiują wygląd danego elementu, np. color, font-size, margin.
3. Wartości
   Każda właściwość otrzymuje wartość, np. color: red;.

Zastosowania CSS

• Formatowanie tekstu (rozmiar, krój, kolor czcionki)
• Układ strony (rozmieszczenie elementów, kolumny, siatki)
• Animacje i przejścia (efekty hover, płynne zmiany kolorów lub pozycji)
• Responsywność (dopasowanie układu do różnych ekranów – desktop, tablet, smartfon)

Zalety korzystania z CSS

1. Oddzielenie warstwy prezentacji od warstwy treści
   Ułatwia to utrzymanie kodu i pracę zespołową (frontend vs. backend).
2. Łatwa modyfikacja wyglądu
   Zmieniając jeden plik CSS, możemy wprowadzić globalne modyfikacje w całym serwisie.
3. Mniejsze obciążenie strony
   Kod HTML staje się krótszy i bardziej przejrzysty, a przeglądarka pobiera styl raz, co wpływa na szybsze ładowanie.
4. Responsywność
   Dzięki regułom media queries strony mogą automatycznie dopasowywać swój układ do urządzeń mobilnych i tabletów.

Jak zacząć pracę z CSS?

• Plik zewnętrzny
  Najpopularniejsza forma – tworzymy plik .css, np. style.css, i dołączamy go do kodu HTML za pomocą znacznika <link>.
• Styl wbudowany w kod HTML
  Wpisujemy reguły CSS bezpośrednio w sekcji <style> w pliku HTML (mniej zalecane, ale przydatne w małych projektach).
• Styl w atrybucie elementu
  Definiujemy pojedyncze właściwości w samym tagu HTML, np. <p style="color: red;">. Praktyka stosowana raczej do testów.

Podsumowanie

CSS jest podstawowym językiem do kontrolowania prezentacji stron WWW. Pozwala tworzyć atrakcyjne wizualnie i responsywne layouty, dbając jednocześnie o wydajność i czytelność kodu. Dzięki jasnemu podziałowi na strukturę (HTML) i styl (CSS), praca nad stronami internetowymi staje się bardziej efektywna i przyjemna.