Hojas de estilo CSS

De Wikilibros, la colección de libros de texto de contenido libre.

CSS es el lenguaje que se emplea para dar estilo a las páginas HTML, que es el lenguaje en que se escriben las páginas Web.

La especificación de CSS, como la de la mayoría de los lenguajes de la World Wide Web, la ha desarrollado el W3 Consortium.

Gracias a CSS se puede separar el trabajo de escribir una web en dos partes (no tan bien diferenciadas como sería deseable, pero suficientemente diferenciadas): la estructura y la presentación.

La estructura, que es la parte de la que se encarga HTML, es la encargada de dar importancia a unos elementos sobre otros, establecer órden entre las informaciones y decir "lo que se debe ver", mientras que la presentación, de la que se encarga CSS, es la encargada de establecer colores, tamaños, efectos visuales (o sonoros) y similares, es decir "cómo se debe ver".

Hay tres maneras de introducir estilos CSS en una página HTML:

  • Mediante el atributo style en una marca
  • Mediante la marca style
  • Mediante hojas externas enlazadas con la marca link

En el primer caso sólo se deben especificar los estilos que se aplicarán al elemento en cuestión, mientras que en los otros dos es necesario especificar, además, a qué elementos de la página se aplicarán los estilos.

Veamos un ejemplo sencillo una lista escrita en HTML sin aplicarle absolutamente ningún tipo de estilos (ni siquiera los que vienen predeterminados por WikiLibros):


Ejemplo Código
  • El Hierro
  • La Palma
  • La Gomera
  • Tenerife
  • Gran Canaria
  • Lanzarote
  • Fuerteventura
<ul>
<li>El Hierro</li>
<li>La Palma</li>
<li>La Gomera</li>
<li>Tenerife</li>
<li>Gran Canaria</li>
<li>Lanzarote</li>
<li>Fuerteventura</li>
</ul>

Veamos ahora la misma lista con algo de estilos:


Ejemplo Código
  • El Hierro
  • La Palma
  • La Gomera
  • Tenerife
  • Gran Canaria
  • Lanzarote
  • Fuerteventura
<style>
ul {
list-style-image: none; list-style-type: disc;
list-style-position: inside;
background-color: yellow; color: red;
border: groove maroon 4px;
}
li {
background-color: aqua; color:teal;
border: solid fuchsia 2px;
}
</style>
<ul>
<li>El Hierro</li>
<li>La Palma</li>
<li>La Gomera</li>
<li>Tenerife</li>
<li>Gran Canaria</li>
<li>Lanzarote</li>
<li>Fuerteventura</li>
</ul>

En el primer caso (HTML puro) obtenemos la estructura: se trata de una lista desordenada. En el segundo, además de la lista obtenemos una determinada decoración. Observemos exactamente la misma lista con otro estilo:


Ejemplo Código
  • El Hierro
  • La Palma
  • La Gomera
  • Tenerife
  • Gran Canaria
  • Lanzarote
  • Fuerteventura
<style>
ul {
list-style-image: none; list-style-type: none;
background-color: black; color:white;
border: groove silver 4px;
}
li {
display: inline;
}
</style>
<ul>
<li>El Hierro</li>
<li>La Palma</li>
<li>La Gomera</li>
<li>Tenerife</li>
<li>Gran Canaria</li>
<li>Lanzarote</li>
<li>Fuerteventura</li>
</ul>

Como vemos parece haber desaparecido la estructura de lista, pero no es así. Tan sólo ha desaparecido la apariencia vertical de ser una lista, pero sigue siéndolo.

Plan de la obra: