Introducción a CSS 0
CSS* (Cascading Style Sheet), es un lenguaje que sirve para especificar el formato y apariencia de los datos que el html presentará en el navegador, esto incluye cosas como el color, imágenes del fondo, tipos de letra o el espacio que ha de tener un margen, entre otras cosas. En realidad todos esos parámetros se puede especificar con html, entonces ¿por qué CSS? El mejor modo de verlo es con un ejemplo. En este tutorial descubriremos los fundamentos del CSS
Para seguir este tutorial, necesitarás un editor de html, también puedes utilizar Wordpad asegurándote de utilizar el formato solo texto y cambiar la extensión del documento por .html o .css en cada caso.
Normalmente al diseñar una página decidiremos el tipo de letra que queremos utilizar, lo más habitual es utilizar fuentes “sans sherif” como Arial, Verdana, Helvética, Tahoma, etc. para nuestra página, la mayoría de navegadores mostrarán una fuente como Times si no definimos el tipo de letra. Para diseñar nuestra página con este formato deberemos incluir muchas etiquetas html del tipo font, no menos de unas 20 por página. Si multiplicamos esto por 5 o 6 páginas, veremos que rápidamente se convierte en cientos de etiquetas que tendremos que escribir y controlar. Consideremos la siguiente estructura de una página web:
<html>
<head>
<title> Una página </title>
</head>
<body>
<h1>Título 1</h1>
<p>...</p>
<h1>Título 2</h1>
<p>...</p>
<h1>Título 3</h1>
<p>...</p>
</body>
</html>
Con este código html obtendremos una página llamada “Una página” con tres títulos; 1, 2 y 3. Si queremos cambiar el tipo de letra de los títulos deberíamos escribir:
<html>
<head>
<title> Una página </title>
</head>
<body>
<h1><font face=”sans-serif” color=”#3366CC">Título 1</font></h1>
<p>...</p>
<h1><font face=”sans-serif” color=”#3366CC">Título 2</font></h1>
<p>...</p>
<h1><font face=”sans-serif” color=”#3366CC">Título 3</font></h1>
<p>...</p>
</body>
</html>
La página contiene tres títulos creados mediante la etiqueta <h1>. Para destacarlos del texto utilizamos la etiqueta html <font> que les da los atributos de fuente “sans-serif” y de color #3366CC. Como se puede ver, es necesario escribir estos atributos para cada elemento de la página. ¿Podemos evitar todo este trabajo repetitivo? La respuesta es si, observa la versión con CSS:
<html>
<head>
<title> Una página </title>
<style type=”text/css”>
h1 {
font-family: sans-serif;
color: #3366CC;
}
</style>
</head>
<body>
<h1>Título 1</h1>
<p>...</p>
<h1>Título 2</h1>
<p>...</p>
<h1>Título 3</h1>
<p>...</p>
</body>
</html>
El truco está en la etiqueta <style> que se encuentra en la cabecera <head>, donde definimos el tipo de letra “sans-serif” y el color #3366CC que deseamos aplicar a las etiquetas html <h1> de nuestra página. No te preocupes por la sintaxis, lo veremos en más detalle en un momento y verás que es muy fácil. Veamos también cómo ha quedado la parte html, de donde han desaparecido todas las etiquetas <font> que habíamos colocado anteriormente. Cuando modifiquemos una propiedad de la definición de estilo de la cabecera, los títulos <h1> de la página cambiarán consecuentemente, lo mismo ocurrirá para cualquier nuevo título <h1> que añadamos a la página. Ahora que ya tenemos una idea de qué es y cómo funciona CSS vamos a ver diferentes formas de incluir estilos CSS en nuestras páginas.
*CSS es el acrónimo de Cascading Style Sheet o Hoja de Estilos en Cascada. Lee más sobre CSS en Wikipedia…
La forma más sencilla de insertar los estilos en páginas web es la que hemos visto en el ejemplo anterior, incluir una etiqueta <style> en la cabecera <head> de nuestra página html de esta forma:
<style type=”text/css”>los estilos CSS se definen aquí</style>
El método funciona muy bien para una página, pero si nuestra web tiene más de una, tendremos que repetir el proceso para cada página, con lo que nos encontraremos con un problema similar al que teníamos al definir el estilo para cada etiqueta html, pero ahora con las páginas.
Normalmente este documento se denomina hoja de estilos y se le suele dar el nombre de styles.css. En cuanto a la ubicación del archivo puede encontrarse al mismo nivel que nuestras páginas html o en un directorio específico en el que tendremos también otros elementos que se puedan necesitar para dar estilo, como logos, iconos o fondos para la página.
Una alternativa para no tener que revisar cada página es colocar las definiciones de estilo en un documento de texto y hacer que el navegador lo lea cada vez que cargue una página, de esta forma cualquier modificación que hagamos en la hoja de estilos, se aplicará automáticamente a los elementos afectados de todas las páginas.
Para cargar una hoja de estilos en una página html, incluiremos una etiqueta <link> en la cabecera <head> de nuestro documento html:
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
Donde el link especifica el tipo de documento que el navegador leerá; una hoja de estilos de tipo texto css y href indica su ubicación, si se encuentra en una carpeta tendremos algo parecido a
href="/nombre_de_la_carpeta/style.css".
Volviendo al ejemplo que hemos empleado antes, tendremos el siguiente código en nuestra página:
<html>
<head>
<title> Una página </title>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
</head>
<body>
<h1>Título 1</h1>
<p>...</p>
<h1>Título 2</h1>
<p>...</p>
<h1>Título 3</h1>
<p>...</p>
</body>
</html>
Ahora es el documento styles.css el que contendrá todos los elementos de estilo de las páginas:
h1 {
font-family: sans-serif;
color: #3366CC;
{
Igual que ocurre con cualquier otro elemento de nuestra web, podemos reutilizar la hoja de estilos en las páginas que queramos introduciendo el correspondiente <link>, lo que nos asegurará un diseño uniforme y coherente. También podremos crear y utilizar más hojas de estilos si lo necesitamos.
En cada definición CSS participan al menos dos componentes: el selector, que define las etiquetas html a las que aplicaremos el estilo definido y los atributos, que especifican el estilo a aplicar. En el ejemplo que venimos utilizando h1 es el selector, los atributos son font-family y color. La sintaxis que hemos observado en los ejemplos significa lo siguiente: selector {atributo:valor;} Cada selector puede tener uno o más atributos, cada atributo ha de tener su correspondiente valor. Entre valor y atributo se escriben dos puntos “:” al final de cada valor se escribe un punto y coma “;” para pasar a una nueva definición, todos los atributos y valores están encerrados entre dos corchetes “{}”. Como la hoja de estilos puede ir complicándose, de hecho suelen serlo, se utiliza un formato de escritura que ayuda a aislar cada elemento de la hoja para mejorar su comprensión:
selector {
atributo:valor;
atributo:valor;
...
}
En el resto de este artículo utilizaremos un formato u otro indistintamente, la funcionalidad no se verá alterada. También podemos aplicar uno o varios estilos a más de una etiqueta html a la vez agrupándolas separadas por comas, por ejemplo para definir parámetros básicos para toda la web como el tipo de letra:
body,p,td,th,div,blockquote,dl,ul,ol {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000000;
}
Este selector con varias etiquetas html aplica las definiciones de estilo: font, size y color a las etiquetas –html body,p,td,th,div,blockquote,dl,ul,ol– a la vez. Normalmente su aplicación a la etiqueta <body> que incluye a todas las demás debería de bastar, pero no todos los navegadores, sobre todo los más antiguos, aplican los estilos a tablas u otros elementos, así que mejor definir todas las etiquetas a las que queremos dar un estilo.
Selectores de clases “class”
Como hemos visto, podemos definir en una hoja de estilos, cómo representar las diferentes etiquetas html en una página o web, pero qué ocurre cuando queremos aplicar estilos diferentes a una misma etiqueta html en distintas partes de un documento. Para poder diferenciar un selector de otro en una misma página le daremos un atributo personal de tipo “class”. Por ejemplo el siguiente estilo escribe todos los párrafos de color azul:
p {
color:#0000FF;
}
Imaginemos que tenemos una columna de color azul sobre la que también aparecerán párrafos, en este caso el texto no sería visible ya que tendría el mismo color. Para diferenciar los párrafos del texto principal de los de la columna, aplicaremos a estos una “clase” que los identifique, por ejemplo .sidebar y aplicaremos los estilos CSS a esta clase:
p { color: #0000FF; }
.sidebar { color: #FFFFFF; }
la segunda regla indica que el estilo .sidebar, se aplicará a cualquier etiqueta html que tenga esa clase, el atributo de clase se aplica en las etiquetas de la página html. Para crear un párrafo de texto de la clase .sidebar, se añade el atributo de esta forma:
<p class=”sidebar”>Este texto se escribirá siguiendo las indicaciones de la clase .sidebar de la hoja de estilos CSS.</p>
<p>Este texto se escribirá siguiendo las indicaciones de estilo de la etiqueta de párrafo </p>
Un selector de tipo “class” puede añadirse a cualquier etiqueta html, podemos definir tantas clases como queramos. Las clases se definen mediante un punto al principio del nombre de la clase.
Selectores Pseudo-Class
No todas la etiquetas html tienen las mismas propiedades, por ejemplo la etiqueta <a> se utiliza para designar los enlaces o links y es más versátil que otras etiquetas html. Cuando la utilizamos en nuestra página podemos darle atributos link, vlink, y alink (no visitado, visitado y clic respectivamente) para identificar los diferentes estados del enlace utilizando por ejemplo texto de diferentes colores. Con CSS podemos definir el estilo de <a> en cada uno de los posibles estados, mira este ejemplo:
a:link { color: #0000FF; } /*no visitado*
a:visited { color: #FF00FF; } /*visitado*/
a:hover { color: #00CCFF; } /*el cursor está encima*/
a:active { color: #FF0000; } /*seleccionado*/
Dos puntos “:” separan al selector de la pseudoclase. En un documento CSS la etiqueta <a> puede tener 4 pseudo-clases; link afecta a todos los enlaces, visited a los que ya se ha visitado, hover es especial y actúa cuando el ratón pasa por encima del enlace tanto si se ha visitado o no, active funciona cuando se hace clic en el enlace. Para que la pseudo-clase actúe correctamente ha de respetarse la jerarquía que ves aquí en la hoja de estilos, hover siempre después de link y visited, active al final. Otras pseudo-clases son :lang que permite definir el idioma de un elemento concreto y :first-child que da estilo al primer elemento descendiente de otro. El texto entre /*…*/ se denomina comentario y sirve para anotar lo que queramos en el documento CSS, el texto entre estos separadores es ignorado por el navegador.
Hasta ahora hemos utilizado atributos como color o font-family
Lee las especificaciones de CSS2 en castellano…
Síguelos por RSS
No hay comentarios para este post