Conceptos básicos de CSS y capas

¿Qué es un CSS?

Una hoja CSS es un conjunto de estilos que se van a aplicar a una página HTML. Los estilos se definen como reglas. Estas reglas le dicen a los navegadores cómo mostrar los tipos específicos de estructuras y aspecto visual de una pagina. Para entender cómo los estilos afectan el aspecto de un Web, necesitamos entender qué sucede a un Web en ausencia de cualquier regla del estilo.

Cuadro 1.3. Las partes de una regla del CSS

Cada regla está formada por dos partes:

1. Un selector que define los elementos del HTML (etiquetas html), a los cuales se va a aplicar una regla.

2. Una colección de una o más declaraciones, compuesta de una propiedad y de un valor.

3. Estas características son las que describen el aspecto de todos los elementos que corresponden al selector.

Por ejemplo, el “font-weight”(estilo de fuente) dice al navegador que esta declaración, defina el estilo de fuente “bold” (negrita, subrayada, itálica etc) para el texto. Después de los dos puntos que separan las dos partes de una declaración, vemos un valor que es el que será aplicado a esa característica. Es decir, un valor equivalente a “negrilla” hará que la fuente en ese documento aparezca en negrita.

Cada declaración debe estar seguida por un punto y coma y aunque hay excepciones, si es recomendable ponerlo  siempre.

Partes de una regla del CSS; Ejemplos

El selector, h1, indica que esta regla se aplica a todos los títulos h1 en el documento. La característica es el color, (que refiere al color de la fuente) y el valor que quisiéramos que la característica “color” tomara es “rojo”.

El selector, p, indica que la regla del estilo se debe aplicar a todos los párrafos en documento. Hay dos declaraciones en la regla. La primera, que establece que todos los párrafos deben tener un tamaño de fuente equivalente a pequeña; y la segunda declaración, que establece que el color se fije al verde.

El resultado de esta regla es que todos los párrafos en el documento aparecerán en color verde y fuente “pequeña”.

Hay algunas propiedades a los que se le pueden aplicar varias características del CSS, como por ejemplo en este caso, la propiedad equivalente a la fuente-familia (tipografía). Las características del CSS, nos permiten asignar una lista de valores posibles a la propiedad y no sólo un valor fijo o único, es decir, se pueden establecer diferentes tipos de tipografías para un mismo párrafo.

Cuando como en este ejemplo, se utiliza una lista de valores posibles, estos han de estar separados por comas. En este caso, la etiqueta font-family establece una lista de valores en las que el estilo “verdana”, queda situado en primer lugar de tal forma que el navegador utilice esta tipografía para mostrar el texto.

Si el navegador no tuviera instalada esa fuente, utilizaría o mostraría la siguiente de la lista que en este caso sería Arial. Y si ni lo uno ni lo otro de estas fuentes está disponible en el sistema del usuario, el navegador omitiría las anteriores y pasaría a mostrar la fuente serif. Siempre que un valor en una lista incluya espacios (al igual que el caso con la fuente nombrada “Verdana”), debes poner ese valor en comillas.

¿Dónde se pueden definir los estilos CSS?

Puedes definir estilos del CSS en cualquiera de estos tres lugares:

Declaraciones en línea

Las declaraciones en línea son principalmente útiles, para poder ver rápidamente como puede quedarnos un efecto concreto en la página web, pero nunca se debe de utilizar como medio para trabajar en una programación definitiva. La separación del contenido de la presentación, es una de las grandes ventajas del CSS, y encajar estilos directamente en el HTML, hace que este propósito para el que se creó el CSS desaparezca.

Se llaman declaraciones en línea, porque se definen en línea como parte del HTML del documento. Puedes asignar una cualidad del estilo a casi todos los elementos del HTML, por ejemplo, hacer un título del segundo-nivel (h2) dentro de un documento html, en el que asignamos la cualidad rojo dentro de la propia etiqueta.

color del style= <h2 : rojo; >Esto es una cabecera</h2>

NOTA IMPORTANTE: Las declaraciones en línea no están recomendadas ya que hacen que la página sea menos accesible y que no respeten las normas de usabilidad.

CSS encajado en el HTML

Especificar las características del estilo en una hoja encajada es una forma de uso frecuente, es un método fácil de trabajar pero no es tampoco el más profesional.

Para encajar una hoja del estilo en una página Web, ponemos un elemento del estilo en la cabecera de los documentos HTML y lo llenamos de reglas del estilo, como se muestra en el siguiente cuadro:

En este ejemplo, las reglas del CSS contenidas en el bloque del estilo se aplican a todas las partes señaladas del documento actual. En este caso, la primera regla ordena al navegador que los dos títulos (llamados h1 y h2) aparezcan en color verde. La segunda regla dice que el resto de títulos que se correspondan al h3 aparezcan en azul.

Nota: Fíjate que cada regla comienza en una línea nueva, y cada declaración dentro de la regla aparece entre los corchetes { }.

No es necesario que cada declaración tenga su propia línea pero acostumbrarse a programar de esa manera, ayuda luego mucho a la legibilidad del código y a la diferenciación del mismo.

CSS externo

Finalmente, puedes definir reglas del CSS en un archivo totalmente separado de la página Web. Para que este CSS se ejecute dentro de nuestra página HTML, se debe enlazar en la zona correspondiente a la cabecera:

Las razones por las cuales esta es la manera más útil de utilizar el CSS son las siguientes:

- Este es el menos cerrado de los tres métodos básicos que los diseñadores pueden utilizar para insertar estilos en una página Web. Uno de los aspectos más prácticos, es que si defines el CSS como un archivo externo, puedes aplicarlo a tantas páginas de tu sitio como deseas, simplemente enlazándolo en la cabecera, como hemos visto anteriormente.

- El mantenimiento: Usar una hoja CSS externa, también hace que tu sitio web sea mucho más fácil mantener. Si por ejemplo, queremos cambiar el aspecto de un elemento que aparezca en todas las páginas de tu sitio, no hace falta que abramos pagina por pagina para realizar la modificación, bastaría con modificar el CSS que comparten para que todas ellas reflejen el cambio realizado.

- Con respecto a la navegación, las hojas externas del estilo son tratadas por el navegador como archivos separados. Cuando el navegador lee una página nueva que utilice la misma hoja del estilo que una página anterior, no hará falta que realice otra vez la descarga puesto que ya la tiene de la página anterior. Por lo tanto, las páginas que utilizan estilos externos son más rápidas cargar.

La herencia en el CSS, estilos en cascada.

La raíz de ese árbol es siempre el elemento HTML, normalmente, el elemento del HTML tiene solamente dos descendientes directos en la herencia, una es la etiqueta <head> y otra la etiqueta <body>.

Este grafico, muestra un árbol simple que representa un ejemplo del sistema de la herencia del HTML. Como puedes ver, el documento tiene en su cabeza los elementos estándares del título (title) y del enlace (link), qué se liga a una hoja externa de estilo CSS. También incluye un elemento del meta.

El elemento del cuerpo (body) tiene cinco ramificaciones: un h1, un h2, un elemento de p (que he llamado p1), una capa (div) y un elemento desordenado de la lista (UL).

El elemento del div, tiene a su vez dos elementos del párrafo, uno de los cuales tiene un elemento para enfatizar ese parrafo (em), mientras que el otro contiene un elemento del ancla (a). El elemento de la lista (Ul) incluye tres elementos propios (li); uno de éstos incluye un elemento para enfatizar(em), y el otro contiene otro elemento párrafo etiquetado(p4).

Cada elemento en un documento del HTML (a excepción del elemento del HTML de la raíz) tiene un “elemento padre”. Éste es el elemento que lo precede directamente en la construcción del árbol. En el esquema, el padre de “p1” es el elemento “body”.

La mayoría de los elementos en un documento del HTML serán descendientes de más de un elemento. Por ejemplo, en el cuadro, el elemento p1 del párrafo es un descendiente del cuerpo y de los elementos del HTML.

De una forma semejante, el elemento p2 del párrafo es un descendiente del div, cuerpo, y elementos del HTML.

Esta idea de la jerarquía del elemento, es importante por dos razones:

Si tomamos el esquema como ejemplo:

Si el elemento del cuerpo (body), tuviera una declaración concreta para por ejemplo, la característica de la fuente-familia (font-family) y p1 no lo tuviera, p1 heredaría y por tanto cogería por defecto, las características de las fuentes que se hubieran descrito en el body.

Es particularmente importante, cuando estás comenzando con un sitio, prestar mucha atención al tema de la herencia y la cascada porque cuando una hoja del estilo parece no funcionar correctamente, te darás cuenta de que a menudo el motivo es que la etiqueta está heredando un valor de otro elemento.

Selectores en CSS. Tipos

Selector universal

El selector universal, escrito "*", se corresponde con el nombre de cualquier tipo de elemento. Es un selector muy práctico para cuando queremos dar la misma característica a todos los elementos de la página. Por ejemplo:

En este ejemplo, todos los elementos en la página tendrían el color del texto en rojo.

Selectores de elemento Tipo

El selector tipo es el selector más común. Especifica un tipo del elemento del HTML sin calificadores, es decir, específica una etiqueta html.

En este ejemplo, especificamos el color del texto y del fondo de todos los hyper-links que pueda haber en el documento actual. Aparecerán con el texto en color blanco y con un fondo verde.

Selectores de clase

Para aplicar una regla del estilo a un grupo arbitrario de elementos en una página Web, necesitarás definir una clase en la hoja del estilo, y luego, identificar los elementos del HTML que pertenecen a esa clase.

Para definir una clase en una hoja del estilo, debes preceder el nombre de la clase con un punto. No se permite ningún espacio entre el punto y el nombre de la clase.

El siguiente ejemplo de la hoja del estilo describe una clase llamada diferente.

Entonces, agregamos el class= " diferente " a los elementos html que deseamos que adopten este estilo. Por ejemplo:

En este ejemplo, tanto la cabecera <h1> como el párrafo <p> tendrían el estilo que hemos descrito mas arriba y llamado como diferente. Es decir, ambos aparecerían con el tipo de letra Verdana.

Puedes escribir tu clase de modo que se aplique solamente a un tipo particular de elemento. En el ejemplo siguiente, creamos la misma clase especial, pero esta vez se la aplicamos solamente a los elementos del párrafo, para ello el código tendría que aparecer de la siguiente manera:

Selectores de ID

Un selector ID debe de definirse en la hoja de estilo y se debe de incluir luego dentro de la etiqueta del HTML. Para identificar el selector ID se usa el símbolo # .

Ejemplo. Aquí aparece como se definiría el ID en la hoja de estilo:

Para aplicar el ID al las etiquetas HTML sería de la siguiente manera:

Pseudos elementos y Pseudos clases

Cuando hablamos de CSS en cascada, nos referimos a que el estilo de los elementos está basado en muchos casos, en su posición dentro de la estructura del documento. Este sencillo modelo suele ser suficiente, pero algunos casos, la edición de lo que queremos no se puede resolver por medio únicamente de la estructura del documento.

Por ejemplo, en HTML 4.0, no tenemos ningún elemento que se refiera a la primera línea de una párrafo y, por consiguiente, ningún selector CSS que pueda referirse a ella para darle un estilo concreto.

Para poder dar formato a estos elementos, CSS introduce los conceptos de pseudo-elementos y pseudo-clases que permiten aplicar el formato basado en información que está fuera de la estructura del documento.

Ni los pseudo-elementos ni las pseudo-clases aparecen en el documento fuente o la estructura del documento, ese es el motivo de que se llamen “pseudo”.

Hasta ahora, la especificación del CSS ha definido solamente tres pseudo-elementos: firstletter, first-line, y first-child.

Veamos un ejemplo:

Con este pseudo-elemento, la primera letra en cada párrafo, será cinco veces más grande que el tipo generalmente usado en párrafos. La característica “float”, conseguiría además, que el texto restante flotara alrededor de la letra. El efecto conseguido sería el siguiente:

Pseudos clases:

Un selector pseudo-clase, es exactamente como el selector pseudo-elemento, con una excepción; un selector de la pseudo-clase se aplica a un elemento entero o etiqueta, pero solamente bajo ciertas condiciones.

El CSS 2 actual define las pseudo-clases siguientes: hover, active, focus, link, visited, lang.

Todas las etiquetas ancla (a) cambiarán de color cuando el cursor del ratón pase sobre ellos. Como puedes ver, esto significa que el selector de la pseudo-clase entra en el juego solamente cuando el usuario obra recíprocamente con el elemento afectado.