Jak widzimy na rysunku odległości mierzymy od lewego-górnego rogu ekranu, przy czym w pionie mierzymy od góry w dół, a więc odwrotnie jak w kartezjańskim układzie współrzęnych. Należy również zaznaczyć, że najczęściej będziemy mierzyć nie względem ekranu, nawet nie względem okna przeglądarki, ale względem obiektu nadrzędnego w stosunku do danego w strukturze obiektów.

W jednostkach długości wyrażamy w stylach CSS wartości wielu cech, na przykład wielkość czcionki, marginesów, rozmiary elementów itd. Format zapisu jest prosty: piszemy liczbę a zaraz po niej jednostkę długości. Niektóre cechy mogą posiadać wartości ujemne i wtedy przed liczbą stwiamy dodatkowo znak minus. Kilka przykładów:

• left:20px; jest zapisem poprawnym, ale left:20 px; błędnym ze względu na spację pomiędzy liczbą a jednostką;

• left:0px; jest zapisem poprawnym, ale left:0; jest również poprawnie - przy zerze nie musimy pisać jednostki, zero zawsze jest zerem;

• left:+20px; jest poprawne ale bez sensu, wystarczy left:20px;

• left:-20px; jest poprawne - skoro można przesunąć obiekt w prawo, to dlaczego nie można by go przesunąć w lewo?

Jednostki długości możemy podzielić na:

• bezwzględne,

• względne (relatywne).

Bezwzględne jednostki długości - dlaczego tak się nazywają? Spójrz na linijkę z podziałką - centymetry i milimetry będą zawsze takie same, czy to na Twojej linijce, czy na ekierce kolegi, czy na taśmie mierniczej, ba - istnieje nawet wzorzec (co prawda nie centymetra ale metra) po to, aby wszędzie na świecie metry, centymetry i milimetry były dokładnie takie same, bez względu na okoliczności.

Względne jednostki długości - odnosimy do innego obiektu lub urządzenia. Na przykład możemy odnieść do wysokości domyślnej czcionki obiektu, wysokość której uznamy za 1. Jeżeli długość tak mierzonego elementu wynosi 2, to znaczy, że jest 2 razy większa od wysokości czcionki. Ta sama długość mierzona np. w milimetrach może być różna - to zależy od wysokości czcionki.

Które stosować - bezwlędne czy względne? O ile w życiu codziennym i technice najczęściej stosujemy bezwzględne jednostki długości, to podczas tworzenia stron powinniśmy postępować dokładnie odwrotnie. Dlaczego? Dlatego, że to co misternie sobie poukładamy, biorąc za jednostkę miary np. centymetry i pracując przy swoim monitorze, na innym monitorze może się całkiem rozsypać, nawet do tego stopnia, że strona będzie w ogóle nieczytelna. Jednostek bezwględnych należy używać wtedy, gdy zależy nam, aby wybrany element zajmował zawsze taki sam obszar na ekranie, niezależnie od rozdzielczości i wielkości monitora - np. kwadrat o boku 10cm, będzie zawsze taki sam. Najczęściej jednak strona stanowi układankę wielu obiektów i chcemy aby dany monitor jednakowo proporcjonalnie zmienił rozmiary i położenie każdego obiektu, tak aby "układanka" nie zmieniła swojego wyglądu.

Jednostki bezwzględne

• in - cale (1in = 2.54cm)

• cm - centymetry

• mm - milimetry

• pt - punkty (1pt = 1/72in) - często używane przy definiowaniu rozmiaru czcionki w edytorach tekstu

Jednostki względne

• px - piksele. Są to pojedyncze punkty świecące na ekranie monitora, trzeba się dokładnie przyjrzeć, żeby je zobaczyć. I tak np. kiedy mówimy o rozdzielości 1600x1200 oznacza to, że w poziomie doliczylibyśmy się 1600 takich punktów, natomiast w pionie 600. Piksele są najbardziej "bezpieczną" miarą długości, znamy bowiem standardową szerokość ekranów liczoną w tych jednostkach, a chodzi nam o to aby cała szerokość strony znalazła się w oknie przeglądarki. Zachowując bezpieczny margines można powiedzieć, że warunki takie, spełnia obecnie strona o szerokości 1200px, chociaż całkiem niedawno standardem było 1000px, a wcześniej 800px. Zazwyczaj centruje się w poziomie div - pojemnik o tej szerokości. Mierząc potem wszystkie długości także w pikselach, mamy gwarancję, że układanka obiektów w pojemniku, będzie stabilna w każdych warunkach.

• % - procenty. Określają wielkość względem wartości domyślnej. Jeżeli w stylach nie określimy np. długości danego elementu, to przyjmie on wartość domyślną, która wynosi 100%. Procenty są np. stosowane aby ustalić wielkość obiektu względem rozmiarów jego rodzica.

• em - odniesienie do wysokości czcionki danego obiektu, która zawsze posiada wartość 1em. Tak więc, jeżeli czcionka ma rozmiar 14px, to długość 2em wynosi 28px.

Kolory

Kolory definiujemy na kilka sposobów:

• Poprzez podanie nazwy - green, red, blue, yellow itd., na przykład background-color:red (kolor tła - czerwony)

• Porzez zdefiniowanie modelu RGB, np. color:rgb(12,12,240) (kolor czcionki). Dla przypomnienia - każdy kolor można otrzymać poprzez zmieszanie barw podstawowych - czerwonego (red R), zielonego (green G) oraz niebieskiego (blue B). Każdy z kolorów podstawowych jest określony liczbą z zakresu 0..255. Tak więc kolor czerwony określimy jako rgb(255,0,0), zielony jako rgb(0,255,0), niebieski jako rgb(0,0,255), biały jako rgb(255,255,255), natomiast czarny jako rgb(0,0,0). Pozostałe barwy wynikają z różnego "dawkowania" kolorów podstawowych.

• Poprzez podanie zapisu szesnastkowego poprzedzonego znakiem #. Skąd wziąć taki zapis? Na przykład GIMP podaje kolor w tym formacie - zobacz rysunek 3_1_3_1. Bierzemy stamtąd Zapis HTML-owy, a więc kolor pokazany na rysunku ma wartość color:#72a057 (kolor czcionki - #72a057).