Reguła CSS

Twoje strony mają już nagłówki i akapity, ale wszystkie wyglądają tak samo: czarny tekst na białym tle i domyślna czcionka przeglądarki. HTML powiedział przeglądarce, czym jest treść - teraz musisz jej powiedzieć, jak ta treść ma wyglądać. Służy do tego reguła CSS.

Zaczynamy właśnie Twoją podróż ku opanowaniu sztuki stylizacji tekstu na stronach internetowych. Jesteś już zaznajomiony z podstawowymi elementami, takimi jak nagłówki i paragrafy. W następnych lekcjach i modułach tego szkolenia nauczymy Cię, jak manipulować grubością czcionki, dobierać odpowiedni rodzaj czcionki, modyfikować styl tekstu, regulować odstępy między wierszami i literami, wyrównywać tekst oraz wprowadzać inne efekty wizualne.

W edytorze z poprzedniej lekcji widziałeś już pierwsze reguły CSS - teraz poznasz ich składnię krok po kroku. W duchu kontynuacji procesu nauki HTML od nagłówka rozpoczniemy naszą przygodę ze stylizacją tekstu od tego właśnie elementu. Czeka nas wiele praktycznych ćwiczeń, dzięki którym nabierzesz doświadczenia i pewności w kodowaniu. Zainspirujmy się metodami starożytnego Egiptu, gdzie kierowano się zasadą uczenia przez praktykę.

Element, który ozdobimy

Regułę CSS możesz traktować jak polecenie dla malarzy świątynnych: najpierw mówisz, co mają pomalować, a potem - jak. Zacznijmy od zwykłego nagłówka pierwszego stopnia, zapisanego w HTML tak samo jak w poprzednich modułach:

1<h1>Tekst</h1>

Przeglądarka pokaże go dużą, pogrubioną czcionką - to jej domyślny styl. Żeby go zmienić, nie musimy dopisywać do HTML ani jednego znaku: cała reszta dzieje się w CSS.

Pierwsza reguła

I teraz pokolorujmy sobie ten nagłówek na czerwono. Oto kompletna reguła CSS, która to robi:

1h1 {
2  color: red;
3}

• Linia 1 - selektor h1 i nawias klamrowy otwierający: definiujemy, na który element ma działać reguła,
• Linia 2 - deklaracja CSS: właściwość (color) i wartość (red), oddzielone dwukropkiem i zakończone średnikiem - określa, jak będzie wyglądał nagłówek,
• Linia 3 - zamknięcie nawiasu klamrowego, czyli koniec reguły.

Zauważ, co się nie zmieniło: reguła zmienia tylko kolor tekstu. Rozmiar, grubość i odstępy nagłówka zostają takie, jakie nadała mu przeglądarka, bo CSS nadpisuje wyłącznie to, co wprost zapiszesz.

Selektor: komu dajemy polecenie?

Pisanie każdej reguły zaczynasz od wybrania selektora, bo zanim powiesz "jak", musisz powiedzieć "komu". Selektor h1 wybiera elementy po nazwie znacznika. Wkrótce poznasz dwa kolejne rodzaje: selektor klasy, zapisywany z kropką (np. .ramka), i selektor identyfikatora, zapisywany z krzyżykiem (np. #logo). Wrócimy do nich w lekcji o klasach i identyfikatorach.

Jedna reguła, wiele elementów

Zapisując powyższą regułę CSS, sprawisz, że wszystkie nagłówki pierwszego stopnia na stronie będą koloru czerwonego (jeśli żadna inna reguła jej nie nadpisuje). Nie ma znaczenia, czy na stronie jest jeden h1, czy dziesięć - reguła trafi do każdego.

Co znaczy "nadpisuje"? Gdy dwie reguły ustawiają tę samą właściwość dla tego samego elementu, przeglądarka musi wybrać zwycięzcę. Przy równie silnych selektorach wygrywa reguła zapisana później:

1h1 {
2  color: red;
3}
4
5h1 {
6  color: green;
7}

Nagłówek będzie zielony, bo druga reguła stoi niżej w arkuszu. Pierwsza nie znika i nie powoduje błędu - po prostu przegrywa. Dokładne zasady tej rywalizacji, czyli kaskadowość i specyficzność, poznasz w dalszej części modułu.

Moja rada: jedna deklaracja w jednej linii i zawsze średnik na końcu, nawet po ostatniej. Przeglądarka wybaczy brak średnika po ostatniej deklaracji, ale gdy dopiszesz pod nią kolejną linię, zapomniany średnik sprawi, że odrzuci obie.

Praktyka

W edytorze poniżej są już trzy reguły: dla h1, p i h2. Zmień wartość color w każdej z nich - na przykład na gold, jak złoto faraonów - i obserwuj podgląd:

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>CSS - Pierwsza reguła</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Witaj w świecie CSS!</h1>
11    <p>To jest mój pierwszy stylowany tekst.</p>
12    <h2>Kolejny nagłówek</h2>
13    <p>Możemy stylować różne elementy używając CSS.</p>
14</body>
15</html>

Zwróć uwagę, że w pliku HTML nie zmieniasz ani jednej litery - cały wygląd siedzi w pliku style.css. Pamiętaj: reguła CSS to polecenie dla malarzy świątyni - selektor mówi, którą ścianę malować, a deklaracja, jakim kolorem.