Texto con CSS en HTML: Unidades y Colores

Ver además:

• Tipo de fuente en CSS: Font-family
• Modos resumidos en CSS

Retomamos el CSS o estilos en cascada y hablamos de la gestión de fuentes de texto, el tipo de familia, el tamaño, el color y el estilo, entre otras características.

Una forma sencilla de hacer que los textos en un documento se modifiquen a nuestro gusto sin grandes complicaciones, que no iran más allá de cambiar un parámetro para experimentar diversos tamaños y tipos de fuentes.

Las primeras propiedades que veremos y las más importantes son las que establecen un color y las unidades bajo las cuales determinamos el tamaño de una fuente, en este sugundo caso es necesario entender que el problema con el tamaño de las fuentes es que en muchos caso la resolución de pantalla puede afectar indirectamente el resultado final de un diseño, así que con unas tablas veremos las definiciones correctas de cada concepto.

Tamaño de Fuente
Primero la propiedad font-size que sirve para establecer el tamaño de la fuente, el ejemplo de la sintaxis común en CSS es:

font-size: 12px;
font-size: 1em;
font-size: 12pt;

Medidas

Unidades	Descripción
%	porcentage
in	pulgadas
cm	centímetros
mm	milimetros
em	1em es igual al tamaño actual de una fuente. 2em significa 2 veces el tamaño de la fuente actual. Por ejemplo: si un elemento mostrado con una fuente de 12 pt, entonces 2em es igual a 24 pt. El "em" es una unidad muy útil en CSS, debido a que se puede adaptar automáticamente a la fuente que los lectores usan.
ex	Un ex es el "alto de x" de una fuente, (la altura de x es usualmente la mitad del tamaño de la fuente).
pt	Punto (1 pt es igual a 1/72 de pulgada)
pc	Pica (1 pc es igual a 12 punto)
px	Pixels (un punto de pantalla de computadora)

Color de fuente

Los colores de las fuentes se establecen con la propiedad css color, por ejemplo:

color: #fff;
color: rgb(14,12,0);
color: rgb(24%,22%,0%);
color: red;

Es recomendable que en precensia de font-size y font-family, este vaya al final, por ejemplo:

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 22px;
color: white;

Colores

Unidad	Descripción
nombre_del_color	Nombre del color en ingles (Por ejemplo red, yellow, green, blue, etc.)
rgb(x,x,x)	Un valor RGB como rgb(255,0,0) que será igual a rojo, rgb(0,255,0) es igual a verde y rgb(0,0,255) es igual a azul
rgb(x%, x%, x%)	Un porcentaje de valor en RGB, por ejemplo rgb(100%,0%,0%) es igual a rojo.
#rrggbb	Un número hexadecimal ejemplo #ffffff igual a blanco (Sin son iguales todos los numeros únicamente es necesario poner tres primeras letras por ejemplo para blanco #ffffff ponemos declararlo como #fff, seguirá indicando el color blanco)