El formato de una unidad de longitud es un carácter opcional de signo ('+' o '-', siendo '+' el valor por defecto) seguido inmediatamente de un número (con o sin punto decimal) seguido inmediatamente de un identificador de unidad (una abreviación de dos letras). Después del número '0' el identificador de unidad es opcional.
Algunas propiedades permiten unidades de longitud negativas, pero esto puede complicar el modelo de formato y pueden existir limitaciones específicas de cada implementación. Si en algún caso no se puede dar soporte a un valor negativo, debería truncarse al valor más cercano que pueda aceptarse.
Hay dos tipos de unidades de longitud: relativas y absolutas. Las unidades relativas especifican una longitud relativa a otra propiedad de longitud. Las hojas de estilo que usen unidades relativas serán más fácilmente escalables de un medio a otro (p.ej. de una pantalla de ordenador a una impresora láser). Las unidades porcentuales (descritas más adelante) y los valores de palabras clave (p.ej. 'x-large') ofrecen ventajas similares.
Estas son las unidades relativas soportadas:
H1 { margin: 0.5em } /* ems, la altura de la fuente del elemento */
H1 { margin: 1ex } /* altura-x, aprox. la altura de la letra 'x' */
P { font-size: 12px } /* píxeles, relativos al lienzo */
Las unidades relativas 'em' y 'ex' son relativas al tamaño de fuente del propio elemento. La única excepción a esta regla en CSS1 es la propiedad 'font-size', donde tanto 'em' como 'ex' se refieren al tamaño de fuente del elemento padre.
Las unidades en píxeles, como las de la última regla, son relativas a la resolución del lienzo, o lo que es lo mismo en la mayoría de los casos, a la resolución de la pantalla de la computadora. Si la densidad de píxeles del dispositivo de salida es distinta a la de una pantalla normal de computadora, el AU debería reescalar los valores dados en píxeles. El píxel de referencia que se sugiere es el ángulo visual de un píxel en un dispositivo con una densidad de píxeles de 90 puntos por pulgada y a una distancia del lector igual a la longitud del brazo. Tomando una longitud nominal de brazo de 28 pulgadas, el ángulo visual es de unos 0,0227 grados.
Los elementos hijos heredan el valor calculado, no el valor relativo.
BODY {
font-size: 12pt;
text-indent: 3em; /* es decir, 36pt */
}
H1 { font-size: 15pt }
En este ejemplo, el valor 'text-indent' de los elementos 'H1' será de 36pt, no de 45pt.
Las unidades absolutas de longitud sólo son útiles cuando se conocen las propiedades físicas del medio de salida. Estas son las unidades absolutas soportadas:
H1 { margin: 0.5in } /* pulgadas (inches), 1in = 2.54cm */
H2 { line-height: 3cm } /* centímetros */
H3 { word-spacing: 4mm } /* milímetros */
H4 { font-size: 12pt } /* puntos, 1pt = 1/72 in */
H4 { font-size: 1pc } /* picas, 1pc = 12pt */
En aquellos casos en que la longitud especificada no pueda ser soportada, los AAUU deberían intentar aproximar. En todas las propiedades CSS1, los cálculos y herencias ulteriores deberían basarse en el valor aproximado.
El formato de una unidad porcentual es un carácter de signo opcional ('+' o '-', siendo '+' el valor por defecto), inmediatamente seguido de un número (con o sin punto decimal), inmediatamente seguido de '%'.
Los valores porcentuales son siempre relativos a otro valor, por ejemplo una unidad de longitud. Todas las propiedades que permiten unidades porcentuales definen a qué valor se refiere el porcentaje. Normalmente será el tamaño de fuente del propio elemento:
P { line-height: 120% } /* 120% del 'font-size' del elemento */
En todas las propiedades CSS1 heredadas, cuando el valor se especifique como un porcentaje, los elementos hijos heredarán el valor resultante, no el valor porcentual.
Un color es o bien una palabra clave o bien una especificación numérica RGB.
La lista sugerida de nombres de palabras clave de color es: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, y yellow. Estos 16 colores están tomados de la paleta VGA de Windows, y sus valores RGB no se definen en esta especificación.
BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
Para especificaciones numéricas de color se utiliza el modelo de colores RGB. Todos estos ejemplos especifican el mismo color:
EM { color: #f00 } /* #rgb */
EM { color: #ff0000 } /* #rrggbb */
EM { color: rgb(255,0,0) } /* rango de enteros 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* rango de reales (float) 0.0% - 100.0% */
El formato de un valor RGB en notación hexadecimal es un '#' inmediatamente seguido de o bien 3 o bien 6 caracteres hexadecimales. La notación de 3 dígitos RGB (#rgb) se convierte a notación de 6 dígitos replicando dígitos, no añadiendo ceros. Por ejemplo, #fb0 se convierte en #ffbb00. Con esto se asegura que el blanco (#ffffff) puede especificarse con la notación abreviada (#fff) y elimina cualquier dependencia de la profundidad de color del dispositivo de salida.
El formato de un valor RGB en la notación funcional es 'rgb(', seguido de una lista de tres valores numéricos separados por coma (ya sean tres valores numéricos entre 0 y 255, o tres valores porcentuales entre 0,0% y 100,0%), seguida de ')'. Se permite espacio en blanco alrededor de los valores numéricos.
Los valores que se encuentran fuera de los rangos numéricos deberían truncarse. Las tres reglas siguientes son por lo tanto equivalentes:
EM { color: rgb(255,0,0) } /* rango de enteros 0 - 255 */
EM { color: rgb(300,0,0) } /* truncado a 255 */
EM { color: rgb(110%, 0%, 0%) } /* truncado a 100% */
Los colores RGB se especifican en el espacio de colores sRGB [9]. Cada AU puede tener distinta fiabilidad a la hora de representar estos colores, pero el uso de sRGB proporciona una definición inequívoca y medible objetivamente de lo que debería ser el color, y que puede ser contrastada con estándares internacionales [10].
Los AAUU pueden limitar sus esfuerzos de representación de colores a la aplicación de una corrección gamma sobre ellos. sRGB especifica un valor gamma de 2,2 bajo unas condiciones de visión específicas. Los AAUU ajustan los colores dados en CSS de tal modo que, combinados con el valor gamma "natural" del dispositivo de salida, se obtenga un valor gamma efectivo de 2,2. El apéndice D da más detalles a este respecto. Obsérvese que esto sólo afecta a los colores especificados en CSS; p.ej. las imágenes se supone que llevan su propia información de color.
Un Localizador Uniforme de Recursos (Uniform Resource Locator, URL) se identifica con una notación funcional:
BODY { background: url(http://www.bg.com/rosado.gif) }
El formato de un valor URL es 'url(', seguido de espacio blanco opcional, seguido de un carácter opcional de comilla simple (') o doble ("), seguido del URL en sí (como se define en [11]), seguido de un carácter opcional de comilla simple (') o doble ("), seguido de espacio en blanco opcional, seguido de ')'. Las comillas que no sean parte del URL en sí deben cerrarse.
Los paréntesis, comas, espacios en blanco, las comillas simples (') y las comillas dobles (") que aparezcan en una URL deben ser transformados en secuencias de escape mediante una barra invertida: '\(', '\)', '\,'.
Los URLs parciales se interpretan como relativos al fuente de la hoja de estilo, no relativos al documento:
BODY { background: url(amarillo) }