Wprowadzenie do CSS — selektory i podstawowe właściwości

Po co się tego uczymy?

Strona zbudowana tylko z HTML wygląda jak zwykły tekstowy dokument — CSS zamienia ją w coś, co realnie chcesz pokazać użytkownikowi. To narzędzie towarzyszące (nie jest osobno wymienione w podstawie programowej INF.03.5), ale praktycznie niezbędne do zbudowania jakiejkolwiek prawdziwej strony.

Teoria

HTML odpowiada za TREŚĆ i STRUKTURĘ strony, ale nie za wygląd. Tym zajmuje się CSS (Cascading Style Sheets) — osobny język opisujący, jak elementy HTML mają wyglądać: kolory, czcionki, odstępy, rozmiary.

CSS można dołączyć na trzy sposoby: inline (atrybut style bezpośrednio w znaczniku — odradzane, trudne do utrzymania), wewnętrzny (znacznik <style> w <head>) i zewnętrzny (osobny plik .css podłączony przez <link rel="stylesheet" href="styl.css"> — najlepsza praktyka, bo jeden plik CSS może stylować wiele stron naraz).

CSS działa na zasadzie reguł: selektor { właściwość: wartość; }
Selektory wskazują, KTÓRE elementy stylować:
p — wszystkie znaczniki <p> (selektor znacznikowy).
.karta — wszystkie elementy z class="karta" (selektor klasy — najczęściej używany).
#naglowek — JEDEN konkretny element z id="naglowek" (selektor id — powinien być unikalny na stronie).

Podstawowe właściwości: color (kolor tekstu), background-color (kolor tła), font-size (rozmiar czcionki), font-weight (grubość, np. bold), text-align (wyrównanie tekstu).

Przykład z życia

Ta sama struktura HTML może wyglądać zupełnie inaczej w zależności od podpiętego pliku CSS — dokładnie w ten sposób wiele serwisów pozwala przełączać "motywy" (jasny/ciemny) bez zmiany ani jednej linijki HTML.

Kod (CSS)

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        color: #222;
    }

    h1 {
        color: #2c3e50;
        text-align: center;
    }

    .karta-filmu {
        background-color: white;
        padding: 16px;
        border: 1px solid #ccc;
    }

    .cena {
        color: #27ae60;
        font-weight: bold;
    }
</style>

<h1>Katalog filmów</h1>
<div class="karta-filmu">
    <h2>Podróż w czasie</h2>
    <p>Cena wypożyczenia: <span class="cena">9.99 zł</span></p>
</div>

Komentarz i wyjaśnienie kodu

Selektor .karta-filmu (z kropką) odnosi się do atrybutu class="karta-filmu" w HTML — tej samej klasy możesz użyć na wielu elementach naraz (np. każdy film w katalogu dostaje klasę karta-filmu), w przeciwieństwie do id, który powinien być unikalny. Kolejność reguł CSS ma znaczenie — reguła zdefiniowana niżej "wygrywa" przy tej samej sile selektora (stąd nazwa "kaskadowe" arkusze stylów).

Ćwiczenie samodzielne

Ostyluj stronę z Lekcji 1 — zmień kolor tła, kolor i rozmiar nagłówka.

Zadania do pracy własnej

Dodaj do dowolnej wcześniejszej strony regułę CSS zmieniającą kolor wszystkich linków (a) na wybrany kolor.
Ostyluj tabelę z Lekcji 2 — dodaj obramowanie komórek, naprzemienne kolory tła wierszy i wyśrodkuj nagłówki kolumn.
Ostyluj katalog filmów z Lekcji 2 tak, żeby każdy film wyświetlał się jako osobna "karta" z białym tłem, cieniem (box-shadow), zaokrąglonymi rogami (border-radius) i wyróżnioną kolorem ceną — to przygotowanie pod prawdziwy katalog filmów pobierany z bazy danych w Lekcji 11 działu PHP.

Typowe błędy

Częsty błąd to mylenie .klasa (kropka) z #id (hasz) w selektorach — to dwa różne mechanizmy o różnej sile działania. Drugi błąd: nadużywanie stylów inline (style="..." w każdym znaczniku) zamiast jednego, spójnego pliku CSS — trudno to potem utrzymać. Trzeci: zapomnienie średnika ; na końcu deklaracji właściwości, co może zepsuć całą resztę reguły.

Nawiązanie do egzaminu zawodowego

CSS nie jest osobno wymieniony jako efekt kształcenia w INF.03.5 (jednostka koncentruje się na HTML, JavaScript i PHP), ale bez niego żadna strona zbudowana w ramach tego przygotowania nie wyglądałaby na gotowy produkt — traktuj go jako niezbędne narzędzie pomocnicze, którego i tak używa się na egzaminie praktycznym przy każdym zadaniu webowym.