| Suscribir mediante RSS

Hojas de estilo CSS

27 agosto 2009 Diseño web

Hojas de estiloLas hojas de estilo en cascada CSS (Cascading Style Sheets) son una extensión de HTML. Aunque CSS no se puede considerar un lenguaje de programación, sin embargo, nos permite controlar el aspecto que tendrá una página HTML asignándole valores a las propiedades de los elementos individuales que la componen. Por tanto, el lenguaje HTML es quien se encarga de crear los distintos contenidos de una página web y CSS se encarga de la presentación en el navegador. Textos, párrafos, tablas, cajas, etc, que se requieran se determinan cuando se crea el documento HTML. El tamaño de los elementos, tipo de letra del texto, color, márgenes horizontales y verticales, posición, etc, se definen desde CSS.

Esta separación entre contenido y aspecto permite mayor control sobre los elementos de la página, hace que los documentos sean más limpios y claros, reduce el tiempo dedicado al mantenimiento de la página y posibilita mostrarla de forma distinta en dispositivos diferentes al PC (móviles, impresoras, accesibilidad para discapacitados, etc).

Desde que en 1995 W3C (World Wide Web Consortium) decidiera estandarizar el lenguaje de hojas de estilos CSS exclusivo para HTML su uso se hace imprescindible a la hora de diseñar páginas web. Actualmente estamos en su version CSS 2.1 soportada por todos los navegadores. Existe una versión CSS 3 pero se encuentra en fase de desarrollo.

La terminología CSS se compone de un elemento HTML o selector, una propiedad y un valor.
Ejemplo:
p { color: #000; }
Las propiedades y valores van entre llaves { }. Los conjuntos de propiedad y valor se separan con ; (punto y coma) y la propiedad del valor con : (dos puntos). En un archivo CSS pueden haber infinitos selectores e infinitos conjuntos de propiedades con sus correspondientes valores.

Más ejemplos:
body { font-size: 62.5%; color: #333; text-align: center; }
h1, h2, h3 { font-family: ‘Trebuchet MS’, ‘Lucida Grande’, Verdana; font-weight: bold; }
h1 { font-size: 4em; text-align: center; }

Aquí puedes encontrar una lista de propiedades y posibles valores.

Aunque no es mi intención hacer un tutorial sobre hojas de estilo a continuación muestro básicamente las maneras de integrar los datos CSS en HTML:
1 – Dentro de una etiqueta HTML en el mismo documento HTML
<body>
<h1 style=”… etiquetas CSS …”>…</h1>
</body>

2- Dentro del mismo documento HTML en la sección head.
<head>
<title>Título de mi página</title>
<style type=”text/css”>
.. etiquetas CSS …
</style>
</head>

3 – Dentro de ficheros CSS externos, suele ser lo más habitual. Se trata de un fichero de texto con extensión .css aunque puede tener cualquier otra. En la sección head se le indica mediante <link rel=”stylesheet” type=”text/css” href=”fichero.css”> el trayecto y nombre del fichero de hojas de estilo. Sería como sigue:
<head>
<title>Título de mi página</title>
<link rel=”stylesheet” type=”text/css” href=”fichero.css”>
</head>

También pueden existir combinaciones anteriores.

En la web se pueden encontrar numerosos tutoriales y recursos para aprender todo sobre CSS.

Lo mejor es que comprueben por si mismo lo que se puede hacer con CSS mediante unos ejemplos. Como muestra clara de las posibilidades de las hojas de estilo les dejo los enlaces al excelente proyecto csszengarden en inglés, y camaleoncss en español, basado en el anterior. Son páginas con contenidos exactamente iguales pero con presentaciones diferentes conseguidas gracias a las hojas de estilos CSS. Podrán sorprenderse de la calidad y creatividad de algunos diseños.

Otros artículos de Diseño web

Cómo mantener WordPress seguro
Perfil de usuarios y Opciones personales
Integrar un Foro phpBB en WordPress
Cómo restaurar archivos en Go Daddy
Cómo eliminar imágenes del Feed

Una respuesta a “Hojas de estilo CSS”

  1. juan carlos dice:

    Hola, una vez requiero de tu ayuda lo que pasa es que me he dado cuenta que mi blog se ve muy mal en versiones antiguas de internet explorer y segun analitics la mayoria de las visitas provienen de esas fuentes.
    No se si me podrias ayudar que modificar o que hacer para salvar el tema caso contrario no me quedara otra cosa que cambiar de theme.

    Gracias