- Muy bien, vas a crear tu primera hoja de estilo.
- ¿Qué necesito?
- Nada. Crea un nuevo documento con el editor de textos que has usado para el documento HTML. La hoja de estilo también es un documento de texto sin formato.
- Ah, genial. Ya está.
- Ahora, vamos a especificar unas reglas de estilo para el cuerpo del documento, es decir, para el elemento BODY
.
- Muy bien, ¿cómo?
- Veamos cierta terminología básica de CSS. Abre bien las orejas y concéntrate. Un conjunto de reglas tiene dos partes: selector y bloque de declaraciones. El selector especifica los elementos a los que se aplica el bloque de declaraciones. El bloque de declaraciones empieza con una llave abierta y termina con una llave cerrada. Entre las llaves hay cero o más declaraciones separadas por un punto y coma. Cada declaración es de la forma propiedad : valor. La especificación de CSS define las propiedades existentes y los valores que pueden tomar éstas.
- ¡Jo tío, qué lío me acabas de armar en un momento!
- Tranquilo, vamos a aclararlo con un ejemplo. Vamos a escribir un bloque de declaraciones para el BODY
. El selector será el nombre del elemento:
body { }
Repasa las definiciones que te acabo de dar. ¿Está todo bien?
- Sí, ya, pero eso no es muy útil, ¿no?
- No, tenemos que poner unas declaraciones entre las llaves. Para no complicarnos mucho, podemos cambiar los colores y el tipo de letra, ¿te parece?
- Me parece.
- Bien. Para cambiar el color del texto, utilizamos la propiedad color
. Para cambiar el color del fondo utilizamos la propiedad background-color
, y para cambiar el tipo de de letra utilizamos la propiedad font-family
.
- Jopé, siempre todo en inglés...
- ¡Qué le vamos a hacer! Escribe esto con el editor:
body {
color : rgb();
background-color : rgb();
font-family : Verdana, Arial, Helvetica, Helv, sans-serif;
}
rgb()
sirve para especificar un color a partir de sus componentes rojo-verde-azul. Si no sabes cómo funciona esto, te recomiendo que visites por ejemplo esta página de la Guía de la Computación, o más a fondo en la página de Juan Martínez-Val. ¿Qué colores te apetecen?
- No sé, algo que no sea demasiado hortera. Letras rojo oscuro sobre fondo naranja, por ejemplo.
- Entonces pon esto:
body {
color : rgb(51,0,0);
background-color : rgb(255,204,102);
font-family : Verdana, Arial, Helvetica, Helv, sans-serif;
}
Ahora grábalo con el nombre "estilo.css" en el mismo directorio que el documento HTML.
- Ok, ya está. ¿Ahora que hay que hacer?
- Ahora hay que vincular esta hoja de estilo con nuestro documento HTML. Para ello, vamos a utilizar un nuevo elemento, el elemento LINK
, que debe estar contenido en el elemento HEAD
. Escribe esto dentro del HEAD
:
<link rel="stylesheet" href="estilo.css" media="screen" type="text/css" title="Mi hoja de estilo">
Observa que este elemento no tiene etiqueta final. No es que sea opcional o se me haya olvidado. Es que hay algunos elementos que no pueden tener etiqueta final.
- Vaya hombre. ¿Y qué significa todo eso exactamente?
- Significa que queremos vincular (link
) la hoja de estilo (stylesheet
) contenida en el fichero llamado "estilo.css
" que está escrita en el lenguaje CSS (text/css
) que sólo vale para pantallas de ordenador (screen
) y que se titula (title
) "Mi hoja de estilo". Esto del título tiene su importancia, pero ya te lo explicaré más adelante.
- Ok, perfecto. Ya lo he añadido. ¿Lo guardo?
- Sí, ya está. Con eso bastará. Las propiedades se heredarán desde el elemento padre BODY
hasta sus elementos hijos, que son los que están contenidos en BODY
: los párrafos, las listas, etc. Guárdalo y vuelve a abrir la página con el explorador. ¿Qué tal?
- Impresionante. Espera, me están empezando a llorar los ojos...
- ¡Anda, exagerado!
- No, en serio, tienes razón, esto es muy sencillo. El problema es que yo no sé qué elementos existen, ni que propiedades de estilo, ni nada...
- Pero por eso estás siguiendo el tutorial, ¿no? Como te dije al principio, prefiero que construyas tus conocimientos sobre bases sólidas, aunque avancemos mucho más despacio. En realidad, podría haberte explicado HTML en dos horas, pero seguro que habrías acabado usando todos esos truquitos miserables de los que te he hablado antes. Ten paciencia, ¿vale? ¡Lo hago por tu bien!
- ¡Pero qué padrazo estás hecho! Bueno, supongo que tienes razón.
- Creo que por hoy ya es más que suficiente. La próxima vez hablaremos de identificadores e hipervínculos, y haremos una especie de portal sencillito estilo Yahoo, así que prepárate una lista con tus páginas favoritas.
- ¡Eh, muy bien!
- ¡Hasta la vista!
- ¡Adiós!
Sitio Web mantenido por Juan R. Pozo (jrpozo arroba conclase punto net).
Última modificación: 21/06/2001 - © 2001 Juan R. Pozo y conclase.net