Masz gotową stronę, ale tekst nadal wygląda zbyt jednolicie? Pokażę, jak zmienić kolor tekstu w HTML za pomocą CSS, kiedy użyć stylu inline, klasy lub selektora elementu, a także jak dobrać zapis koloru i uniknąć problemów z czytelnością.
Kolor tekstu zmienisz jedną właściwością CSS
-
Właściwość
colorodpowiada za kolor tekstu i dekoracji tekstowych. - Styl inline sprawdza się przy szybkiej, jednorazowej zmianie.
- Klasy CSS są lepsze, gdy ten sam kolor ma pojawić się w wielu miejscach.
- Możesz używać nazw kolorów, zapisu HEX, funkcji rgb() oraz hsl().
- Kolor musi zapewniać odpowiedni kontrast względem tła.
Najprostszy sposób na zmianę koloru tekstu
Za kolor tekstu odpowiada w CSS właściwość color. Możesz przypisać ją do akapitu, nagłówka, linku, przycisku albo dowolnego innego elementu HTML.
Ten tekst jest czerwony.
W tym przykładzie styl został zapisany bezpośrednio w znaczniku HTML. To dobre rozwiązanie, gdy chcesz szybko zmienić jeden konkretny fragment, na przykład wyróżnić ważne słowo w krótkim komunikacie.
To jest zwykły tekst, a ten fragment ma inny kolor.
Sam często korzystam z elementu span przy drobnych wyróżnieniach, ale nie używam go jako głównej metody stylowania całej strony. Przy większym projekcie style inline szybko zaczynają utrudniać poprawki, bo kolor trzeba zmieniać osobno w wielu miejscach.
Trzy metody zapisu stylu i wybór najlepszej
Kolor możesz dodać bezpośrednio w HTML, wewnątrz sekcji albo w osobnym pliku CSS. Każda metoda działa, ale różni się wygodą utrzymania kodu.
| Metoda | Przykład | Kiedy jej użyć |
|---|---|---|
| Inline CSS | style="color: red" |
Pojedynczy element lub szybki test |
| CSS w HTML | p { color: #333; } |
Mała strona lub jeden dokument |
| Osobny plik CSS | .opis { color: #333; } |
Większy projekt i wiele podstron |
Styl bezpośrednio w znaczniku
Zielony nagłówek
To najszybszy wariant, lecz ma słabą skalowalność. Jeśli po tygodniu zdecydujesz, że wszystkie nagłówki mają być granatowe, ręczna edycja kilkudziesięciu znaczników będzie zwyczajnie męcząca.
Reguła w sekcji style
Każdy akapit otrzyma ciemnoszary kolor.
To wygodniejsze rozwiązanie dla prostych ćwiczeń i pojedynczych stron. Reguła obejmuje wszystkie elementy pasujące do selektora, więc jedna zmiana może wpłynąć na wiele akapitów.
Klasa w zewnętrznym arkuszu CSS
/* style.css */
.tekst-akcentowany {
color: #b42318;
}Ten komunikat wymaga uwagi.
W praktyce to mój domyślny wybór. Klasa jasno opisuje przeznaczenie stylu, można ją wielokrotnie wykorzystać, a zmiana koloru w jednym miejscu aktualizuje całą stronę.
Jak zapisać kolor w CSS
CSS przyjmuje kilka formatów kolorów. Na początku najłatwiejsze są nazwy, ale przy projektowaniu spójnej palety częściej przydaje się zapis HEX, RGB albo HSL.
p {
color: red; /* nazwa */
}
h2 {
color: #1d4ed8; /* zapis szesnastkowy */
}
a {
color: rgb(29 78 216); /* RGB */
}
.alert {
color: hsl(0 72% 42%); /* HSL */
}HEX składa się z sześciu znaków określających udział czerwieni, zieleni i niebieskiego. To popularny i czytelny zapis, dlatego dobrze sprawdza się w klasycznych arkuszach CSS.
Format RGB bywa wygodny, gdy pracujesz z wartościami kanałów, natomiast HSL ułatwia ręczne rozjaśnianie lub przyciemnianie koloru. W nowoczesnym CSS możesz również zapisać przezroczystość, na przykład rgb(29 78 216 / 60%).
Przeczytaj również: Tablice dwuwymiarowe C++: deklaracja, użycie i alternatywy
Zmiana koloru całej strony
body {
color: #222;
}Kolor ustawiony dla body jest zwykle dziedziczony przez tekst znajdujący się niżej w strukturze dokumentu. To dobry punkt wyjścia dla podstawowego koloru treści, choć pojedyncze elementy, takie jak linki czy przyciski, mogą mieć własne reguły.
Selektory, dziedziczenie i kolory linków
Najczęstszy błąd początkujących polega na zmianie koloru elementu, który nie kontroluje danego tekstu. Zamiast stylować przypadkowy kontener, wybierz selektor odpowiadający konkretnemu elementowi.
h1 {
color: #111827;
}
p {
color: #374151;
}
.naglowek-akcent {
color: #7c3aed;
}Jeśli chcesz zmienić kolor tylko jednego nagłówka, klasa będzie bezpieczniejsza niż reguła dla wszystkich elementów h1. Dzięki temu zachowasz kontrolę nad zakresem zmiany i nie popsujesz wyglądu innych sekcji.
Linki często mają osobne stany. Kolor zwykłego odnośnika, linku odwiedzonego i linku wskazanego kursorem możesz ustawić tak:
a {
color: #2563eb;
}
a:visited {
color: #6d28d9;
}
a:hover {
color: #1e40af;
}
a:focus {
outline: 2px solid #f59e0b;
}Pseudoklasy :hover i :focus nie są ozdobnikiem. Pierwsza pokazuje reakcję na kursor, a druga pomaga osobom korzystającym z klawiatury. Sam zwracam szczególną uwagę na stan focus, bo jego usunięcie potrafi pogorszyć obsługę strony bardziej, niż sugeruje to sam wygląd.
Najczęstsze błędy przy zmianie koloru tekstu
Jeżeli deklaracja nie działa, najpierw sprawdź składnię. Właściwość musi mieć nazwę, dwukropek, wartość i średnik, a selektor powinien pasować do elementu w HTML.
/* Poprawnie */
p {
color: #333;
}
/* Błędnie */
p {
colour #333
}W CSS używa się amerykańskiej pisowni color, a nie colour. Problemem może być też literówka w nazwie klasy, brak kropki przed klasą albo nadpisanie stylu przez bardziej szczegółowy selektor.
Drugi częsty problem to kolor, który wygląda dobrze w edytorze, ale jest nieczytelny na stronie. Ciemnoszary tekst na białym tle zwykle wypada lepiej niż czysta czerń, jednak najważniejszy pozostaje kontrast między tekstem a tłem.
- dla zwykłego tekstu kontrast powinien wynosić co najmniej 4,5:1,
- dla dużego tekstu minimum to zwykle 3:1,
- nie przekazuj informacji wyłącznie kolorem, na przykład czerwonym tekstem bez dodatkowego komunikatu lub ikony.
Czerwony komunikat błędu powinien zawierać także jasny opis problemu, a nie tylko zmianę barwy. To drobna decyzja, która poprawia dostępność dla osób z zaburzeniami rozpoznawania kolorów.
Praktyczny przykład kompletnej stylizacji
Poniższy przykład pokazuje rozwiązanie, które można od razu rozbudować w małym projekcie. Kolor bazowy trafia do body, wyróżnienie do klasy, a link otrzymuje osobne zachowanie po najechaniu.
To najważniejsza informacja na stronie.
Zwykły tekst pozostaje ciemnoszary.
Sprawdź dane przed wysłaniem formularza.
Przejdź do kontaktuTen układ oddziela treść od prezentacji i pozwala szybko zmienić całą paletę. Gdy projekt urośnie, przeniesienie reguł do osobnego pliku CSS będzie naturalnym kolejnym krokiem.
Dobry kolor zaczyna się od właściwego selektora
Jeśli zależy Ci na jednorazowej zmianie, użyj style="color: ...". Gdy kolor ma powtarzać się w wielu miejscach, wybierz klasę CSS, a dla podstawowego wyglądu strony ustaw kolor odziedziczony przez body.
Najbezpieczniejszy schemat jest prosty: wybierz właściwość color, dobierz czytelny zapis barwy, sprawdź kontrast i upewnij się, że reguła trafia do właściwego elementu. Taka kolejność pozwala zmienić wygląd tekstu bez tworzenia bałaganu w kodzie i bez utrudniania korzystania ze strony.
