Despabilando la Mononeurona ::

Para este y tutorial sólo necesitas un navegador y un editor de texto. Si el editor tiene resaltado de sintaxis CSS pues mucho mejor. Si usted está acostumbrado a usar Dreamweaver déjelo un momento aparte pues nada se compara a controlar el código de manera directa.

Cascading Styling Sheets u Hójas de Estilos en Cascada, es uno de los grandes avances en la creación de páginas y programas Web. Uno de los aspectos más importantes de CSS es que no sólo maneja los estilos y tipografía sino también la distribución espacial del contenido de las páginas. Si durante años ha usado HTML y el tag table y siente que no hay necesidad de cambiar debo decirle que está en un error. En cuanto pruebe la potencia y sencillez de CSS se convertirá en un entusiasta. Además, las páginas hechas en CSS son más rápidas y ligeras, y se colocan mejor en los buscadores pues a Google y a Yahoo! les gusta lo hecho con CSS. Además, ahorrará muchas horas de trabajo, su jefe creerá que usted tardo días para cambiar el diseño de un sitio pero en realidad solo fue necesario hacer algunos pases mágicos por la hoja de estilos a la hora de la comida ;-).

Lo primero que debe tener en claro es que el tag font está terminantemente prohibido en CSS. Esto es asi porque en CSS todo se maneja a través de "clases" o estilos. Existen algunas clases predefinidas por el navegador que usted conoce y ha usado cientos de veces: H1, H2, P, HR, TR, etcétera, estas clases son las que hemos usado siempre. La magia de CSS radica en que podemos crear nuevas clases y modificar las existentes. Los primero es crear la página primer-css.html

<html>
<head>
<title> :: Mi primer CSS :: </title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="estilos.css" type="text/css" />
</head>
<body>
Este es un parrafo sin acentos 

Este es otro parrafo sin acentos 

Este es un tercer párrafo sin acentos 

<h1> Este es el tag h1 </h1>

</body>
</html>

Note que después del tag </title> están las indicaciones para que la página HTML "jale" el diseño CSS. A continuación, cree un archivo en blanco y guárdelo en el mismo directorio con el nombre estilos.css.

Es una buena costumbre que las clases que se crean en los archivos CSS estén comentadas para saber en que y en donde las usamos, los comentarios se colocan entre un /* y un */. Las primeras clases (o estilos) que crearemos serán las clases "slogan" y "titulo", que se usan para darle diseño al slogan y al titulo de la página, coloque este código en el archivo estilos.css.

/* Clase para el slogan */
.slogan {
color: #097a19;
font-size: 14pt;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
background-color: #b4b4b4;
}
/* Clase para los titulos */
.titulo {
color: #d3a900;
font-size: 11pt;
font-family: Arial, sans-serif;
text-align: left;
}
/* Mi versión de h1 */
h1 {
color: #dd1010;
font-size: 18pt;
font-family: Arial, sans-serif;
text-align: center;
}

Las clases que uno crea comienzan con un punto (.) mientras las predefinidas (como h1) no lo tienen. Note además que el código CSS se escribe con minúscula pues asi lo exige el estándard. El resultado, al recargar el archivo HTML será:

Este es el tag h1

El tag SPAN sirve para marcar bloques de texto. Un bloque span, como vemos en el tercer párrafo, puede colocarse dentro de otro bloque SPAN.

Autor
Manuel Montoya es psicólogo y vive en la Ciudad de México. Desde 1998 se dedica a la consultoría de sistemas abiertos. Ha desarrollado aplicaciones Web para American Express, Bancomext, Aeroméxico y Ford. Actualmente trabaja en el Instituto de Investigaciones Biomédicas de la UNAM usando Python, PostgreSQL y PHP sobre NetBSD, además prepara el café de las mañanas. Jedit.org y WindowMaker son su editor y escritorio favoritos.