Jak używać CSS do zmiany koloru czcionki

Chcesz urozmaicić swoją witrynę za pomocą różnych kolorów czcionek? Możesz to zrobić za pomocą CSS. CSS to skrót od Cascading Style Sheets i jest domyślnym językiem używanym do tworzenia i zarządzania stylem dowolnej witryny.

Istnieją trzy metody stosowania CSS w dokumencie HTML. Są to wbudowany CSS, wewnętrzny/wbudowany CSS i zewnętrzny CSS.

Metoda pierwsza: wbudowany CSS

Aby zmienić kolor czcionki w CSS, musisz utworzyć regułę CSS, aby ustawić wartość właściwości koloru.

Metoda inline wykorzystuje właściwość style, którą można zastosować do prawie każdego elementu. Oto przykład, który ustawia kolor czcionki akapitu HTML na czerwony:

Akapit tekstu

Ten sam efekt możesz osiągnąć za pomocą wewnętrznego/osadzonego CSS lub zewnętrznego CSS.

Metoda druga: wewnętrzny/wbudowany CSS

Możesz użyć tej metody, gdy chcesz utworzyć reguły CSS, które dotyczą więcej niż jednego wystąpienia elementu HTML, ale tylko na jednej stronie. Reguły CSS są następnie zapisywane w nagłówku strony HTML za pomocą elementu stylu:

Metoda trzecia: zewnętrzny CSS

Trzecim sposobem na osiągnięcie tego samego efektu jest użycie zewnętrznego arkusza stylów CSS. Za pomocą edytora tekstu utwórz plik z rozszerzeniem „.css”. Powszechną praktyką jest nazywanie tego pliku mniej więcej arkusz stylów.css ale możesz nazwać go cokolwiek, o ile zachowasz rozszerzenie „.css”.

Aby pokolorować tekst treści na zielono, na przykład za pomocą zewnętrznego arkusza stylów, po prostu wklej w regule CSS w następujący sposób:

p { kolor: niebieski }

W dokumencie HTML powinieneś dołączyć link do arkusza stylów w elemencie nagłówka HTML:

Akapit tekstu

Zmiana koloru czcionki w HTML bez stosowania CSS

Najlepszą praktyką jest użycie CSS, ale oto jak zmienić kolor czcionki za pomocą samego HTML:

Akapit tekstu

Element czcionki wraz z atrybutem koloru jest przestarzały. Dzieje się tak dlatego, że są to elementy prezentacyjne, a nie strukturalne. Współczesny HTML powinien składać się wyłącznie z elementów strukturalnych.

Zmiana koloru czcionki w CSS jest stosunkowo prosta

Pokazaliśmy ci trzy metody zmiany koloru czcionki w CSS. Pokazaliśmy również, jak zrobić to w stary sposób, używając tagu czcionki HTML. Wypróbuj je i przekonaj się, co jest dla Ciebie najlepsze!

Po opanowaniu zmiany koloru czcionki za pomocą CSS i HTML możesz chcieć opanować zmianę rozmiaru czcionki w HTML.

Jak zmienić rozmiar czcionki HTML w CSS?

Czytaj dalej

O autorze