Inconciente Colectivo

Sin abordar temas un tanto recurrentes, como la importancia de las CSS y el uso de estándares web empezaremos a publicar una serie de tutoriales que abordarán aspectos prácticos del uso de css y xhtml para que usuarios noveles se inicien en este lenguaje.
Lo que si de forma escueta podríamos decir que la CSS es un lenguaje formal(que se escribe en un archivo de texto), que define la presentación de un documento Html, Xml y Xhtml.
En este sentido el Xhtml es un lenguaje derivado del html y el xml que es más estricto en el uso del código y por ende se apega más a los estándares que su antecesor html.

I Introducción
hasta hace unos años los sitios web se diseñaban básicamente en tablas y frames.
Si le sumamos a esto algo de flash, la estructura de un proyecto web se constituye bajo una forma descentralizada, necesitando mucho software y exigiendo además una gestión totalmente inadecuada para un documento que contiene información.
Las tablas se crearon para manejar información que necesita estar tabulada tal cual lo hace Excell, pero no para estructurar el posicionamiento de los elementos. Estos trucos trajeron muchos vicios como la típica imagen transparente, el diseño de sitios en photoshop(con la famosa herramienta de corte) y otras aberraciones(creo que nadie queda libre de esto).

Si tomamos en cuenta que la primera iniiativa de separar el contenido de la presentación con la introducción de CSS de nivel 1 fue en Diciembre de 1996 y la especificación de CSS de nivel 2 existe desde 1998 la pregunta que todos se hacen es ¿Porqué se ha demorado tanto en implementarse? La principal respuesta tiene un nombre y es Explorer de Microsoft que aparte de sus conocidos problemas de seguridad nunca marchó con los estándares.
Aunque no siempre hay un solo demonio, ya que el enfoque tan determinado de los diseñadores en basar su trabajo en herramientas computacionales como dreamweaver, fireworks o photoshop, dejó de lado algunos temas importantes como la semántica web, la tipografía y la economía de medios que se pueden lograr con un simple editor de texto.

II Materiales(o qué necesito?)

Bueno es tan simple como tener un computador en primera medida, algunos conocimientos de html y un buen editor de texto. A la gente que tenga dominio de Dreamweaver puede seguir utilizando esta herramienta para crear hojas de estilos.
En su versión 8 ha mejorado bastante en la rapidez y prestacia pero es un tanto incómoda la pretensión de autocompletar código( a mi me molesta bastante).
Sugiero partir con un editor de texto simple y ojalá con coloreado de sintaxis que ayuda bastante para no perderse entre tanto texto, como smultron o text wrangler ambos gratuitos livianos y para Mac ( a los usuarios PC les pido que coloquen links con buenos editores en los comentarios).

III Vinculación

Teniendo en cuenta que un archivo xhtml se compone básicamente de un HEAD, lo que no se muestra directamente en el navegador (metadatos, titulo de página, etc) y un BODY o cuerpo de la página, existen tres formas de vincular un CSS:
1. En un archivo externo (estilo.css):
esta es la opción más recomendada ya que se tiene un control absolutamente separado de la estructura(diseño) y el contenido . la forma de hacerlo es colocar dentro de la etiqueta HEAD como se indica a continuación:

donde rel=”STYLESHEET” indica que el enlace es con una hoja de estilos , type=”text/css” porque el archivo es de texto, en sintaxis CSS y href=”nombre del archivo.css” indica el nombre del archivo que en este caso esta en la misma raiz(directorio o carpeta) que el documento xhtml.

2. Colocar el código en el documento xhtml:
Esta opción es un poco más discutible ya que se hace algo que para lo cual las CSS son el antídoto y es mezclar contenido con estructura pero para redefinir algunas propiedades específicas para ciertas páginas que por ejemplo se salen de lo común podría servir.
Aunque eso se puede hacer perfectamente creando otra hoja de estilos externa . de todos modos esta es la estructura de la sintáxis:

3 Colocar el estilo a una etiqueta: Esto no lo recomiendo para nada ya que rompe el esquema de separación de forma total y tranformando el diseño en un patchwork o rompecabezas.

IV Sintáxis

Toda regla de css tiene una estructura que maneja tres partes esenciales:
Selectores
Atributos
Valores

