CSS ha venido a apoyar enormidades a los desarrolladores de sitios web, pues ha permitido que la actualización de las páginas sea más rápida y directa con el simple hecho de modificar un valor en nuestro archivo CSS y, con ello, evitar el tener que modificar el mismo en cada una de las páginas.

Al complementarse con ASP y PHP, CSS ha permitido que los sitios dinámicos sean más dinámicos (valga la redundancia) por la misma razón de "despegar" los contenidos (textos) de su presentación (estilos). Ahora puedes aplicar cambios a muchas o cierto grupo de páginas con tan sólo hacer una modificación, y tu preocupación sólo se enfocará a que cada uno de los elementos HTML, a los que aplicarás estilos de CSS, se encuentren bien definidos y marcados.

¿Cuáles elementos? Si ya has manejado HTML, los elementos son las etiquetas que tradicionalmente has utilizado. De esta forma, un elemento lo son las etiquetas <p></p>.

No obstante, una de las etiquetas que está enfrentando un desuso es este mismo conjunto <p></p>, pues su lugar ha sido, constante e incrementalmente, suplido por el conjunto <span></span>

Al estructurar tu sitio basándote en CSS, el mismo uso de <span></span> lo reduces a aplicar estilo a un texto en específico, pues el tamaño, color y fuente a aplicar para el texto utilizado en las páginas lo defines desde la etiqueta body dentro del archivo CSS, como a continuación podrás ver y practicar. Vamos a probarlo... En el archivo pruebaCSS.html que has generado anteriormente, agrega lo siguiente:

¿Qué significa todo éso?

Anteriormente, en el Tutorial Básico, al iniciar el código HTML sólo utilizamos:

Pero fue debido a que, obvio, estábamos en el Tutorial Básico y no existía razón alguna de introducir cosas "más avanzadas". Para dar el siguiente paso, debemos contemplar los estándares existentes para los sitios web... y es precisamente lo que hacemos al estipular esas tres líneas para el inicio de nuestro código HTML.

Lo que indicamos con el código HTML es "esta es una página utilizando XHTML Strict e idioma Español de México". Si vives en otro país latinoamericano, puedes modificar el Mx por el que representa a tu país (Co, Ve, Cl, Cr, Gt, Py, Uy, Ar, etc.)

XHTML es código eXtensible HTML que fue creado para suplir al HTML y ser la base para XML, con el objetivo de generar los cimientos para los estándares de páginas web. Su función es tratar de que los contenidos web sean accesibles desde cualquier tipo de dispositivo, ya sea una pc de escritorio, una notebook, un celular o un teléfono inteligente.

Strict, como bien lo dice su nombre, es la forma más estricta de este tipo de codificación y requiere que se cumplan la gran mayoría de los estándares para crear sitios web para poder ser validados. Conforme avancemos te iré comentando sobre este asunto, así que por el momento es suficiente, sigamos con lo nuestro.

Ahora agrega lo siguiente, justo debajo de la última línea de arriba...

Como podrás darte cuenta, aquí aparece charset=utf-8. Charset se utiliza para especificar el tipo de carácteres que se van a manejar. En el HTML tradicional, cada que se requiere presentar acentos, nuestra famosa ñ, inicio de pregunta y el signo de exclamación, estos deberían presentarse utilizando algo similar a &eacute; para representar la e acentuada.

Para resolver el problema de la presentación de los carácteres (letras o signos) de nuestro idioma, inicialmente se utilizaba como charset el ISO-8859-1. Sin embargo, si estos carácteres se intentaba pasarlos a otro idioma, con un diferente charset, entonces el problema se tornaba más complejo aún.

Es por esta razón que, hoy en día, UTF-8 es el charset considerado un estándar para la presentación de los textos en nuestros sitios web, pues esta es una forma universal de manejar carácteres en forma rápida, confiable y sin las preocupaciones relacionadas con la correcta presentación de carácteres. Y es la razón por la cual al inicio de este capítulo se te pide guardar los archivos con codificación UTF-8  

Además, aparece también @import url(prueba.css);, la cual es la forma en que implementaremos CSS en este tutorial. Es decir, en un archivo (pueden ser varios archivos dentro de uno al mismo tiempo) se incluye toda la codificación de CSS para evitar tener que implementarlo dentro de las etiquetas en forma directa en la página.

Ok, ok... vamos a ver un ejemplo para explicarlo mejor.

Al archivo CSS que se ha creado, agrega lo siguiente para que veas lo que se puede hacer...

Lo que ocurre en el documento pruebaCSS.html es que el texto aumenta su tamaño a 18 pixeles, con un formato normal y utilizando Arial como fuente. Si en ese código modificamos normal por bold, la fuente cambia a negrita. ¡Inténtalo!

Definamos el color en que se presentará el texto...

Lo que ocurre es que se aplicará un color gris oscuro (casi negro) para todo el texto de la página que no contenga una clase específica.

Ahora agreguemos un color sólido de fondo:

Y asignemos márgenes a la página...

El margen presentado significa lo siguiente:

No olvides que el margen debes manejarlo, dentro de CSS, en la siguiente forma...

Como puedes notar, no has introducido nada en la página pruebaCSS.html y, no obstante, a través del archivo CSS le has generado varios cambios. Esta es una pequeña muestra de lo potente que es CSS para estructurar y diseñar una página web.

Veamos ahora la forma en que se realiza la implementación de CSS.