Podstawy CSS: Klasy, ID i Kaskadowość

Samo HTML to zaledwie goły szkielet, a CSS (Cascading Style Sheets) to skóra, farba i makijaż Twojej strony. Na egzaminie INF.03 odtworzenie poprawnego wyglądu (często ze zrzutu ekranu w arkuszu) to spora część punktacji.

3 Sposoby dołączania stylów

1. Inline (W linii) – Najgorszy sposób, używany tylko w akcie desperacji. <p style="color: red;">Tekst</p>
2. W sekcji <head> – Dopuszczalny na prostych stronach.
3. Zewnętrzny plik (Zalecany) – Prawie zawsze wymagany na egzaminach CKE. W <head> pliku HTML piszemy: <link rel="stylesheet" href="styl.css">.

Selektory: Jak trafić w odpowiedni element?

• Tag: p { ... } – Pokoloruje wszystkie akapity na stronie.
• Klasa (Kropka): .zielony { ... } – Pokoloruje wszystkie elementy z class="zielony". Klas można używać wielokrotnie!
• ID (Krzyżyk / Hash): #baner { ... } – Zmieni element z id="baner". ID musi być unikalne na całej stronie!

Pułapka CKE 🪤: CKE uwielbia polecenia w stylu "Akapity w prawym bloku mają mieć czcionkę pogrubioną". Używamy wtedy tzw. selektora potomka (spacji): #prawy p { font-weight: bold; } Oznacza to: weź wszystkie akapity p, ale tylko te, które są w środku elementu o ID prawy.

Kaskadowość i Priorytety (Waga selektorów)

Czasem piszesz styl, a on się nie nakłada. Dlaczego? Bo CSS to Kaskadowe Arkusze Stylów – jeśli dwa style kłócą się o ten sam element, wygrywa "cięższy".

1. Znacznik (np. h1) waży 1 punkt.
2. Klasa (np. .tytul) waży 10 punktów.
3. ID (np. #naglowek) waży 100 punktów.
4. Styl wpisany w HTML (style="...") waży 1000 punktów.

Ciekawostka: Jeśli musisz, ale to absolutnie MUSISZ wymusić jakiś styl, pomimo tego, że przegrywa wagą, dopisujesz !important (np. color: red !important;). Na egzaminie jednak rzadko jest to konieczne, jeśli trzymasz porządek.