Los colores que aparecen en una página web se pueden establecer mediante los sistemas de codificación de color Hexadecimal, RGB o HSL. Son especificados como valores numéricos, aunque hay algunos colores que pueden ser nombrados por sus nombres en inglés.
En los códigos de color hexadecimales o Hex, compuestos por tres bytes de números hexadecimales (con lo que hay en total 6 dígitos), cada byte (o par de caracteres de código Hex) se representa la intensidad de rojo, verde y azul (los colores primarios), respectivamente. En este código, el 00 representa la menor intensidad y el FF la mayor, con lo que #FF0000 corresponde a rojo, #00FF00 al verde y #0000FF al azul.
Es necesario tener cuidado de no confundir el código hexadecimal con el RGB, en la medida que este último también está compuesto por tres dígitos que nos indican la intensidad del rojo, verde y azul. La diferencia radica que en el RGB estos se representan mediante números del 0 al 255, siendo el 0 la menor intensidad y el 255 la mayor, de manrea que rgb(255,0,0) sería el rojo, rgb(0,255,0) el verde y rgb(0,0,255) el azul. Es posible añadir un cuarto canal (RGBA), también medido del 0 al 255 y con el que podemos indicar la transparencia del color.
En el código HSL los colores se definen mediante tres valores, siendo la Hue (Matriz) un número entero entre 0 y 360 que recorre todos los colores, la Saturation (Saturación) un porcentaje que define la intensidad del color y la Lightness (Luminosidad) otro porcentaje que nos indica la claridad u oscuridad del color.
Existen diversas opciones para configurar el estilo de los elementos de HTML, por ejemplo, la alineación del texto se puede definir con una etiqueta HTML o en el estilo - CSS.
Ejemplo 1: podemos centrar un elemento HTML con la etiqueta < center > pero también podemos definir la alineación en el estilo - CSS:
h1 { font-family: Helvetica, Geneva, Arial; color: yellow; background-color: blue; text-align: center; font-size: 50px;}
Ejemplo 2: también podemos definir que todas las imágenes aparezcan centradas o que tengan un determinado tamaño:
img { display: block; margin-left: auto; margin-right: auto; width: 20%;}
Ejemplo 3: podemos poner borde a un elemento, o una línea por encima o por debajo:
h3{ font-family: 'ZCOOL KuaiLe', cursive; font-size: 30px; border: red 5px solid;}
Como ya se ha visto en los ejemplos anteriores, podemoss a alinear los títulos de los h3. De esta manera. quedarán centrados, al igual que las imágenes. Para esto, utilizaremos la propiedad text-aling: center en el CSS.
En CSS también tenemos la opción de cambiar el estilo de los bordas para aquellos elementos que los poseean. Por ejemplo, podremos hacer que los bordes aparezcan en forma de líneas de puntos mediante la propiedad border-style: dotted o como un marco más "elegante" con border-style: ridge. Para mostratrlo, haremos que todos los h2 y h3 tres tengan un borde, el cuál serán líneas de puntos en caso de los h2 y líneas entrecortadas en caso de los h2.