Aby zmienić kolor czcionki w HTML, należy skorzystać z języka CSS, który jest obecnie najpopularniejszym i najbardziej zalecanym sposobem stylizowania tekstu na stronach internetowych. Poniżej znajdziesz szczegółowy poradnik obejmujący wszystkie najważniejsze metody, praktyczne przykłady oraz wskazówki zgodne ze współczesnymi standardami webdevelopingu.
Zmiana koloru za pomocą CSS w atrybucie style
Najprostszy sposób to użycie atrybutu style bezpośrednio w znaczniku HTML. Najczęściej wykorzystywaną właściwością jest color.
Przykłady
<p style="color: red;">To jest czerwony tekst.</p>
<p style="color: green;">To jest zielony tekst.</p>
<p style="color: #3366cc;">Tekst w kolorze zapisanym szesnastkowo.</p>
<p style="color: rgb(255, 100, 0);">Tekst w kolorze RGB.</p>
<p style="color: rgba(200, 0, 0, 0.5);">Czerwony tekst z przezroczystością.</p>
Możesz użyć:
- Nazw kolorów – np. red, green, blue;
- Wartości szesnastkowych – np. #FF0000;
- Wartości RGB – np. rgb(255,0,0);
- Wartości RGBA – np. rgba(255,0,0,0.5) – z przezroczystością.
Zastosowanie znaczników <span> i <div>
Jeśli chcesz wyróżnić pojedynczy fragment tekstu, użyj znacznika <span> z odpowiednim stylem:
<p>Kawa jest <span style="color: brown;">brązowa</span>, a trawa <span style="color: green;">zielona</span>.</p>
Znacznik <div> sprawdzi się przy większych blokach tekstu:
<div style="color: navy;">
Cały ten blok tekstu będzie granatowy.
</div>
Zmiana koloru tekstu z wykorzystaniem osobnego arkusza CSS
Profesjonalne strony internetowe korzystają z zewnętrznych arkuszy stylów – pozwala to łatwo zarządzać wyglądem i szybko wprowadzać globalne zmiany.
Przykład – plik CSS
W pliku HTML –
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="prim">Ten tekst będzie niebieski.</p>
<p class="warn">Ten tekst będzie czerwony.</p>
</body>
W pliku style.css –
.prim { color: blue; }
.warn { color: red; }
Możliwe wartości koloru
- Nazwy (angielskie) – black, red, green, blue, yellow, gray, fuchsia, maroon, lime, navy itp.;
- Wartości szesnastkowe – #FF0000, #00FF00, #0000FF, #FFFF00 itd.;
- RGB – rgb(255,0,0), rgb(0,255,0), rgb(0,0,255);
- RGBA – rgba(0,0,0,0.7) (gdzie czwarta wartość określa przezroczystość).
Przestarzała metoda: znacznik <font>
Kiedyś stosowano tag <font color="...">, np.:
<font color="red">To stary sposób na czerwony tekst</font>
Obecnie używanie <font> jest niezalecane – ten sposób nie jest już wspierany w najnowszych specyfikacjach HTML i jego stosowanie może prowadzić do niezgodności.
Przykłady praktyczne
Przykład – różne kolory w jednym akapicie
<p>
<span style="color: red;">Jabłko</span> jest czerwone,
<span style="color: green;">liść</span> jest zielony,
a <span style="color: blue;">niebo</span> jest niebieskie.
</p>
Przykład – zmiana koloru po najechaniu myszą (hover)
<style>
.hovered { color: black; transition: color 0.3s; }
.hovered:hover { color: orange; }
</style>
<p class="hovered">Najedź kursorem, a tekst zmieni kolor na pomarańczowy.</p>
Najlepsze praktyki
- Używaj CSS zamiast starych znaczników czy atrybutów HTML;
- Stosuj klasy CSS w celu ponownego użycia stylu dla wielu elementów;
- Unikaj przesadnego formatowania – dla dostępności i czytelności.
Zmiana koloru czcionki w HTML jest bardzo łatwa i oferuje dużą elastyczność. Stosując powyższe metody, możesz dowolnie stylizować tekst na swojej stronie internetowej, zgodnie z przyjętymi standardami i najlepszymi praktykami webdevelopingu.
