En primer lugar, se determina una fuente para todos los elementos de la página:
* {font-family: Verdana, Arial, Helvetica, Sans-Serif;}
Las opciones para toda la página (la ventana del navegador):
BODY {
color:#000000; /* El color de primer plano */
background-color: #FFFFEE; /* El color de fondo */
background-image: url(fondo.gif); /* La imagen de fondo */
margin: 0; /* Ningún margen */
padding: 0 10% 0 10%; /* Relleno horizontal: 10% */
border: 3px solid #009999; /* El borde de la página */
border-left: 16px solid #009999; /* Sólo el borde izquierdo */
scrollbar-face-color: #009999; /* Colores para las... */
scrollbar-arrow-color: #FFFFEE; /* scrollbars, sólo en... */
scrollbar-base-color: #006666; /* IExporer 5.5 */
scrollbar-highlight-color: #009999 }
Las propiedades para los párrafos:
P {
font-size: x-small; /* El tamaño de la fuente */
text-align: justify; /* Alineación justificada */
text-indent: 5em } /* Sangría del texto */
Se crea una clase .cap para aplicarle una capitular a algunos párrafos:
.cap:first-letter {
font-weight: bold; /* Inicial en negrita */
color: #006666; /* El color de la inicial */
font-size: 150% } /* El tamaño relativo */
Las propiedades para los títulos:
H1 {
font-size: large; /* Tamaño del texto */
color: #006666; } /* Color del texto */
La clase .nota es un párrafo con letra más pequeña:
.nota {
font-size: xx-small; /* Tamaño del texto */
color: #996633; /* Color del texto */
text-align: center; /* Alineado por el centro */
text-indent: 0; } /* Sin sangría */
Propiedades para las lineas horizontales:
HR {
color: #009999; /* Color de la línea */
height: 1px; } /* Grosor de la línea */
Las siguientes son las propiedades de los vínculos
que se encuentran dentro de los párrafos.
Se les quita el subrayado y se especifica un color para el estado normal, otro
cuando ha sido visitado,
otro cuando es señalado y un cuarto color cuando el vínculo está
activo:
P A:link {text-decoration: none; color: #0000FF;}
P A:visited {text-decoration: none; color: #006666;}
P A:hover {text-decoration: none; color: #FF0000;}
P A:active {text-decoration: none; color: #006666;}
Se crea la clase .mnu que contendrá la tabla con el menú:
.mnu {
background-color:#FFCC99; /* El color de fondo */
width:100%; /* El ancho ocupa toda la página */
border: 3px outset #009999; } /* Características del borde */
Se definen las características para las celdas de la tabla dentro de .mnu:
.mnu TD {
border: 1px solid #FFFFFF; /* El borde de la celda */
text-align: center; /* Alineación horizontal */
vertical-align: bottom; } /* Alineación vertical */
Se definen las características de los vínculos,
pero esta vez para aquellos que se encuentran dentro de la celda
de una tabla contenida por un elemento de la clase .mnu. Se especifica que el
texto no debe ir subrayado, su
tamaño y colores para los cuatro estados posibles:
.mnu TD A:link {font-size: xx-small; text-decoration: none; color: #000000;}
.mnu TD A:visited {font-size: xx-small; text-decoration: none; color: #0000FF;}
.mnu TD A:hover {font-size: xx-small; text-decoration: none; color: #FF0000;}
.mnu TD A:active {font-size: xx-small; text-decoration: none; color: #006666;}