Blog de Web Idea – Recursos de Programación y Optimización Web » Blog Archive

Introducción al CSS

22 November, 2008 – 16:45 pm

Sin llegar a ser considerado un lenguaje de programación como tal, CSS (Cascading Style Sheet – Hoja de Estilo en Cascada), es un mecanismo que determina como se mostrará un documento HTML o XML en pantalla, consiguiendo de este modo separar el contenido de la presentación. Ésto ofrece a los desarrolladores web un control total sobre la forma en la que será presentado un sitio web a los usuarios, dado que basta con modificar el mecanismo CSS para lograr una presentación completamente diferente, sin tener que modificar en absoluto el contenido.

Formas de aplicar el CSS

Existen tres métodos conocidos para la utilización o aplicación del CSS:

Mediante un documento externo con extensión .css: Es la más correcta, pues separa de forma total el contenido de los estilos.

/* Ejemplo de documento CSS externo */ body{background:#000; color:#fff;} #contenedor{text-align:justify;} .enlace{color:#ff0000;}



<html>
<head>
<link href=”estilos.css” type=”text/css” rel=”stylesheet” />
</head>
<body>
<div id=”contenedor”>
<a class=”enlace”>Enlace</a>
</div>
</body>
</html>
Escribiendo los estilos entre las etiquetas <style></style> antes del </head> del documento HTML: Es un sistema muy parecido al anterior, puesto que separa el contenido del diseño, definiendo clases, id’s, etc…aunque es menos óptimo, pues puede perjudicar a otros campos de desarrollo web, como el posicionamiento del documento en los buscadores, al desplazar el resto del código hacia abajo.



<html>
<head>
<style>
body{background:#000; color:#fff;}
#contenedor{text-align:justify;}
.enlace{color:#ff0000;}
</style>
</head>
<body>
<div id=”contenedor”>
<a class=”enlace”>Enlace</a>
</div>
</body>
</html>
Escribiendo estilos en línea: Se escriben directamente los estilos a aplicar, en el atributo style de cada elemento HTML. Se puede aplicar sobre cualquier etiqueta HTML, aunque es la forma menos limpia y la que menos separa el diseño y el contenido. Ejemplo: <a href=”url” style=”color:#ff0000;”…

Jerarquía y nomenclatura del CSS

Ha de saberse que cuando un elemento HTML está contenido dentro de otro, y éste tiene aplicado un estilo, normalmente el primero lo hereda. Por ejemplo, un elemento <p> contenido dentro de un <div> con alineación de texto justificada, también tendrá su texto alineado de forma justificada.

Además, debemos recordar que hablamos de “Hojas de estilo en cascada”, lo que quiere decir que cada estilo se lee de manera secuencial, y si escribimos dos veces el mismo estilo, el segundo sobreescribirá el primero.

Sabiendo esto, debemos tener en cuenta que existen tres formas de declarar estilos, cada una con mayor prioridad que la siguiente:

Elementos (elemento): Se pueden aplicar estilos directamente sobre los elementos HTML. Por ejemplo, se puede definir el color del texto para todos los enlaces de una página, independientemente de su ubicación.

/* Ejemplo que justifica el texto en todos los elementos de párrafo */ p{text-align:justify;}
Identificadores (#identificador): Estos estilos aplican directamente sobre las etiquetas HTML que tienen un id asignado. Son utilizados normalmente sobre contenedores globales del documento, cabeceras, menúes, etc…

/* Ejemplo de id que justifica el texto */ #contenedor{text-align:justify;}

 <div id="contenedor"></div>
Clases (.class): Son los más comunes. Mientras que teóricamente, y respetando las normas de accesibilidad (WAI) y el posible uso de javascript, sólo podremos tener un id único por página, las clases pueden ser aplicadas a cualquier elemento y usadas tantas veces como se necesite dentro de un documento.

/* Ejemplo de clase que justifica el texto */ .parrafo{text-align:justify;}


<p class=”parrafo”></p>

Más adelante veremos en más profundidas los posibles estilos a aplicar, así como ejemplos para hacer nuestras webs más atractivas y versátiles, pues CSS es tan potente, que puede ofrecernos no sólo diseño, sino también funcionalidad.

Comparte este artículo en: