XHTML y CSS

Si tuviera que dar algún consejo a un diseñador de Webs novato, sin duda, sería que separara completamente la parte del diseño y la parte de estructura de la página. Es decir, mantener como mínimo 2 partes separadas: 1 con la estructura de la página (Cabecera, cuerpo, etc) y las hojas de diseño por separado. Aparte de conseguir un sitio mas organizado e intuitivo, conseguimos ahorrarnos tener que modificar varias páginas (Pues podemos asociar todas a nuestra hoja de estilo, y así tener que modificar solamente la mencionada). Es por ello, por lo que voy a explicar como usar por primera vez una hoja de diseño CSS aplicada a un documento XHTML. Para ello, podemos utilizar la plantilla que colgué en el anterior post. Usaré Amaya como editor.

Lo primero, no vamos a trabajar en ningún servidor, si no en nuestro equipo. Así que tendremos que emular una carpeta, como si fuera la carpeta raíz Web de un servidor. Es tan simple como crear una carpeta. En mi caso, la voy a llamar Web.

Dentro de la carpeta, creamos un archivo XHTML desde la plantilla (Si las tenemos en el equipo) y lo llamamos index.html. Lo podemos abrir con nuestro explorador de Internet para ir viendo los cambios que hacemos sobre el documento.

El primer paso será añadir contenidos a nuestra página index. Título, algo de texto, etc. (Para ver el código fuente del documento en Amaya, seleccionamos Ver - Código fuente. Se nos partirá el visor del programa en 2 partes, una con el documento y otra con el código del mismo).

Editor Amaya

Como veis, bastante simple. Ahora entra en juego la parte de CSS. Hay gente que lo inserta directamente en el documento XHTML. A simple vista puede parecer cómodo, pero a la larga como avisé, dificulta las tareas de mantenimiento de la página Web. Por ello, vamos a crear un archivo llamado reglas.css en la misma carpeta donde tenemos el archivo index.html.

Una vez creado, lo abrimos en otra pestaña desde el menú de Amaya, para empezar a trabajar con el documento.

El funcionamiento de una hoja CSS es bastante sencillo: Simplemente aplicamos normas a distintos elementos, las cuales tienen el siguiente formato:

Selector { propiedad:valor }

Eso hay que aprendérselo bien, muy bien. Selector, es al elemento al que vamos a aplicar la regla. Propiedad y valor es fácil de suponer, otorgamos determinado valor a determinada propiedad del elemento selector.

Un ejemplo de una regla en una CSS sería:

h1 {
    color: blue;
    background-color: transparent;
    text-align: center;
    border-style: double;
}

Como vemos, tenemos el selector: h1. Esto significa que el conjunto de reglas entre { } serán aplicadas para todos los elementos h1 de nuestro documento xhtml. A la propiedad color, la otorgamos el valor blue. Por lo tanto, cada vez que tengamos un elemento h1 saldrá color azul. Entendido esto, es fácil entender las demás normas. Ahora vamos a asociar nuestro documento xhtml con nuestra hoja de estilo para que se apliquen los cambios.

Para ello, tras crear una regla como la de arriba en nuestro documento CSS, insertamos dentro de los elementos head de nuestro xhtml:

<link rel="stylesheet" type="text/css" href="reglas.css" /> 

Con esto simplemente asociamos la hoja de estilo. Como podemos observar, tras guardar y actualizar, se aplica el estilo para todos los elementos h1 de nuestro texto.

Estilo ya aplicado

Pero, esto puede parecer incomodo por una razón: Posiblemente, queramos tener varios elementos del mismo tipo (Por ejemplo, párrafos) y no queremos que todos tengan el mismo estilo. Para ello, CSS nos permite usar clases. Podemos definir una clase dentro del propio archivo CSS de la siguiente forma:

p.ejemplo {
    color:green;
}

p.centrado {
    text-align: center;
}

Ahora podemos usar 3 clases de Párrafo: Las normales, las de Ejemplo y las Centradas (Las 2 últimas, son las que hemos definido nosotros).

Basta con seleccionar, dentro del documento xhtml, el elemento al cual queremos aplicar la clase. Veamos el ejemplo:

<p class="ejemplo"> Me llamo <n>Sergio</n>, encantado </p>

Elegimos la clase ejemplo para ese determinado párrafo. Si queremos usar la clase centrado en otro, sustituimos ejemplo por centrado.

Clases aplicadas

Ya sabéis. Mantener separados el Diseño y la Estructura de la página, como en este ejemplo. De lo contrario, tendremos que dedicar mas esfuerzo a mantener la página, será menos legible e intuitiva, y en general, mas difícil de entender.

(Evidentemente no he explicado como usar CSS, solo lo he puesto como ejemplo. Esta entrada no es una guía de CSS).