Las hojas de estilo en cascada (CSS) son un lenguaje que permite a los diseñadores web añadir estilos como espaciado, color, tamaño de fuentes, entre otras propiedades a los documentos HTML.

Las hojas de estilo en cascada son similares a una plantilla, permitiendo a los desarrolladores web etiquetar estilos de un elemento HTML, y luego aplicarlos al número de páginas requeridas. Por ello, las hojas de estilo en cascada son una colección de reglas que controla la apariencia del contenido de una página web. Con CSS se tiene también gran flexibilidad y manejo del diseño, desde un posicionamiento preciso del diseño a selección variada de fuentes y colores.

Hay muchos beneficios al utilizar CSS. Mantener un sitio web hecho a base de CSS es mucho más fácil si se compara con los sitios hechos a base de tablas.
Aparte de poder hacerle amplios cambios a nuestros documentos por medio de un solo archivo CSS, el código que genera lo hace fácil de actualizar.

Con CSS, cuando decides llevar a cabo un cambio, simplemente modificas el estilo y el elemento ubicado en el sitio web es actualizado automáticamente, ahorrándonos una enorme cantidad de tiempo. Sin el CSS tuviéramos en la engorrosa necesidad de editar cada página independientemente.  Un sitio diseñado en CSS por lo general requiere de menos código comparado con uno diseñado en tablas, haciendo nuestro código más liviano, limpio y simple.

Beneficios de las hojas de estilo en cascada y el posicionamiento SEO

Otro gran beneficio del CSS es que hace a nuestro sitio web amigable a los buscadores. La razón detrás de esto es simple: las arañas de los motores de búsquedas son en cierto modo inactivas. Las arañas no buscan a través de todo lo extenso que puede ser el código HTML a la hora de indexar código a su base de datos. Las etiquetas de fuente y las tablas hacen el código HTML más pesado, lo que reduce la precisión de los resultados.

Si se usa un archivo CSS externo (separado del código HTML) para determinar los atributos de diseño, esto logrará, como se ha dicho anteriormente, que el código HTML esté limpio, y por ende, hará que nuestras páginas aparezcan con un mejor posicionamiento. Con algo de conocimiento sobre CSS se puede cambiar el código sin deshacer el diseño visual.

Por ejemplo, se puede hacer que el contenido principal de un sitio se muestre por encima de el encabezado o de nuestro menú de navegación. De esta forma le mostramos a los buscadores la importancia de nuestro contenido.

Personalmente he visto un gran incremento de rankings en sitios web que utilizan CSS al 100%. Cuando volteo a ver al sitio de alguien que fue desarrollado con código HTML obsoleto como: TABLE, TD, TR, FONT, entre otros, transformo ese sitio a un diseño basado en CSS. Existen muchas herramientas en la Internet que enseñan el código actual del peso de la proporción de texto (text radio en inglés) de tu sitio.

Algunos buscadores modernos como Google, Yahoo y MSN gustan de sitios livianos. Desean ver el contenido; el texto, no el código. Con CSS todo es posible. Incluso es posible colocar código excesivo en un archivo externo, de esta forma dejar la página actual limpia y simple.

Accesibilidad de los sitios web

CSS permite que tu sitio web sea más accesible. Para el 2008 se estima que la tercera parte de la población mundial estará utilizando dispositivos portátiles para acceder a la Internet.  En este caso es indispensable que tu sitio sea accesible para estos dispositivos. Para empezar podrías crear un archivo adicional en CSS para dispositivos portátiles como celulares, el cual será invocado en lugar de llamar al archivo CSS original. Por esto, el beneficio principal de las CSS es que separa la estructura del documento de la presentación.

Aumenta la velocidad de descarga de tu sitio web

El código en CSS carga mucho más rápido que las tablas. Los navegadores leen a través del código de las tablas 2 veces antes de desplegar el resultado del mismo, primero para mostrar la estructura, y luego el contenido.

Además, las tablas son mostradas en la pantalla como un todo, por lo que ningún pedazo de la tabla será mostrado hasta que la tabla entera sea cargada y renderizada. Las tablas soportan el uso de imágenes espaciadas para ayudar con el posicionamiento. CSS generalmente requiere menos código que las tablas. Todo el código del diseño del sitio puede ser guardado en un archivo externo, el cual será llamado una vez se estéágina, y luego se guardará en la computadora del usuario, mientras que el diseño con tablas que esté almacenado en cada documento web individual de nuestro sitio deberá cargar desde el inicio cada vez que una página es cargada.

También con CSS podemos dirigir el orden de los objetos descargados. Se puede tener el control de lograr que aparezca el contenido del sitio primero antes que las imágenes, lo que tiende a cargar más lento que el texto en sí.

Compatibilidad cruzada de navegadores

En resumidas, CSS carga nuestras páginas web más rápido, ahorrándonos tiempo y trabajo, los enlaces pueden ser más atractivos y dinámicos, y podemos añadir

el efecto rollover sin necesidad de utilizar JavaScript. Actualmente los navegadores más usados por todos (Firefox, Explorer y Netscape) reconocen CSS.

Artículo desarrollado por Mikhail Tuknov, especialista en posicionamiento SEO. Originalmente publicado al inglés en WebReference. Traducido por Webmasters Panamá y publicado con permiso del autor.

Nombre:
Sitio web:
Título:
BBCode:
Comentario:
Código:*