TUTOWEB: Tutoriales de Diseño gráfico en la Web
Tutorial: Páginas web con Corel Graphics Suite y CSS
Paso 4: La belleza viene con estilo
Llegó la hora de la diversión. En este último paso vamos usar las Hojas de Estilo para darle a nuestra página las características que tendrá: colores, tamaños, ubicaciones, etc. según el boceto que creamos en CorelDraw en el paso 1.
Un poco de teoría no hace daño
Las Hojas de Estilo en Casacada o Cascading Style Sheet (CSS) son archivos que contienen información sobre la presentación o apariencia que tendrá un documento en cualquier dispositivo. Gracias a los estilos podemos separar la presentación del contendio, una de las principales caracterísiticas del diseño web con estándares. La gran ventaja de las CSS es que modificando el archivo correspondiente actualizamos 1, 20, 50, 1000 o más páginas web que dependan de él en una sola vez.
Para vincular una hoja de estilo externa a nuestra página, basta escribir en el código xhtml, entre las etiquetas <head> y </head> una línea como la siguiente:
<head>
<title>Título</title>
<link rel="stylesheet" type="text/css" href="miHojadeEstilo.css" />
</head>
Aunque no es una práctica muy eficaz - preferible usarla sólo en fase de prueba -, también podemos incrustar una hoja de estilo en la página; basta con añadir una etiqueta de apertura: <style type="text/css"> y una de cierre: </style> y dentro de ellas añadir el contenido normal del archivo css.
Las Hojas de estilo constan de los siguientes elementos:
Selector: Es el elemento al que se aplica la regla de estilo. Puede ser una etiqueta h1 (encabezado), p (un párrafo), img (imagen), un div, una tabla, etc.
Propiedad: CSS consta de muchas propiedades que establecen tamaños, colores, posiciones, orden, etc. de los elementos.
Valor: Consiste en los atributos que tendrá la propiedad. Por ejemplo: el ancho será de tanto, el fondo será de tal color, la fuente será tal, etc. Así tendríamos:
#escena {
width: 760px;
}
establece que la etiqueta div llamada "escena" tendrá un ancho (una de sus propiedades) de 760 píxeles (el valor).
Una regla de estilo puede consistir en una o muchas propiedades.
La propiedad y el valor juntos forman la declaración.
Un archivo CSS consta únicamente de una lista de selectores con sus respectivas declaraciones.
Solamente usaremos algunas propiedades. Para ver todas las propiedades que existen en CSS ir a la Lista Completa de Propiedades CSS.
Tipos, clases e ides
Los selectores de CSS pueden ser principalmente:
Selectores de Tipo- tiene influencia sobre los elementos de un determinado tipo como etiquetas h1, h2, img, etc. Cambian la apariencia de todas las etiquetas elegidas. Ejemplo:
h1 {
font-family: Arial, Helvetica, san-serif;
}
mostrará todo el texto de encabezado (h1) con el juego de fuentes elegido.
Selectores de Clase- Permite seleccionar y aplicar estilos a elementos concretos sin que efecte a otros de su mismo tipo. Por ejemplo, en el código xhtml se ha incluído el selector de clase "resalte":
<p class="resalte">Este es una párrafo que no tiene mucho que decir.</p>
Y en la hoja de estilo correspondiente, la regla de estilo que viene precedida por un punto indica que únicamente ese párrafo en concreto debe ser de color rojo:
.resalte {
color: #f00;
}
Selectores id- Con ellos podemos invocar elementos únicos en nuestra página, como bloques de contenido que no se repiten, etc. Mientras que los selectores de clase recurren al punto, los id van precedidos de una almohadilla (#). Si este fuera el código xhtml:
<div id="lateral2"> ...contenido de lateral2... </div>
la regla de estilo para establecer su anchura y altura podría ser:
#lateral2 {
width: 130px;
height: 380px;
}
Aunque actualmente la gran mayoría de Navegadores tratan de ceñirse a los estándares web, por ahora, el gran problema de diseñar con CSS es que no todos ellos interpretan exactamente igual las hojas de estilo. Concretamente el navegador más popular (si, por supuesto: Internet Explorer) tiene problemas para su correcta interpretación y no admite algunas nuevas propiedades CSS, por eso es bueno probar nuestros avances en los 3 navegadores más usados: Firefox, Opera y .... bueno, ni modo, IE.
CSS: las chicas Superpoderosas
Cuando digo chicas, aludo a algunas formas de hacer que nuestras CSS sean más compactas, pequeñas y fáciles de modificar; entre ellas están las siguientes:
-Los valores hexadecimales normalmente contienen una almohadilla y 6 dígitos y/o letras. Por ejemplo (#FF0033). Cuando los pares son iguales, podemos representarlo así: #f03. Y para hacer todo más fácil, escribirlo en minúsculas.
- Las Propiedades margin, padding y border deben considerar sus 4 valores posibles: top, rigth, bottom y left. En ese orden, un ejemplo para algún elemento sería:
{
margin: 0; /*todos los márgenes están en 0 */
padding: 10px 4px 0 6px; /*relleno superior: 10px, derecho: 4px, inferior: 0
e izquierdo: 6px */
border: 2px 4px; /*los bordes superior e inferior tienen un grosor
de 2px y el derecho e izquierdo de 4px */
}
-Si dos o más selectores comparten las mismas propiedades, podemos agruparlos separándolos con una coma (,) e invocar las propiedades una sola vez para todos ellos:
#escena, #lateral1, #pie {
border: 1px solid #693;
color: #ddd;
}
- Usando selectores descendentes para evitar el uso innecesario y abusivo de selectores class:
#conText h3 em {
color: #f33;
}
Esta regla aplicará color rojo solamente a las palabras en cursiva (em) del encabezado h3 que está dentro del bloque 'conText'.
Una posición envidiable
Ahora es cuándo. Aplicaremos nuestros estilos según el modelo realizado en CorelDraw.
- En una hoja en blanco del editor html que hallamos elegido (ver editores html gratuitos) redactaremos la hoja de estilo. Le damos un nombre distintivo como 'amazon.css' y la guardamos en nuestra carpeta del sitio
Como vimos en la Parte 1, la jerarquía del sitio es ésta. Entonces, iremos creando las reglas de estilo en ese orden.
- El body es la base del documento y sus atributos se heredarán a todos sus elementos (hijos). Establecemos el juego de fuentes, el tamaño de ellas, el color de fondo y centramos todo el contenido.
body {
font-family: Verdana, Geneva, Helvetica, sans-serif;
font-size: 11px;
background-color: #fff;
text-align: center;
}
Los valores más usados de la propiedad position son relative y absolute. La primera mantiene el objeto dentro del flujo normal del documento (uno tras otro), mientras que absolute 'quita' el elemento del flujo normal para ubicarlo independientemente.
En nuestro caso usaremos el bloque 'escena' con posición relativa, lo que nos garantiza que todos los elementos se conservarán englobados dentro de este bloque padre. Y los elementos que tengan posición absoluta o relativa -en su interior- se ubicarán en relación a él.
Aquí tenemos unos apuntes más detallados sobre posicionamiento CSS.
- El bloque "escena" es el contenedor de todos los elementos. Lo ubicamos en el centro con 'margin', con un ancho de 760 píxeles y un borde verde de 1 píxel de grosor. Como hemos centrado todo con el body, tenemos que volver a alinear los elementos a la izquierda con la propiedad 'text-align'.
#escena {
width: 760px;
background-color: #fff;
position: relative;
margin: 0 auto;
border: 1px solid #688e23;
text-align: left;
}
- Vamos a crear los estilos básicos para cada bloque y luego iremos completando cada regla de estilo a medida que chequeamos el resultado. Así, establecemos tamaños de fuentes para títulos y subtítulos. Damos ancho, altura, color de fondo y bordes a los elementos para visualizarlos.
* {
margin: 0;
padding: 0;
}
h1, h2 {
font-family: Verdana, Geneva, Helvetica, sans-serif;
font-size: 16px;
}
h3 {
font-family: Verdana, Geneva, Helvetica, sans-serif;
font-size: 12px;
}
#cabecera {
width: auto;
height: 125px;
background-color: #693;
border-bottom: 38px solid #693;
}
ul#navSup {
background-color: #f90;
}
#lateral1 {
background-color: #fff;
border: 1px solid #ddd;
}
#lateral2 {
background-color: #cc3;
}
#conText {
color: #999;
}
#pie {
background-color: #f90;
}
¿Cómo se ve la página hasta ahora?
Una Caja no tan boba
Ya tenemos nuestros elementos visualmente definidos. Para ubicarlos correctamente usaremos 3 propiedades, a parte de position.
Los elementos de bloque están 'revestidos' por decirlo de alguna forma, de varios niveles o zonas que podemos modificar como propiedades. De dentro hacia afuera tenemos: relleno (padding), borde (border) y margen (margin). Esto es lo que se denomina modelo de caja:
Para garantizar la compatibilidad de nuestras CSS en todos los navegadores es preferible empezar estableciendo los márgenes y rellenos en 0. Esto se puede hacer en cada elemento o hacerlo con un selector universal como lo hemos hecho en nuestro caso:
* { margin: 0; padding: 0; }
Aunque este selector no es muy usado para navegadores antiguos, si diseñamos para la versión 6+ de IE y los otros, nos garantiza que margin y padding estarán predeterminadamente con sus valores en 0.
- En seguida veamos las reglas de estilo que se añaden a cada selector, además de las que ya existían. 'navSup' y 'lateral1' los colocamos absolutamente, quitandolos así del flujo y usando las propiedades top, left y rigth los posicionamos basandonos en su contenedor padre, es decir, 'escena'. Por ahora ambos se montan uno sobre otro, pero no hay problema, ya lo arreglaremos luego.
ul#navSup {
position: absolute;
top: 155px;
left: 0;
}
#lateral1 {
width: 140px;
height: 400px;
position: absolute;
top: 200px;
left: 0;
border: 1px solid #ddd;
}
Por otro lado, a 'lateral2', que anidará la barra de navegación lateral, lo hacemos flotar a la derecha. Le damos altura al igual que a 'pie'. Ubicamos el contenido de texto de este último con text-align y padding superior. Le aplicamos color blanco y grosor (font-weight)
#lateral2 {
width: 160px;
height: 480px;
float: right;
padding-top: 20px;
}
#pie {
background-color: #f90;
width: auto;
height: 22px;
text-align: center;
padding-top: 4px;
color: #fff;
font-weight: bold;
}
¿Cómo se ve la página hasta ahora?
La cosa va mejorando, pero todavía nos falta ordenar y posicionar los elementos.
¡Qué listas son las listas! (con CSS, claro)
Con CSS es posible reemplazar los menus de navegación repletos de tablas y celdas con simples listas a las que podemos dar la apariencia que se nos antoje y así ceñirnos a los estándares web.
- En nuestro código xhtml tenemos dos etiquetas casi iguales <ul id="navLateral"> y <ul id="navLateral2"> que están dentro del div 'lateral2'. Estas son las listas de navegación lateral que trabajaremos ahora. Como son dos listas que tendrán la misma apariencia, podemos agrupar los selectores con una coma. Primero formateamos los títulos que preceden a cada lista (h2) dándoles color tamaño y márgenes, luego ubicamos con paddding la posición de 'navLateral' y seguidamente establecemos la distancia vertical (line-height) que habrá entre cada elemento de lista (li). Para terminar, establecemos las características que tendrán los elementos de lista: negrita (font-weight: bold;), eliminamos el subrayado predeterminado que tienen al ser vínculos (text-decoration: none;) y le damos color verde. Cuando pase el cursor encima del vínculo (a:hover), éste cambiará a verde claro.
#lateral2 h2 {
font-size: 11px;
color: #000;
margin: 7px 0 4px 10px;
}
ul#navLateral, ul#navLateral2 {
list-style: none;
padding: 5px 5px 5px 12px;
}
ul#navLateral li, ul#navLateral2 li {
line-height: 18px;
}
ul#navLateral li a, ul#navLateral2 li a {
font-weight: bold;
text-decoration: none;
color: #693;
}
ul#navLateral li a:hover, ul#navLateral2 li a:hover {
color: #cf0;
}
¿Cómo se ve la página hasta ahora?
Texto en la Ciudad
Para aplicar el texto, en el código xhtml hemos definido etiquetas h1, h2, h3 y p. Es importante hacerlo así para establecer una jerarquía de contenido textual que todos los dispositivos con acceso a web interpretarán correctamente.
Al establecer el juego de fuentes y el tamaño de ellas en el body, tenemos que redefinir para los encabezados y otros, pues sucede que los navegadores dan la opción al usuario de reeemplazar etiquetas (h1, h2, p, etc.) o ellos mismos lo hacen si éstas no tienen un estilo especificado en concreto. De modo que entre las primeros selectores de nuestro CSS ya especificamos tamaños y familias para h1, h2 y h3
-El bloque 'conText' que alberga -cómo no- el texto, mantiene su posición predeterminada (static). Le daremos un padding izquierdo de 168 px para 'hacer creer' que flota al lado de 'lateral1'; hacia arriba un relleno de 35 px y hacia abajo 40 px. Su anchura es de 400 px.
A continuación especificamos caracterísisticas para el h1 de 'conText' como color y espaciado entre letras (letter-spacing). El h3 y los párrafos de 'conText' tienen características parecidas: se les ha dado margen superior para separarlos del elemento que los precede. Al final se les ha dado justificado y espaciado entre lineas (line-height).
#conText {
width: 400px;
padding: 35px 0 40px 168px;
color: #999;
}
#conText h1 {
color: #f90;
letter-spacing: 1px;
}
#conText h3 {
margin: 2em 0 0 0;
text-align: justify;
line-height: 18px;
}
#conText p {
margin: 2em 0 0 0;
text-align: justify;
line-height: 18px;
}
¿Cómo se ve la página hasta ahora?
Tu navegas, yo navego
Para finalizar nuestra página modelo (¡uffff!) daremos forma y brillo a la barra de navegación principal ('navSup') que hasta ahora está apilada abajo de 'lateral1'. A diferencia de 'navLateral', esta barra tiene una posición horizontal y requiere unos pasos adicionales.
- Al conjunto de lista le aplicamos el tamaño de fuente, el color de fondo y lo ubicamos absolutamente en relación al contenedor principal 'escena' con left y top. Seguidamente a la lista y a sus elementos los ubicamos uno seguido de otro (horizontal) con float y eliminamos las viñetas de las listas.
ul#navSup {
font-size: 10px;
background-color: #f93;
position: absolute;
left: 0;
top: 152px;
}
ul#navSup li{
float: left;
list-style: none;
}
- A cada elemento de lista, le damos las características de vínculo que tendrá: color, grosor y estilo de borde. Reiteramos el float y damos un relleno de 3 px. Lo demás se aplica igual que la lista anterior.
ul#navSup li a {
border-color: #cf0;
border-width: 2px 2px 2px 0;
border-style: solid;
float: left;
padding: 3px;
color: #000;
text-decoration: none;
}
ul#navSup li a:hover {
color: #fff;
background-color: #c93;
}
Para finalizar aquí tenemos nuestra Hoja de Estilos Completa.
Hay una infinidad de programas dedicados a facilitarnos el trabajo con las hojas de estilo. Al principio usaba TopStyle, o el editor de Dreamweaver, pero con el tiempo descubrí que más rápido resultaba escribir directamente las relgas de estilo en mi archivo css. Con la práctica se vuelve de lo más sencillo. Podemos ayudarnos con cualquier editor html en vista código pues la mayoría de ellos tienen listadas las propiedades CSS y los selectores.
Para seguir viviendo
Dejo algunos enlaces interesantes que son de gran ayuda para continuar y mejorar nuestro aprendizaje en los estándares web y las hojas de estilo.
La World Wide Web Consortium: La web oficial de W3C, el organismo que regula los estándares web. (en inglés).
W3C-España: La oficina del W3C en España.
HTML con clase: Amigable tutorial para aprender html y xhtml.
Tierra de Nómadas: Excelente sitio sobre xhtml, CSS, accesibilidad, etc.
Web Design Group: Guía muy completa para aprender CSS.
CSS Beauty: Sitios diseñados con CSS que inspiran. (en inglés).
Amazon Action: Este es el sitio real que inspiró este tutorial, pero totalmente modificado.