Comenzemos abriendo el editor de texto a elección y
-creamos un documento de texto con la estructura anterior y lo guardamos como html en un directorio.Vínculamos la hoja de estilos.
-creamos un archivo nuevo lo guardamos con la extensión .css dentro del directorio del sitio y hacemos la primera regla:

esta regla traducida significa: estamos primero que nada redefiniendo la etiqueta html BODY, por lo cual la saco de su estado por defecto y le agrego un color de fondo(background-color) gris claro(color hexadecimal #DEE9DD), hago una definición de las tipografías(font-family) que debiese mostrar el computador del usuario, en helvetica como primera opción, verdana si no esta la primera y cualquiera sin serf si no están las dos anteriores y defino el color de la tipografía(color) en un gris oscuro(#333333)

Como ven el selector define a que se le colocará el estilo, el atributo menciona la sentencia que define que estilo estamos cambiando(font en el caso de fuente y fondo en el caso de background) y el valor es la propiedad específica del elemento.

Muchos se preguntarán de donde sacar la lista de atributos posibles, bueno hay muchos pero en la web hay varias listas . Les recomiendo esta.

IV Selectores

Si se fijaron una de las partes más importantes son los selectores, es decir a que elemento se le aplicará la sentencia o estilo.
Existen tres tipos básicos de Selectores:
1 Selectores de Etiquetas HTML
estos definen que el elemento a modificar es una etiqueta html como a que hicimos en el ejemplo anterior. Eso si se pueden redefinir aspectos que dan más especificidad al diseño. tomando el ejemplo anterior agregamos otra etiqueta html:

En este caso agregamos la etiqueta html P(párrafo)y le agregamos un color de fuente negro(#000000). Quiere decir que, todos los textos son grises oscuro porque estan definidos en la etiqueta BODY(color:#333333) salvo los textos encerrados en un párrafo que serán negros aunque esten dentro de la etiqueta body.
Es decir hay grados de especificación que permiten que algunos elementos cambien sin pasar a llevar la estructura.

2 Selector de Identificador
Con esto nos referimos a un elemento único al que le aplicamos el estilo. Es decir ningún otro elemento podrá tener ese estilo. Generalmente asociado a la etiqueta DIV sirve para posicionar y agrupar elementos. Aunque no es siempre este su uso.
Sigamos con el ejemplo:

en el HTML con la etiqueta DIV creamos un contenedor que por defecto no tiene forma ni color , sólo agrupa elementos, dentro de este DIV que identificamos como bloque .
Colocamos un párrafo con texto en latin.
Al css le agregamos los estilo para bloque y le decimos que encierre a este parrafo( y a todo lo que contenga el div) en un bloque de 200×300 pixeles con fondo blanco(#ffffff). lo alineará a la izquierda por defecto porque no le hemos dicho nada más.
Si se fijan los identificadores empiezan en el css con el carácter “#“. Esto quiere decir simplemente que es un identificador y en el html secoloca en la apertura de la etiqueta con el nombre en comillas.

Selector de Clase
Con los selectores de clase estamos haciendo algo mucho más general. Se le puede colocar a cualquier elemento html por separado. Como no es un identificador una clase se puede colocar cuantas veces queramos en el mismo documento. La manera de identificar el selector es un punto antes del nombre. Crearemos una clase usando el ejemplo anterior que se llame .borde y se lo aplicaremos al párrafo:

Agregamos a la etiqueta html P un atributo de clase que llamamos borde y en el css creamos la sentencia que este borde será de un pixel sólido en color naranjo (border: 1px solid #FF6600;) para todos lados por igual.
Acá estamos abreviando sentencias CSS ya que en border esta contenido el tamaño, el tipo y el color del borde(cosas que veremos en otros capítulos).
Además agregamos un margen que en este caso se aplicará desde el contenedor que lo encierra, que medía 200×300 pixeles, hacia adentro para todos los lados con un tamaño de 5 pixeles. ( margin 5px;)

resultados:

———————————————————————————————————-

He tratado de ser lo más didáctico posible ya que se presentan ciertos desafíos grandes al entrar en un lenguaje muy amplio. La próxima entrega la enfocaremos en semántica, modelo de caja(box model) y posicionamiento de elementos. Espero les sirva!