Vamos a dar un salto cualitativo en nuestro aprendizaje HTML, para ello vamos a aprender lo que son las hojas de estilos en cascada, su estructura y cómo relacionarlas con nuestra página Web. Las hojas de estilos en cascada (CSS) representan un avance importante para los diseñadores de páginas web, al darles un mayor rango de posibilidades para mejorar la apariencia de sus páginas ya que el código HTML es muy limitado para esta función . Al principio los usuarios se preocupaban más por el contenido que por el diseño, pero hoy en día, tienen la misma importancia. Con las hojas de estilo es más fácil especificar la cantidad de espacio entre líneas, el sangrado de las líneas, los colores a utilizar para el texto y el fondo, el tamaño y estilo de las fuentes, y otros muchos detalles.
Para mi la caracteristica más importante del CSS es la posibilidad de separar los elementos formales de los de contenido. De esta forma, sólo con una pequeña modificación de la hoja de estilo es posible cambiar el aspecto de todas las páginas en las que se aplica esa hoja.
Cuando creamos un estilo, las especificaciones que se realicen para un determinado elemento serán aplicables a todos aquellos elementos que se encuentren "por debajo" de él atendiendo a un criterio de herencia. Por ejemplo, si especificamos un tipo de letra para el elemento <body> todos aquellos elementos que puedan heredar las características se presentarán con el mismo tipo de fuente. Así, el elemento <p> heredará el tipo de letra salvo que especifiquemos lo contrario.
Para mi la caracteristica más importante del CSS es la posibilidad de separar los elementos formales de los de contenido. De esta forma, sólo con una pequeña modificación de la hoja de estilo es posible cambiar el aspecto de todas las páginas en las que se aplica esa hoja.
La Herencia en los estilos
Cuando creamos un estilo, las especificaciones que se realicen para un determinado elemento serán aplicables a todos aquellos elementos que se encuentren "por debajo" de él atendiendo a un criterio de herencia. Por ejemplo, si especificamos un tipo de letra para el elemento <body> todos aquellos elementos que puedan heredar las características se presentarán con el mismo tipo de fuente. Así, el elemento <p> heredará el tipo de letra salvo que especifiquemos lo contrario.
También debemos de tener en cuenta que se establece un orden de prioridad para la aplicación de las normas en caso de que resulten contradictorias. El orden de preferencia para aplicar una norma es el siguiente:
- Estilo especificado dentro de la etiqueta.
- Estilo especificado en la cabecera del documento.
- Estilo definido en un documento independiente al que se enlaza nuestra página.
Si tenemos en cuenta el orden mencionado, lo más razonable es crear una hoja de estilo en un archivo independiente y vincular las páginas a este archivo. Si queremos realizar alguna modificación en un elemento concreto podríamos recurrir a uno de los dos primeros procedimientos que deberían resultar preferentes por ser más específicos. Para vincular un archivo independiente en nuestra página lo haremos de la siguiente forma:
- Estilo especificado dentro de la etiqueta.
- Estilo especificado en la cabecera del documento.
- Estilo definido en un documento independiente al que se enlaza nuestra página.
Si tenemos en cuenta el orden mencionado, lo más razonable es crear una hoja de estilo en un archivo independiente y vincular las páginas a este archivo. Si queremos realizar alguna modificación en un elemento concreto podríamos recurrir a uno de los dos primeros procedimientos que deberían resultar preferentes por ser más específicos. Para vincular un archivo independiente en nuestra página lo haremos de la siguiente forma:
<link rel="stylesheet" type="text/css" href="urlhojadeestilos.css">
La estructura de una hoja de estilo podria ser algo parecido a la siguiente imagen:
Otra alternativa, aunque menos recomendable, pero bien válida es incluir el estilo en la propia página HTML, o sea, internamente. Necesitamos añadir un elemento <style> y la hoja de estilo estará en el interior de ese elemento. En resumidas cuentas las hojas de estilo en CSS están compuestas de reglas. Cada regla tiene tres partes:
Otra alternativa, aunque menos recomendable, pero bien válida es incluir el estilo en la propia página HTML, o sea, internamente. Necesitamos añadir un elemento <style> y la hoja de estilo estará en el interior de ese elemento. En resumidas cuentas las hojas de estilo en CSS están compuestas de reglas. Cada regla tiene tres partes:
- el selector (en el ejemplo siguiente: "body"), el cual le dice al navegador la parte del documento que se verá afectada por la regla.
- la propiedad (en el ejemplo, 'color' y 'background-color' son ambas propiedades), las cuales especifican qué aspecto del diseño va a cambiarse;
- y el valor ('purple' y '#d8da3d'), el cual da el valor para la propiedad.
<html>
<head>
<title>Mi primera página con estilo</title>
<style type="text/css">
body {
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
a:link {
color: blue }
a:visited {
color: purple }
</style>
</head>
