Jedną z funkcji CSS, a więc kaskadowych arkuszy stylów (z ang. Cascading Style Sheets), jest ustalanie kolorów dla określonych obiektów, np. backgroundu, tła diva, albo tekstu.
W artykule przedstawione zostaną trzy sposoby ustawiania kolorów za pomocą składni CSS.
Pierwszą metodą jest nadawanie danym elementom nazw kolorów, które są odczytywane przez przeglądarki. Kolory takie jak black, blue, green, red, white, czy yellow, a więc podstawowe i często używane w codziennym języku barwy, ze względów praktycznych (intuicyjność znaczenia) są powszechnie stosowane w arkuszach CSS zarówno przez amatorów webmasteringu, jak i zawodowo zajmujących się projektowaniem stron internetowych.
Przykład stosowania nazw przy określaniu kolorów w CSS:
#content{
background-color: black;
}
Powyższe rozwiązanie przypisuje elementowi <div id=”content”></div> tło koloru czarnego.
Kluczowe przy określaniu barwy jest bezbłędne użycie składni CSS. Po atrybucie „background-color” musi wystąpić dwukropek, po którym wpiszemy wartość cechy. Istotnym elementem jest średnik, występujący po cesze. Całość zapisu cech selektora (znacznika p, h1, div, td, czy innych) ujęta musi być w nawiasy klamtowe „{ ... }”.
Całość ująć więc można w następujący schemat:
selektor.klasa {cecha 1: wartość2; cecha2: wartość2; cecha3: wartość3;}
Przykładowo:
p.przyklad {color: blue;}
Innym sposobem przyporządkowywania kolorów elementom za pomocą stylów CSS, jest stosowanie zapisu szesnastkowego.
Przykład zastosowania zapisu szesnastkowego:
#content{
background-color: #000000;
}
Powyższe rozwiązanie również przypisuje elementowi <div id=”content”></div> tło koloru czarnego.
Oto zapisy szesnastkowe często stosowanych kolorów:
czarny #000000
biały #FFFFFF
niebieski #0000FF
czerwony #FF0000
zielony #008000
żółty #FFFF00
granatowy #000080
fioletowy #800080
srebrny #C0C0C0
szary #808080
Trzecim omawianym w artykule sposobem na określanie kolorów za pomocą CSS jest model przestrzeni barw rgb (red, green, blue). W wyniku łączenia barw czerwonej, zielonej i niebieskiej w wybranym przez użytkownika natężeniu powstaje nowy kolor. To rozwiązanie daje nam ogromną paletę rozwiązań, jako że każdy z trzech kolorów rgb może być określony dowolną liczbą naturalną nie większą niż 255 oraz zerem.
Przykład zastosowania modelu rgb:
#content{
background-color: rgb(0, 0, 0);
}
Powyższe rozwiązanie po raz kolejny przypisuje elementowi <div id=”content”></div> tło koloru czarnego.
Wybranie jednej z tych trzech metod w konkretnych przypadkach to kwestia wyboru webmastera. W przypadku najpopularniejszych kolorów zwykle bierze górę stosowanie nazw barw, szczególnie w przypadku mniej doświadczonych twórców stron, ze względu na przejrzystość takiego rozwiązania.
Kiedy natomiast zależy nam na oryginalnym kolorze i posiadamy co nieco zmysłu artystycznego, poleca się stosowanie dającego mnóstwo możliwości modelu barw rgb.
