Do określania wielkości czcionki, grubości obramowania czy też szerokości marginesów kaskadowe arkusze stylów wykorzystują względne i bezwzględne jednostki miary. Podobnie wygląda sprawa używanych definicji kolorów.

Jednostki względne

px — piksele

p {margin-left: 20px;}

Jednostka ta opiera się na pojedynczych punktach widocznych na ekranie monitora — pikselach. Jeżeli dokładniej przyjrzysz się ekranowi monitora, powinieneś zauważyć drobne punkty. W zależności od ustawionej rozdzielczości ich liczba może być różna, np. 800×600. Pierwsza wartość podaje liczbę punktów w poziomie, natomiast druga określa, ile pikseli mieści się w pionie. Oczywiście rozdzielczości mogą być bardzo różne, np. 1024×768 czy 1600×1200, a do tego mogą się różnić w zależności od posiadanego systemu operacyjnego czy też typu monitora. Dlatego też stosowanie takiej jednostki nie zawsze daje dobre rezultaty we wszystkich warunkach.

em — proporcje wysokości do czcionki danego elementu

p {margin-left: 2em;}

Zasada działania tej jednostki jest stosunkowo prosta i polega na określaniu zależności pomiędzy poszczególnymi wielkościami. Jeżeli zdefiniujemy domyślną czcionkę o wielkości 12 punktów, to będzie ona równa 1 em. Przyjrzyj się poniższemu przykładowi:

/*Definicja stylów*/
P
{
font-size: 12pt; margin-left: 2em;
}

Powyżej zdefiniowałem wielkość czcionki 12pt dla bloku tekstu. Następnie za pomocą kolejnego polecenia ustawiłem lewy margines jako 2em. W tym przypadku lewy margines będzie równał się 24pt.

ex — proporcje do wysokości litery x

p {margin-left: 2ex;}

Stosowanie jednostki ex wiąże się z rodzajem użytej czcionki. Weźmy np. stronę, na której użyto kilku rodzajów czcionek. Jak już nieraz się przekonałeś, każda czcionka inaczej wygląda, a co za tym idzie, ma inną wielkość podstawową, dlatego czcionka Arial o wielkości 2ex nie będzie równa czcionce Times o wielkości 2ex.

% — procenty

p {font-size: 10%;}

Procenty służą do określania wielkości względem wartości domyślnej. Przykładowa definicja spowoduje ustawienie wielkości czcionki na poziomie 1/10 domyślnego rozmiaru, jaki został skonfigurowany w przeglądarce.