Darle estilo a nuestra página web

El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. Esto es así porque fue concebido para otros usos (científicos sobretodo), distinto a los actuales, mucho más amplios. Para solucionar estos problemas los diseñadores han utilizado técnicas tales como la utilización de tablas imágenes transparentes para ajustarlas, utilización de etiquetas que no son estándares del HTML y otras, causado a menudo problemas en las páginas a la hora de su visualización en distintas plataformas.

Sin CSS se podía cambiar una sola etiqueta por ejemplo el color del texto, esto resultaba fácil de cambiar, el problema venía cuando nos encontrábamos con unas cuantas etiquetas que debíamos cambiar por eso CSS ofrece una capa de presentación que no depende del contenido, en la que podemos realizar fácilmente cambios globales. Dicha capa de presentación posee grandes ventajas:

  • Modificable fácilmente.- Con CSS podemos asignar estilos a todas las etiqueta <h1> (o cualquier etiqueta) de todo el sitio cambiando los valores desde un único punto.
  • Opciones de diseño avanzado.- Con la implementación de CSS se hace posible tener fondos con elementos más complejos, posicionando el píxel perfectamente y opciones de relleno y márgenes más fiables. Con la siguiente generación que se encuentra en buena parte de los navegadores modernos, se amplia la paleta del diseñador con esquinas redondeadas, sombras proyectadas y degradados, entre otras funcionalidades.
  • Orientado a medios.- Actualmente los contenidos digitales no son solamente para la pantalla del ordenador si no que podemos imprimir fácilmente una página web, visualizarla en nuestro teléfono inteligente, o incluso verla en nuestra televisión. CSS permite cambiar el aspecto y diseño del contenido para adaptarlo al dispositivo de salida cambiando radicalmente su estructura, eliminando o incluyendo secciones de página y aplicando un esquema de color completamente distinto.

En CSS, los estilos se basan en una o más reglas. Una regla de CSS se compone de tres partes principales: los selectores, las propiedades y los valores.

Es este gráfico, h1 es el selector, color es la propiedad y blue (azul) es el valor.

A continuación del selector situamos la propiedad o propiedades y luego el valor o valores (a este conjunto se le denomina declaración). Por ejemplo:

Rizando el rizo, podemos especificar varios selectores para cualquier conjunto de declaraciones en una lista separada por comas:

CSS forma parte integral en la creación de páginas Web modernas, por lo que la descripción que se hará en las siguientes secciones  acerca se sus principios básicos y como podemos utilizarlo, potenciará su trabajo en HTML.