Gdy chcesz wiedzieć, jak zmienić kolor czcionki html, najważniejsza informacja jest prosta: kolor tekstu ustawia się dziś przede wszystkim za pomocą CSS, a nie specjalnych znaczników HTML. Pokażę kilka działających metod, wyjaśnię różnice między kodem inline i arkuszem stylów, a także omówię dobór kolorów, dziedziczenie oraz błędy, przez które zmiana często nie działa.
Kolor tekstu ustawisz jedną właściwością CSS
- Właściwość color zmienia kolor tekstu elementu HTML.
- Możesz używać nazw kolorów, kodów HEX, RGB i HSL.
- Najlepszym rozwiązaniem dla większej strony jest zewnętrzny arkusz CSS.
- Znacznik jest przestarzały i nie powinien być używany w nowych projektach.
- Sam kolor nie wystarczy, jeśli tekst ma zbyt niski kontrast względem tła.
Najprostszy sposób to właściwość color
Za kolor tekstu odpowiada w CSS właściwość color. Możesz przypisać ją do akapitu, nagłówka, linku, przycisku albo dowolnego innego elementu zawierającego tekst.
Ten tekst jest niebieski.
W tym przykładzie użyłem stylu inline, czyli zapisanego bezpośrednio w znaczniku HTML. To szybka metoda do testów lub pojedynczego elementu, ale przy większej liczbie zmian szybko robi się nieczytelna. Sam zwykle traktuję ją jako rozwiązanie tymczasowe, a właściwe style przenoszę do arkusza CSS.
Możesz zmienić kolor również nagłówka:
Ciemnoczerwony nagłówek
Warto zwrócić uwagę, że HTML określa strukturę dokumentu, a CSS odpowiada za jego wygląd. Rozdzielenie tych ról ułatwia późniejsze poprawki i pozwala zmienić wygląd wielu elementów jednym wpisem.
Trzy praktyczne miejsca na zapis stylu
Styl bezpośrednio w znaczniku
Najkrótszy zapis wygląda tak:
Zielony tekstTo rozwiązanie sprawdzi się, gdy chcesz szybko sprawdzić efekt albo zmienić jeden wyjątkowy fragment. Jego wadą jest powtarzanie kodu. Jeśli ten sam kolor pojawi się w 20 miejscach, późniejsza zmiana będzie wymagała edycji każdego elementu.
Styl w sekcji style
Przy małej stronie możesz umieścić reguły CSS w sekcji :
Selektor p obejmie wszystkie akapity, a h2 wszystkie nagłówki drugiego poziomu. Dzięki temu jedna reguła wpływa na wiele elementów. To już znacznie wygodniejsza metoda niż wpisywanie stylu przy każdym akapicie.
Przeczytaj również: Centrowanie zdjęć w HTML & CSS: Którą metodę wybrać?
Zewnętrzny arkusz CSS
W większym projekcie najlepiej utworzyć plik, na przykład style.css, i połączyć go z dokumentem HTML:
W samym arkuszu możesz zapisać:
body {
color: #222222;
}
.tytul {
color: #7c3aed;
}
.ostrzezenie {
color: #b91c1c;
}Klasa tytul zmieni kolor elementu, któremu dodasz atrybut class="tytul". Ta metoda daje największą kontrolę i pozwala utrzymać spójny wygląd całej witryny. W praktyce to właśnie ją wybieram, gdy kod ma być rozwijany dłużej niż jeden wieczór.
Jak zapisać kolor w CSS
CSS pozwala określić kolor na kilka sposobów. Najprostsze są nazwy, takie jak red, green czy navy, ale w projekcie produkcyjnym częściej używa się dokładniejszych wartości.
| Format | Przykład | Kiedy go użyć |
|---|---|---|
| Nazwa | color: tomato; |
Szybki test i proste przykłady |
| HEX | color: #2563eb; |
Najczęstszy wybór w klasycznych arkuszach CSS |
| RGB | color: rgb(37 99 235); |
Gdy wygodnie jest pracować na wartościach czerwonego, zielonego i niebieskiego |
| RGBA | color: rgba(37, 99, 235, 0.7); |
Gdy potrzebujesz częściowej przezroczystości |
| HSL | color: hsl(221 83% 53%); |
Wygodne modyfikowanie odcienia, nasycenia i jasności |
Najbardziej uniwersalny będzie kod HEX, na przykład #2563eb. Pierwsze dwie cyfry opisują czerwony, kolejne zielony, a ostatnie niebieski składnik koloru. Nie musisz jednak zapamiętywać wartości. Możesz wybrać kolor w dowolnym próbniku, a potem skopiować gotowy kod.
Format RGB przydaje się wtedy, gdy chcesz zmieniać przezroczystość lub programowo modyfikować kolor. Z kolei HSL bywa wygodniejszy przy tworzeniu palety, ponieważ pozwala niezależnie regulować odcień, nasycenie i jasność. Według dokumentacji MDN wszystkie te wartości mogą być używane jako wartość właściwości color.
Jak zmienić kolor wybranego fragmentu tekstu
Nie zawsze chcesz zmieniać kolor całego akapitu. Do pojedynczych słów lub krótkich fragmentów służy najczęściej element z klasą CSS.
Ten fragment jest zwykły, a
ten ma inny kolor.
.wyroznienie {
color: #dc2626;
font-weight: 700;
}Takie rozwiązanie jest czytelniejsze niż wielokrotne stosowanie stylu inline. Klasa opisuje rolę fragmentu, a nie tylko jego aktualny kolor. Jeśli później zmienisz czerwony na pomarańczowy, wystarczy poprawić jedną regułę.
Możesz także użyć selektora elementu:
a {
color: #2563eb;
}
a:hover {
color: #1d4ed8;
}Pierwsza reguła ustawia kolor wszystkich linków, a :hover zmienia go po najechaniu kursorem. Dla klawiatury i urządzeń dotykowych warto zadbać również o stan fokusu, ponieważ sam efekt najechania nie jest dostępny dla każdego użytkownika.
a:focus-visible {
outline: 3px solid #f59e0b;
outline-offset: 3px;
}Dlaczego kolor nie zawsze się zmienia
Najczęstszy problem wynika z tego, że inna reguła CSS ma wyższy priorytet. CSS stosuje mechanizm kaskady, który rozstrzyga, która deklaracja wygra, gdy kilka reguł ustawia właściwość color dla tego samego elementu.
p {
color: black;
}
.article p {
color: #2563eb;
}Jeżeli akapit znajduje się w elemencie z klasą article, druga reguła jest bardziej szczegółowa i zwykle ustawi kolor niebieski. Pomocne będzie też sprawdzenie kodu w narzędziach deweloperskich przeglądarki. W zakładce stylów zobaczysz, która deklaracja działa, a która została przekreślona.
Do typowych przyczyn problemu należą:
- literówka w nazwie właściwości, na przykład
colourzamiastcolor, - brak średnika lub nawiasu zamykającego w arkuszu CSS,
- odwołanie do nieistniejącej klasy,
- nadpisanie stylu przez bardziej szczegółowy selektor,
- nieodświeżona pamięć podręczna przeglądarki,
- zastosowanie koloru do rodzica, gdy dziecko ma własną deklarację.
Nie polecam zaczynać od !important. Może wymusić konkretny kolor, ale utrudnia późniejsze zarządzanie stylami i często maskuje prawdziwy problem z selektorem. Najpierw sprawdź strukturę HTML, nazwę klasy i kolejność reguł.
Uważaj też na dziedziczenie. Jeśli ustawisz color dla elementu body, większość tekstu wewnątrz dokumentu odziedziczy ten kolor, chyba że konkretny element otrzyma własną wartość. Dziedziczenie jest wygodne, lecz linki, przyciski i nagłówki często mają osobne style zdefiniowane przez przeglądarkę lub gotowy framework.
Stary znacznik font i lepsze rozwiązania
W starszych poradnikach możesz znaleźć taki zapis:
Czerwony tekstTen znacznik jest dziś uznawany za przestarzały. Współczesny kod powinien oddzielać strukturę dokumentu od wyglądu, dlatego kolor ustawiaj w CSS:
Czerwony tekst
.czerwony-tekst {
color: #dc2626;
}Zyskujesz wtedy większą kontrolę nad projektem, łatwiejsze zmiany oraz lepszą współpracę z responsywnym układem strony. Stary zapis może zadziałać w wielu przeglądarkach, ale nie jest dobrym wyborem dla nowego projektu. Takie podejście jest zgodne z aktualnymi praktykami opisywanymi w dokumentacji CSS.
Kolor musi być czytelny, nie tylko efektowny
Czerwony tekst na czarnym tle albo jasnoszary tekst na białym tle może wyglądać ciekawie w edytorze, lecz być trudny do odczytania na stronie. Dlatego po ustawieniu koloru sprawdź go na różnych ekranach i przy różnym poziomie jasności.
W przypadku zwykłego tekstu warto dążyć do kontrastu na poziomie co najmniej 4,5 do 1. Dla dużego tekstu próg może wynosić 3 do 1. Kontrast nie jest jedynie kwestią estetyki. Ma znaczenie dla osób słabowidzących, użytkowników telefonów w słońcu oraz każdego, kto czyta dłuższy tekst.
Dobrym punktem wyjścia jest ciemny tekst na jasnym tle, na przykład:
body {
color: #1f2937;
background-color: #ffffff;
}
a {
color: #1d4ed8;
}Nie używaj samego koloru jako jedynego sposobu przekazywania informacji. Jeśli komunikat oznacza błąd, dodaj również ikonę, tekst lub odpowiedni opis. Czerwony napis bez dodatkowego oznaczenia może być niezrozumiały dla osób z zaburzeniami rozpoznawania barw.
Mała zmiana, która powinna być częścią większego porządku
Najkrótsza odpowiedź brzmi: użyj właściwości color, najlepiej w klasie CSS lub zewnętrznym arkuszu stylów. Do pojedynczego testu wystarczy zapis inline, ale rozwijana strona szybko odwdzięczy się za uporządkowane klasy, spójną paletę i ograniczenie powtarzających się deklaracji.
Ja zaczynam zwykle od jednego koloru bazowego, koloru linków i koloru komunikatów, a dopiero później dodaję kolejne odcienie. Dzięki temu tekst pozostaje czytelny, kod łatwiej utrzymać, a zmiana wyglądu całej witryny nie wymaga poprawiania dziesiątek przypadkowych fragmentów HTML.
