Es poden identificar tres tipus diferents d'unitats:
| Unitat | Sufix | Exemple | |
|---|---|---|---|
| Numèric | Cap | width: 100 |
|
| Percentatge | % |
width: 67% |
|
| Longitud | Em | em |
font-size: 1.2em |
| Píxels | px |
font-size: 12px |
|
| Punts | pt |
font-size: 13pt |
|
| Milímetres | mm |
width: 356mm |
|
Les unitats absolutes són totes aquelles unitats que no varien en funció del dispositiu o context en les que són utilitzades.
Les unitats relatives, en canvi, varien en funció del dispositiu o context en les que són utilitzades. És el cas d'aquells valors representats en percentatges, o el de les unitats em, que s'explicarà a continuació.
emem, originalment equivalia a l'alçada de la M majúscula. A l'entorn de producció web, la unitat em representa, però, el valor de la mida de font base del navegador (per defecte, 16 píxels). Per exemple: si un paràgraf es representa a 16 píxels, l'equivalent serà d'1 em; per tant 2 em equivaldran a 32 píxels; i 0.5em equival a 8 píxels.
Hi ha tres tipus d'unitats diferents per a especificar un color:
Valor hexadecimal: utilitza els valors hexadecimals (base 16), que fan servir els dígits del 0 al 9 i les lletres de la a a la f. Veieu la següent taula d'equivalència entre unitats de base 16 (hexadecimal) i base 10 (decimal):
| Hexadecimal | Decimal |
|---|---|
| 0 | 0 |
| 1 | 1 |
| 2 | 2 |
| 3 | 3 |
| 4 | 4 |
| 5 | 5 |
| 6 | 6 |
| 7 | 7 |
| 8 | 8 |
| 9 | 9 |
| a | 10 |
| b | 11 |
| c | 12 |
| d | 13 |
| e | 14 |
| f | 15 |
El valor hexadecimal d'un color es representa amb el símbol # seguit de tres o sis valors hexadecimals.
Aquests sis valors hexadecimals representen, en grups de dos, el valor d'un canal de color específic: vermell, verd i blau. Per exemple, el següent valor hexadecimal #a3ff01 correspon a un color en el que el canal vermell és igual a #a3 (163 en decimal), el canal verd és igual a #ff (255 en decimal) i, finalment, el canal blau és igual a #01 (1 en decimal). Segons la combinació de valors triada per a cada canal de color, s'obtindrà un color específic dels 16 milions de colors possibles (255*255*255 = 16581375 possibilitats de colors).
Tres valors hexadecimals és una representació reduïda dels sis valors hexadecimals, quan els valors de cada un dels tres canals estan formats per dos dígits o lletres iguals. Per exemple, el valor hexadecimal #afa equival a #aaffaa, o #8a0 és igual a #88aa00
En el següent exemple, s'han utilitzat les unitats hexadecimals per a especificar el color dels paràgrafs i el color de fons per mitjà d'una regla CSS:
p {
color: #aaff00;
background-color: #f00;
}
Valor RGB: Permet la representació d'un color indicant, per mitjà de valors numèrics o percentatges, la quantitat dels canals vermell, verd i blau. En el cas d'un valor numèric, el valor es trobarà entre 0 i 255, de menor a major quantitat. Si s'utilitzen percentatges enlloc de valors numèrics, aquests es trobaran entre 0% i 100%, de menor a major quantitat. Veieu l'exemple anterior expressat amb valors RGB:
p {
/* valor numèric */
color: rgb(170, 255, 0);
/* valor amb percentatges */
background-color: rgb(100%, 0, 0);
}
Nom del color: Permet seleccionar un color d'una llista entre 17 colors predeterminats: aqua, black, blue, fuchsia, gray, lime, green, maroon, navy, olive, orange, purple, red, silver, teal, white i yellow. Veieu l'exemple anterior, però fent servir noms de color predefinits:
p {
color: lime;
background-color: red;
}