Saltar a contenido

UT3. Utilización de Lenguajes de Marcas en Entornos Web. CSS

¿Qué es CSS?

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas.

Separar la definición de los contenidos y la definición de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo (también llamados "documentos semánticos"). Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes.

Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado, tabla, lista de elementos, etc.

Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entre elementos, posición de cada elemento dentro de la página, etc.

Funcionamiento básico de CSS

Antes de la adopción de CSS, los diseñadores de páginas web debían definir el aspecto de cada elemento dentro de las etiquetas HTML de la página. El siguiente ejemplo muestra una página HTML con estilos definidos sin utilizar CSS:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de estilos sin CSS</title>
</head>
<body>
    <h1><font color="red" face="Arial" size="5">Titular de la página</font></h1>
    <p><font color="gray" face="Verdana" size="2">Un párrafo de texto no muy largo.</font></p> 
</body>
</html>
Resultado

Titular de la página

Un párrafo de texto no muy largo.

El ejemplo anterior utiliza la etiqueta <font> con sus atributos color, face y size para definir el color, la tipografía y el tamaño del texto de cada elemento del documento.

El principal problema de esta forma de definir el aspecto de los elementos se puede ver claramente con el siguiente ejemplo: si la página tuviera 50 elementos diferentes, habría que insertar 50 etiquetas <font>. Si el sitio web entero se compone de 10.000 páginas diferentes, habría que definir 500.000 etiquetas <font>. Como cada etiqueta <font> tiene 3 atributos, habría que definir 1.5 millones de atributos.

Por otra parte, el diseño de los sitios web está en constante evolución y es habitual modificar cada cierto tiempo los colores principales de las páginas o la tipografía utilizada para el texto. Si se emplea la etiqueta <font>, habría que modificar el valor de 1.5 millones de atributos para modificar el diseño general del sitio web.

La solución que propone CSS es mucho mejor, como se puede ver en el siguiente ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de estilos con CSS</title>

    <style type="text/css">
        h1 { color: red; font-family: Arial; font-size: large; }
        p { color: gray; font-family: Verdana; font-size: medium; }
    </style>
</head>
<body>
    <h1>Titular de la página</h1>
    <p>Un párrafo de texto no muy largo.</p> 
</body>
</html>
Resultado

Titular de la página

Un párrafo de texto no muy largo.

CSS permite separar los contenidos de la página y su aspecto o presentación. En el ejemplo anterior, dentro de la propia página HTML se reserva una zona en la que se incluye toda la información relacionada con los estilos de la página.

Utilizando CSS, en esa zona reservada se indica que todas las etiquetas <h1> de la página se deben ver de color rojo, con un tipo de letra Arial y con un tamaño de letra grande. Además, las etiquetas <p> de la página se deben ser de color gris, con un tipo de letra Verdana y con un tamaño de letra medio.

Definiendo los estilos de esta forma, no importa el número de elementos <p> que existan en la página, ya que todos tendrán el mismo aspecto establecido mediante CSS. Como se verá a continuación, esta forma de trabajar con CSS no es ideal, ya que, si el sitio web dispone de 10.000 páginas, habría que definir 10.000 veces el mismo estilo CSS.

Incluir CSS en un documento HTML

Una de las principales características de CSS es su flexibilidad y las diferentes opciones que ofrece para realizar una misma tarea. De hecho, existen tres opciones para incluir CSS en un documento HTML.

Incluir CSS en el mismo documento HTML (CSS interno)

Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del documento (sólo dentro de la sección <head>).

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de estilos con CSS interno</title>

    <style type="text/css">
        h1 { color: red; font-family: Arial; font-size: large; }
        p { color: gray; font-family: Verdana; font-size: medium; }
    </style>
</head>
<body>
    <h1>Titular de la página</h1>
    <p>Un párrafo de texto.</p> 
</body>
</html>
Resultado

Titular de la página

Un párrafo de texto.

Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML que completen los estilos que se incluyen por defecto en todas las páginas del sitio web.

El principal inconveniente es que, si se quiere hacer una modificación en los estilos definidos, es necesario modificar todas las páginas que incluyen el estilo que se va a modificar.

Definir CSS en un archivo externo (CSS externo)

En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas HTML enlazan mediante la etiqueta <link>. Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es .css Se pueden crear todos los archivos CSS que sean necesarios y cada página HTML puede enlazar tantos archivos CSS como necesite.

Si se quieren incluir los estilos del ejemplo anterior en un archivo CSS externo, se deben seguir los siguientes pasos (Visual Studio Code):

1) Se crea un archivo con la extensión .css

Archivo CSS.
Archivo CSS.

2) Se añade solamente el siguiente contenido: 

h1 { color: red; font-family: Arial; font-size: large; }
p { color: gray; font-family: Verdana; font-size: medium; }

3) En la página HTML se enlaza el archivo CSS externo mediante la etiqueta <link>: 

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de estilos con CSS externo</title>

    <link rel="stylesheet" type="text/css" href="/css/estilos.css">
</head>
<body>
    <h1>Titular de la página</h1>
    <p>Un párrafo de texto.</p> 
</body>
</html>

Resultado

Titular de la página

Un párrafo de texto.

Nota

Es recomendado almacenar las hojas de estilos en un directorio común, por ejemplo, llamado CSS. Además, se recomienda emplear rutas relativas.

Cuando el navegador carga la página HTML anterior, antes de mostrar sus contenidos también descarga los archivos CSS externos enlazados mediante la etiqueta <link> y aplica los estilos a los contenidos de la página.

Normalmente, la etiqueta <link> incluye cuatro atributos cuando se enlaza un archivo CSS:

  • rel: indica el tipo de relación que tiene el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet.
  • type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css.
  • href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.
  • media: indica el medio en el que se van a aplicar los estilos del archivo CSS.

De todas las formas de incluir CSS en las páginas HTML, esta es la más utilizada con mucha diferencia. La principal ventaja es que se puede incluir un mismo archivo CSS en multitud de páginas HTML, por lo que se garantiza la aplicación homogénea de los mismos estilos a todas las páginas que forman un sitio web.

Con este método, el mantenimiento del sitio web se simplifica al máximo, ya que un solo cambio en un solo archivo CSS permite variar de forma instantánea los estilos de todas las páginas HTML que enlazan ese archivo.

Incluir CSS en los elementos HTML (CSS en línea)

El último método para incluir estilos CSS en documentos HTML es poco utilizado, ya que tiene los mismos problemas que la utilización de las etiquetas <font>.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de estilos con CSS en linea</title>
</head>
<body>
    <h1 style="color: red; font-family: Arial; font-size: large;">Titular de la página</h1>
    <p style="color: gray; font-family: Verdana; font-size: medium;">Un párrafo de texto.</p> 
</body>
</html>
Resultado

Titular de la página

Un párrafo de texto.

Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en determinadas situaciones en las que se debe incluir un estilo muy específico para un solo elemento concreto. Se emplea el atributo HTML style para definir las propiedades CSS.

Glosario básico

CSS define una serie de términos que permiten describir cada una de las partes que componen los estilos CSS. El siguiente esquema muestra las partes que forman un estilo CSS muy básico:

Reglas CSS.
Reglas CSS.

Los diferentes términos se definen a continuación:

  • Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de "selectores", un símbolo de "llave de apertura" ({), otra parte denominada "declaración" y, por último, un símbolo de "llave de cierre" (}).
  • Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.
  • Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades CSS.
  • Propiedad: permite modificar el aspecto de una característica del elemento.
  • Valor: indica el nuevo valor de la característica modificada en el elemento.

Un archivo CSS puede contener infinitas reglas CSS, cada regla puede contener infinitos selectores y cada declaración puede estar formada por un número infinito de pares propiedad/valor.

Comentarios

CSS permite incluir comentarios entre sus reglas y estilos. Los comentarios son contenidos de texto que el diseñador incluye en el archivo CSS para su propia información y utilidad. Los navegadores ignoran por completo cualquier comentario de los archivos CSS, por lo que es común utilizarlos para estructurar de forma clara los archivos CSS complejos.

El comienzo de un comentario se indica mediante los caracteres /* y el final del comentario se indica mediante */, tal y como se muestra en el siguiente ejemplo:

/* Este es un comentario en CSS */

Los comentarios pueden ocupar tantas líneas como sea necesario, pero no se puede incluir un comentario dentro de otro comentario:

/* Este es un
comentario CSS de varias
líneas */

Aunque los navegadores ignoran los comentarios, su contenido se envía junto con el resto de estilos, por lo que no se debe incluir en ellos ninguna información sensible o confidencial.

La sintaxis de los comentarios CSS es muy diferente a la de los comentarios HTML, por lo que no deben confundirse.

Selectores

Una regla de CSS está formada por una parte llamada "selector" y otra parte llamada "declaración".

La declaración indica "qué hay que hacer" y el selector indica "a quién hay que hacérselo". Por lo tanto, los selectores son imprescindibles para aplicar de forma correcta los estilos CSS en una página.

El estándar de CSS incluye muchos tipos diferentes de selectores, que permiten seleccionar de forma muy precisa elementos individuales o conjuntos de elementos dentro de una página web.

No obstante, la mayoría de páginas de los sitios web se pueden diseñar utilizando solamente los cinco selectores básicos.

Selectores básicos

Selector universal

Se utiliza para seleccionar todos los elementos de la página. El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML (por ahora no es importante fijarse en la parte de la declaración de la regla CSS):

* {
    margin: 0;
    padding: 0;
}

El selector universal se indica mediante un asterisco *. A pesar de su sencillez, no se utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página.

Selector de tipo o etiqueta

Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página:

p {
...
}

Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta HTML (sin los caracteres < y >) correspondiente a los elementos que se quieren seleccionar.

El siguiente ejemplo aplica diferentes estilos a los titulares y a los párrafos de una página HTML: 

h1 {
    color: red;
}

h2 {
    color: blue;
}

p {
    color: black;
}

Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden encadenar los selectores. En el siguiente ejemplo, los títulos de sección h1, h2 y h3 comparten los mismos estilos:

h1 {
    color: blue;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
}

h2 {
    color: blue;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
}

h3 {
    color: blue;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
}

En este caso, CSS permite agrupar todas las reglas individuales en una sola regla con un selector múltiple. Para ello, se incluyen todos los selectores separados por una coma , y el resultado es que la siguiente regla CSS es equivalente a las tres reglas anteriores:

h1, h2, h3 {
    color: blue;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
}

En las hojas de estilo complejas, es habitual agrupar las propiedades comunes de varios elementos en una única regla CSS y posteriormente definir las propiedades específicas de esos mismos elementos. El siguiente ejemplo establece en primer lugar las propiedades comunes de los títulos de sección (color y tipo de letra) y a continuación, establece el tamaño de letra de cada uno de ellos:

h1, h2, h3 {
    color: blue;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
}

h1 {font-size: large;}
h2 {font-size: medium;}
h3 {font-size: small;}
Resultado

Título de sección 1

Título de sección 2

Título de sección 3

Selector descendente

Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento.

El selector del siguiente ejemplo selecciona todos los elementos <span> de la página que se encuentren dentro de un elemento <p>:

p span { color: red; }

Si el código HTML de la página es el siguiente:

<p>Hola mundo <span>texto1</span>
    <a href="#">Enlace <span>texto2</span></a>
</p>
Resultado

Hola mundo texto1 Enlace texto2

El selector p span selecciona tanto texto1 como texto2. El motivo es que, en el selector descendente, un elemento no tiene que ser "hijo directo" de otro. La única condición es que un elemento debe estar dentro de otro elemento, sin importar lo profundo que se encuentre.

Al resto de elementos <span> de la página que no están dentro de un elemento <p>, no se les aplica la regla CSS anterior.

Los selectores descendentes permiten mejorar la precisión del selector de tipo o etiqueta. Así, utilizando el selector descendente es posible aplicar diferentes estilos a los elementos del mismo tipo. El siguiente ejemplo amplía el anterior y muestra de color azul todo el texto de los <span> contenidos dentro de un <h1>:

p span { color: red; }
h1 span { color: blue; }

Con las reglas CSS anteriores:

  • Los elementos <span> que se encuentran dentro de un elemento <p> se muestran de color rojo.
  • Los elementos <span> que se encuentran dentro de un elemento <h1> se muestran de color azul.
  • El resto de elementos <span> de la página, se muestran con el color por defecto aplicado por el navegador.

La sintaxis formal del selector descendente se muestra a continuación:

elemento1 elemento2 elemento3 ... elementoN

Los selectores descendentes siempre están formados por dos o más partes separadas entre sí por espacios en blanco. La última parte indica el elemento sobre el que se aplican los estilos y todas las partes anteriores indican el lugar en el que se tiene que encontrar ese elemento para que los estilos se apliquen realmente.

En el siguiente ejemplo, el selector descendente se compone de cuatro partes:

p a span em { color:red;}

Los estilos de la regla anterior se aplican a los elementos de tipo <em> que se encuentren dentro de elementos de tipo <span>, que a su vez se encuentren dentro de elementos de tipo <a> que se encuentren dentro de elementos de tipo <p>.

No debe confundirse el selector descendente con la combinación de selectores:

/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */
p, a, span, em { text-decoration: underline; }

/* El estilo se aplica solo a los elementos "em" que se
encuentran dentro de "p a span" */
p a span em { text-decoration: underline; }

Si se emplea el selector descendente combinado con el selector universal, se puede restringir el alcance de un selector descendente. El siguiente ejemplo, muestra los dos enlaces de color rojo:

p a { color: red; }

<p><a href="#">Enlace1</a></p>
<p><span><a href="#">Enlace2</a></span></p>

Resultado

Enlace1

Enlace2

Sin embargo, en el siguiente ejemplo solamente el segundo enlace se muestra de color rojo:

p * a { color: red; }

<p><a href="#">Enlace1</a></p>
<p><span><a href="#">Enlace2</a></span></p>

Resultado

Enlace1

Enlace2

La razón es que el selector p * a se traduce como todos los elementos de tipo <a> que se encuentren dentro de cualquier elemento que, a su vez, se encuentre dentro de un elemento de tipo <p>. Como el primer elemento <a> se encuentra directamente bajo un elemento <p>, no se cumple la condición del selector p * a.

Selector de clase

Si se considera el siguiente código HTML de ejemplo:

<body>
<p>Esto es el primer párrafo.</p>
<p>Esto es el segundo párrafo.</p>
<p>Esto es el tercer párrafo.</p>
</body>

¿Cómo se pueden aplicar estilos CSS sólo al primer párrafo? El selector universal * no se puede utilizar porque selecciona todos los elementos de la página. El selector de tipo o etiqueta p tampoco se puede utilizar porque seleccionaría todos los párrafos. Por último, el selector descendente body p tampoco se puede utilizar porque todos los párrafos se encuentran en el mismo sitio.

Una de las soluciones más sencillas para aplicar estilos a un solo elemento de la página consiste en utilizar el atributo class de HTML sobre ese elemento para indicar directamente la regla CSS que se le debe aplicar:

<body>
<p class="destacado">Esto es el primer párrafo.</p>
<p>Esto es el segundo párrafo.</p>
<p>Esto es el tercer párrafo.</p>
</body>

A continuación, se crea en el archivo CSS una nueva regla llamada destacado con todos los estilos que se van a aplicar al elemento. Para que el navegador no confunda este selector con los otros tipos de selectores, se prefija el valor del atributo class con un punto (.) tal y como muestra el siguiente ejemplo:

.destacado { color: red; }
Resultado

Esto es el primer párrafo.

Esto es el segundo párrafo.

Esto es el tercer párrafo.

El selector .destacado se interpreta como "cualquier elemento de la página cuyo atributo class sea igual a destacado", por lo que solamente el primer párrafo cumple esa condición.

Este tipo de selectores se llaman selectores de clase y son los más utilizados junto con los selectores de ID que se verán a continuación. La principal característica de este selector es que en una misma página HTML varios elementos diferentes pueden utilizar el mismo valor en el atributo class:

<body>
<p class="destacado">Esto es el primer párrafo.</p>
<p>Esto es el <a href="#" class="destacado">segundo párrafo</a>.</p>
<p>Esto es el <em class="destacado">tercer</em> párrafo.</p>
</body>
Resultado

Esto es el primer párrafo.

Esto es el segundo párrafo.

Esto es el tercer párrafo.

Tip

Los selectores de clase son imprescindibles para diseñar páginas web complejas, ya que permiten disponer de una precisión total al seleccionar los elementos. Además, estos selectores permiten reutilizar los mismos estilos para varios elementos diferentes.

En ocasiones, es necesario restringir el alcance del selector de clase. Si se considera de nuevo el ejemplo anterior. ¿Cómo es posible aplicar estilos solamente al párrafo cuyo atributo class sea igual a destacado?

Combinando el selector de tipo y el selector de clase, se obtiene un selector mucho más específico:

p.destacado { color: red }
Resultado

Esto es el primer párrafo.

Esto es el segundo párrafo.

Esto es el tercer párrafo.

El selectorp.destacado se interpreta como "aquellos elementos de tipo <p> que dispongan de un atributo class con valor destacado". De la misma forma, el selector a.destacado solamente selecciona los enlaces cuyo atributo class sea igual a destacado.

De lo anterior se deduce que el selector .destacado es equivalente a *.destacado, por lo que todos los diseñadores obvian el símbolo * al escribir un selector de clase normal.

No debe confundirse el selector de clase con los selectores anteriores:

/* Todos los elementos de tipo "p" con atributo class="aviso" */
p.aviso { ... }
/* Todos los elementos con atributo class="aviso" que estén dentro
de cualquier elemento de tipo "p" */
p .aviso { ... }
/* Todos los elementos "p" de la página y todos los elementos con
atributo class="aviso" de la página */
p, .aviso { ... }

Por último, es posible aplicar los estilos de varias clases CSS sobre un mismo elemento. La sintaxis es similar, pero los diferentes valores del atributo class se separan con espacios en blanco. En el siguiente ejemplo:

<p class="especial destacado error">Párrafo de texto...</p>

Al párrafo anterior se le aplican los estilos definidos en las reglas .especial, .destacado y .error, por lo que en el siguiente ejemplo, el texto del párrafo se vería de color rojo, en negrita y con un tamaño de letra de 15 píxel:

.error { color: red; }
.destacado { font-size: 15px; }
.especial { font-weight: bold; }
Resultado

Párrafo de texto...

Si un elemento dispone de un atributo class con más de un valor, es posible utilizar un selector más avanzado:

.error { color: red; }
.error.destacado { color: blue; }
.destacado { font-size: 15px; }
.especial { font-weight: bold; }
Resultado

Párrafo de texto...

En el ejemplo anterior, el color de la letra del texto es azul y no rojo. El motivo es que se ha utilizado un selector de clase múltiple .error.destacado, que se interpreta como "aquellos elementos de la página que dispongan de un atributo class con al menos los valores error y destacado". El estilo que se aplica es el del selector más específico.

Selectores de ID

En ocasiones, es necesario aplicar estilos CSS a un único elemento de la página. Aunque puede utilizarse un selector de clase para aplicar estilos a un único elemento, existe otro selector más eficiente en este caso.

El selector de ID permite seleccionar un elemento de la página a través del valor de su atributo id. Este tipo de selectores sólo seleccionan un elemento de la página porque el valor del atributo id no se puede repetir en dos elementos diferentes de una misma página.

La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que se utiliza el símbolo de la almohadilla # en vez del punto . como prefijo del nombre de la regla CSS. Por ejemplo:

<p>Primer párrafo</p>
<p id="destacado">Segundo párrafo</p>
<p>Tercer párrafo</p>

#destacado { color: red; }
Resultado

Primer párrafo

Segundo párrafo

Tercer párrafo

En el ejemplo anterior, el selector #destacado solamente selecciona el segundo párrafo (cuyo atributo id es igual a destacado).

La principal diferencia entre este tipo de selector y el selector de clase tiene que ver con HTML y no con CSS. Como se sabe, en una misma página, el valor del atributo id debe ser único, de forma que dos elementos diferentes no pueden tener el mismo valor de id. Sin embargo, el atributo class no es obligatorio que sea único, de forma que muchos elementos HTML diferentes pueden compartir el mismo valor para su atributo class.

De esta forma, la recomendación general es la de utilizar el selector de ID cuando se quiere aplicar un estilo a un solo elemento específico de la página y utilizar el selector de clase cuando se quiere aplicar un estilo a varios elementos diferentes de la página HTML.

Al igual que los selectores de clase, en este caso también se puede restringir el alcance del selector mediante la combinación con otros selectores. El siguiente ejemplo aplica la regla CSS solamente al elemento de tipo <p> que tenga un atributo id igual al indicado:

p#aviso { color: blue; }

A primera vista, restringir el alcance de un selector de ID puede parecer absurdo. En realidad, un selector de tipo p#aviso sólo tiene sentido cuando el archivo CSS se aplica sobre muchas páginas HTML diferentes.

En este caso, algunas páginas pueden disponer de elementos con un atributo id igual a aviso y que no sean párrafos, por lo que la regla anterior no se aplica sobre esos elementos.

No debe confundirse el selector de ID con los selectores anteriores:

/* Todos los elementos de tipo "p" con atributo id="aviso" */
p#aviso { ... }
/* Todos los elementos con atributo id="aviso" que estén dentro
de cualquier elemento de tipo "p" */
p #aviso { ... }
/* Todos los elementos "p" de la página y todos los elementos con
atributo id="aviso" de la página */
p, #aviso { ... }

Combinación de selectores básicos

CSS permite la combinación de uno o más tipos de selectores para restringir el alcance de las reglas CSS. A continuación, se muestran algunos ejemplos habituales de combinación de selectores.

.aviso .especial { ... }
El anterior selector solamente selecciona aquellos elementos con un class="especial" que se encuentren dentro de cualquier elemento con un class="aviso".

Si se modifica el anterior selector:

div.aviso span.especial { ... }

Ahora, el selector solamente selecciona aquellos elementos de tipo <span> con un atributo class="especial" que estén dentro de cualquier elemento de tipo <div> que tenga un atributo class="aviso".

La combinación de selectores puede llegar a ser todo lo compleja que sea necesario:

ul#menuPrincipal li.destacado a#inicio { ... }

El anterior selector hace referencia al enlace con un atributo id igual a inicio que se encuentra dentro de un elemento de tipo <li> con un atributo class igual a destacado, que forma parte de una lista <ul> con un atributo id igual a menuPrincipal.

Selectores avanzados

Además de los selectores básicos vistos anteriormente, CSS incluye otros selectores más avanzados que permiten seleccionar elementos de la página con una precisión extrema. No obstante, la mayoría de páginas web se pueden diseñar utilizando solamente los selectores básicos.

Selectores de hijos

Selecciona los elementos que son hijos directos de otros elementos. Un elemento es hijo directo de otro cuando se encuentra inmediatamente dentro de las etiquetas de apertura y de cierre del otro elemento.

Para indicar un selector de hijos, se utiliza el símbolo de mayor que > entre las dos partes del selector. El siguiente ejemplo selecciona todos los elementos <span> que son hijos directos de un elemento <p>:

p > span { color: red; }
Si el código HTML de la página es el siguiente:

<p><span>Texto1</span></p>
<p><a href="#"><span>Texto2</span></a></p>
Resultado

Texto1

Texto2

En el siguiente ejemplo, se muestra la diferencia entre el selector descendente y el selector de hijos:

p span { color: red; }
p > span { color: blue; }

<p><span>Texto1</span></p>
<p><a href="#"><span>Texto2</span></a></p>

Resultado

Texto1

Texto2

Selectores adyacentes

Los selectores adyacentes permiten seleccionar elementos que están situados uno al lado del otro en el código HTML de la página. Para indicar un selector adyacente, se utiliza el símbolo de suma + entre las dos partes del selector. El siguiente ejemplo muestra la sintaxis de un selector adyacente:

elemento1 + elemento2 { ... }

En este caso, se seleccionan todos los elementos de tipo elemento2 que cumplan las dos siguientes condiciones:

  • elemento1 y elemento2 deben ser hermanos, por lo que su elemento padre debe ser el mismo.
  • elemento2 debe aparecer inmediatamente después de elemento1 en el código HTML de la página.

En el siguiente ejemplo:

h1 + h2 { color: red }

<body>
    <h1>Titulo1</h1>
    <h2>Subtítulo</h2>
    <h2>Otro subtítulo</h2>
</body>

Resultado

Titulo1

Subtítulo

Otro subtítulo

Las propiedades se aplican al primer elemento <h2> de la página, pero no al segundo <h2>, ya que:

  • El elemento padre de <h1> es <body>, el mismo padre que el de los dos elementos <h2>. Así, los dos elementos <h2> cumplen la primera condición del selector adyacente.
  • El primer elemento <h2> aparece en el código HTML justo después del elemento <h1>, por lo que este elemento <h2> también cumple la segunda condición del selector adyacente.
  • Por el contrario, el segundo elemento <h2> no aparece justo después del elemento <h1>, por lo que no cumple la segunda condición del selector adyacente.

El siguiente ejemplo es muy útil para los textos que se muestran como libros:

p + p { text-indent: 1.5em; }

En muchos libros, suele ser habitual que la primera línea de todos los párrafos esté indentada, salvo la primera línea del primer párrafo. Con el selector p + p, se seleccionan todos los párrafos que estén dentro del mismo elemento padre que otros párrafos y que vayan justo después de otro párrafo. En otras palabras, selecciona todos los párrafos de un elemento salvo el primer párrafo.

<body>
    <p>Primer párrafo</p>
    <p>Segundo párrafo<br>continuación del segundo párrafo.</p>
    <p>Tercer párrafo<br>continuación del tercer párrafo.</p>
</body>
Resultado

Primer párrafo

Segundo párrafo
continuación del segundo párrafo.

Tercer párrafo
continuación del tercer párrafo.

Selector de atributos

El último tipo de selectores avanzados lo forman los selectores de atributos, que permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos.

Los cuatro tipos de selectores de atributos son:

  • [nombre_atributo], selecciona los elementos que tienen establecido el atributo llamado nombre_atributo, independientemente de su valor.
  • [nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo con un valor igual a valor.
  • [nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y al menos uno de los valores del atributo es valor.
  • [nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y cuyo valor es una serie de palabras separadas con guiones, pero que comienza con valor. Este tipo de selector sólo es útil para los atributos de tipo lang que indican el idioma del contenido del elemento.
  • [nombre_atributo*=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y el valor del atributo contenga valor.
  • [nombre_atributo^=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y el valor de atributo comienza por valor.
  • [nombre_atributo$=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y el valor de atributo termina por valor.

A continuación, se muestran algunos ejemplos de estos tipos de selectores:

/* Se muestran de color azul todos los enlaces que tengan
un atributo "class", independientemente de su valor */
a[class] { color: blue; }

/* Se muestran de color azul todos los enlaces que tengan
un atributo "class" con el valor "externo" */
a[class="externo"] { color: blue; }

/* Se muestran de color azul todos los enlaces que apunten
al sitio "http://www.ejemplo.com" */
a[href="http://www.ejemplo.com"] { color: blue; }

/* Se muestran de color azul todos los enlaces que tengan
un atributo "class" en el que al menos uno de sus valores
sea "externo" */
a[class~="externo"] { color: blue; }

/* Selecciona todos los elementos de la página cuyo atributo
"lang" sea igual a "en", es decir, todos los elementos en inglés */
*[lang=en] { ... }

/* Selecciona todos los elementos de la página cuyo atributo
"lang" empiece por "es", es decir, "es", "es-ES", "es-AR", etc. */
*[lang|="es"] { color : red }

Agrupación de selectores

Cuando se crean archivos CSS complejos con decenas o cientos de reglas, es habitual que los estilos que se aplican a un mismo selector se definan en diferentes reglas:

h1 { color: red; }
...
h1 { font-size: 2em; }
...
h1 { font-family: Verdana; }

Las tres reglas anteriores establecen el valor de tres propiedades diferentes de los elementos <h1>. Antes de que el navegador muestre la página, procesa todas las reglas CSS de la página para tener en cuenta todos los estilos definidos para cada elemento.

Cuando el selector de dos o más reglas CSS es idéntico, se pueden agrupar las declaraciones de las reglas para hacer las hojas de estilos más eficientes:

h1 {color: red;
    font-size: 2em;
    font-family: Verdana;}

El ejemplo anterior tiene el mismo efecto que las tres reglas anteriores, pero es más eficiente y es más fácil de modificar y mantener por parte de los diseñadores. Como CSS ignora los espacios en blanco y las nuevas líneas, también se pueden agrupar las reglas de la siguiente forma:

h1 { color: red; font-size: 2em; font-family: Verdana; }

Si se quiere reducir al máximo el tamaño del archivo CSS para mejorar ligeramente el tiempo de carga de la página web, también es posible indicar la regla anterior de la siguiente forma:

h1 {color:red;font-size:2em;font-family:Verdana;}

Ha este proceso de eliminar espacios y saltos de línea para mejorar el tiempo de carga se le llama minificar.

Herencia

Uno de los conceptos más característicos de CSS es la herencia de los estilos definidos para los elementos. Cuando se establece el valor de alguna propiedad en un elemento, todos sus descendientes heredan inicialmente ese mismo valor.

Si se indica, por ejemplo, un color de letra al elemento <body> de una página, todos los elementos de la página mostrarán ese mismo color de letra, salvo que se indique lo contrario:

body { font-family: Arial; color: blue; }
h1 { font-family: Verdana; }
p { color: red; }

<body>
    <h1>Titular de la página</h1>
    <p>Un párrafo de texto no muy largo.</p>
    <h2>Subtítulo</h2>
    <p>Otro párrafo de texto.</p>
</body>

Resultado

Titular de la página

Un párrafo de texto no muy largo.

Subtítulo

Otro párrafo de texto.

Colisiones de estilos

En las hojas de estilos complejas, es habitual que varias reglas CSS se apliquen a un mismo elemento HTML. El problema de estas reglas múltiples es que se pueden dar colisiones como la del siguiente ejemplo:

p { color: red; }
p { color: blue; }

<p>Párrafo 1.</p>

¿De qué color se muestra el párrafo anterior? CSS tiene un mecanismo de resolución de colisiones muy complejo y que tiene en cuenta el tipo de hoja de estilo que se trate (de navegador, de usuario o de diseñador), la importancia de cada regla y lo específico que sea el selector.

Resultado

Párrafo 1.

Por defecto, cuando dos reglas CSS de igual origen e importancia se aplican a un mismo elemento, prevalece la regla que aparece en último lugar en el archivo CSS. En el ejemplo anterior, ambas reglas tienen el mismo origen (hoja de estilo del diseñador) y la misma importancia (ninguna regla utiliza la palabra clave !important), por lo que prevalece la segunda regla y el párrafo se muestra de color azul.

En el siguiente ejemplo, la regla CSS que prevalece se decide por lo específico que es cada selector:

p { color: red; }
p#especial { color: green; }
* { color: blue; }

<p id="especial">Párrafo 1.</p>

Resultado

Párrafo 1.

En el ejemplo anterior, las tres reglas CSS se aplican al mismo elemento. La primera regla selecciona todos los elementos <p>, la segunda regla selecciona solamente el elemento <p> con un atributo id igual a especial y la tercera regla selecciona todos los elementos de la página. Como la segunda regla es la más específica de las tres, es la que prevalece y el párrafo se muestra de color verde.

Unidades de medida y colores

CSS es tan flexible que permite definir los tamaños y colores de las propiedades utilizando diferentes unidades de medida y formatos de color. A continuación, se muestran las unidades de medida y los formatos de color más habituales en CSS.

Unidades de medida

Todas las medidas en CSS deben ir acompañadas de una unidad de medida sin espacios en blanco entre el valor numérico y la unidad. Si el valor es cero, no es necesario indicar la unidad de medida. Por ejemplo, las siguientes formas de indicar un tamaño de 15 píxeles son correctas:

elemento { width: 15px; }
elemento { width: 0; }

CSS dispone de dos tipos de unidades de medida: absolutas y relativas.

Unidades relativas

Las unidades relativas permiten definir tamaños en función de otros tamaños ya definidos en la página. Las unidades relativas más habituales son:

  • em: unidad relativa al tamaño de letra del elemento padre. Por ejemplo, si el tamaño de letra del elemento padre es de 16 píxeles, 1em equivale a 16 píxeles, 2em equivale a 32 píxeles, etc. 1em es igual al tamaño de letra por defecto de los navegadores, que suele ser 16 píxeles.
  • %: unidad relativa al tamaño del elemento padre. Por ejemplo, si el ancho del elemento padre es de 800 píxeles, un ancho del 50% equivale a 400 píxeles, un ancho del 25% equivale a 200 píxeles, etc.

Los siguientes ejemplos muestran el uso de las unidades relativas:

elemento { font-size: 1.5em; }
elemento { width: 75%; }
El primer ejemplo establece un tamaño de letra igual a 1.5 veces el tamaño de letra del elemento padre. Si el tamaño de letra del elemento padre es de 16 píxeles, el tamaño de letra del elemento será de 24 píxeles. El segundo ejemplo establece un ancho igual al 75% del ancho del elemento padre. Si el ancho del elemento padre es de 800 píxeles, el ancho del elemento será de 600 píxeles.

Las unidades relativas son las más utilizadas en CSS, ya que permiten crear páginas web adaptables a diferentes tamaños de pantalla y resoluciones. Cuando se utilizan unidades relativas, los elementos de la página se adaptan automáticamente al tamaño del dispositivo en el que se muestran.

Unidades absolutas

Las unidades absolutas permiten definir tamaños fijos e invariables. Las unidades absolutas más habituales son:

  • 'in': pulgadas. 1 pulgada equivale a 2.54 centímetros.
  • 'cm': centímetros.
  • 'mm': milímetros.
  • 'pt': puntos tipográficos. 1 punto equivale a 1/72 de pulgada, es decir, aproximadamente 0.35 milímetros.
  • 'pc': picas. 1 pica equivale a 12 puntos tipográficos, es decir, aproximadamente 4.23 milímetros.
  • 'px': píxeles. Un píxel es la unidad de medida más pequeña que puede mostrar una pantalla. Es la unidad de medida absoluta más utilizada en CSS.

Aunque los px es una unidad de medida absoluta, su tamaño real puede variar en función de la resolución de la pantalla en la que se muestra la página web. Por ejemplo, en una pantalla con una resolución de 96 píxeles por pulgada (ppp), un píxel equivale a aproximadamente 0.26 milímetros, mientras que en una pantalla con una resolución de 192 ppp, un píxel equivale a aproximadamente 0.13 milímetros. Se considera como unidad de medida absoluta porque su tamaño no depende de ningún otro tamaño definido en la página web.

Se recomienda el uso de unidades relativas para definir tamaños en CSS, ya que permiten crear páginas web adaptables a diferentes tamaños de pantalla y resoluciones. No obstante, en algunos casos es necesario utilizar unidades absolutas para definir tamaños fijos e invariables.

Normalmente se utilizan pixeles o porcentajes para definir el layout de la página y unidades relativas para definir tamaños de letra y otros elementos que deben adaptarse al tamaño de pantalla.

Colores

CSS permite definir colores utilizando diferentes formatos. Los formatos de color más habituales son:

  • Palabras clave.
  • RGB hexadecimal.
  • RGB decimal.
  • RGB porcentual.

Es habitual utilizar los formatos RGB hexadecimal y las palabras clave para definir colores en CSS.

Palabras clave

CSS dispone de una lista de palabras clave que representan colores predefinidos. Algunas de las palabras clave más habituales son:

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow

Colores.
Colores.

Este formato de color es muy sencillo de utilizar, pero tiene la limitación de disponer de un número reducido de colores predefinidos.

RGB hexadecimal

El formato RGB hexadecimal permite definir colores utilizando el modelo de color RGB (Red, Green, Blue). En este modelo, un color se define mediante la combinación de tres colores primarios: rojo, verde y azul. Cada uno de estos colores se representa mediante un valor hexadecimal de dos dígitos que va desde 00 (valor mínimo) hasta FF (valor máximo).

El formato RGB hexadecimal se escribe de la siguiente forma:

p { color: #RRGGBB; }
Donde RR representa el valor del color rojo, GG representa el valor del color verde y BB representa el valor del color azul. Por ejemplo, el color rojo se representa mediante el valor #FF0000, el color verde mediante el valor #00FF00 y el color azul mediante el valor #0000FF.

Una ventaja del formato RGB hexadecimal es que permite definir una amplia gama de colores (más de 16 millones de colores diferentes). Además, permite simplificar la escritura de algunos colores cuando los valores de los tres colores primarios son iguales. En este caso, se pueden utilizar solamente tres dígitos en lugar de seis. Por ejemplo, el color gris claro se puede representar mediante el valor #CCCCCC o mediante el valor simplificado #CCC. Del mismo modo,#AA00FF se puede simplificar como #A0F.

RGB decimal

El formato RGB decimal es similar al formato RGB hexadecimal, pero en lugar de utilizar valores hexadecimales, utiliza valores decimales que van desde 0 (valor mínimo) hasta 255 (valor máximo). El formato RGB decimal se escribe de la siguiente forma:

p { color: rgb(R, G, B); }

Donde R representa el valor del color rojo, G representa el valor del color verde y B representa el valor del color azul. Por ejemplo, el color rojo se representa mediante el valor rgb(255, 0, 0), el color verde mediante el valor rgb(0, 255, 0) y el color azul mediante el valor rgb(0, 0, 255).

RGB porcentual

El formato RGB porcentual es similar al formato RGB decimal, pero en lugar de utilizar valores decimales, utiliza valores porcentuales que van desde 0% (valor mínimo) hasta 100% (valor máximo). El formato RGB porcentual se escribe de la siguiente forma:

p { color: rgb(R%, G%, B%); }
Donde R% representa el valor del color rojo, G% representa el valor del color verde y B% representa el valor del color azul. Por ejemplo, el color rojo se representa mediante el valor rgb(100%, 0%, 0%), el color verde mediante el valor rgb(0%, 100%, 0%) y el color azul mediante el valor rgb(0%, 0%, 100%).

Modelo de cajas (box model)

El modelo de cajas o "box model" es seguramente la característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. El "box model" es el comportamiento de CSS que hace que todos los elementos incluidos en una página HTML se representen mediante cajas rectangulares. CSS permite controlar el aspecto de todas las cajas.

El diseño de cualquier página HTML está compuesto por cajas rectangulares. CSS permite definir la altura y anchura de cada caja, el margen existente entre cajas y el espacio de relleno interior que muestra cada caja. Además, CSS permite controlar la forma en la que se visualizan las cajas: se pueden ocultar, desplazar respecto de su posición original y fijarlas en una posición específica dentro del documento.

Como la mayoría de cajas de las páginas web no muestran ningún color de fondo ni ningún borde, no son visibles a simple vista. La siguiente imagen muestra las cajas que forman la página web de https://www.google.es después de forzar a que todas las cajas muestren un borde solido rojo:

* {
    outline: 1px solid red;
}
Modelo de cajas.
Modelo de cajas.

Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta o elemento en la página, se crea una nueva caja rectangular que encierra los contenidos del elemento. El siguiente esquema muestra la creación automática de cajas por parte de HTML para cada elemento definido en el código HTML de la página:

Modelo de cajas.
Modelo de cajas.

Cada una de las cajas está formada por seis partes, tal y como se muestra en la siguiente imagen:

Partes de una caja.
Partes de una caja.

Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:

  • Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.)
  • Relleno (padding): espacio libre opcional entre el contenido y el borde que lo encierra.
  • Borde (border): línea que encierra completamente el contenido y su relleno.
  • Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno.
  • Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno.
  • Margen (margin): espacio libre entre la caja y las posibles cajas adyacentes.

El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno se muestra el color o imagen de fondo (si están definidos) y en el espacio ocupado por el margen se muestra el color o imagen de fondo de su elemento padre (si están definidos). Si ningún elemento padre tiene definido un color o imagen de fondo, se muestra el color o imagen de fondo de la propia página (si están definidos).

Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad y es la que se visualiza. No obstante, si la imagen de fondo no cubre totalmente la caja del elemento o si la imagen tiene zonas transparentes, también se visualiza el color de fondo. Combinando imágenes transparentes y colores de fondo se pueden lograr efectos gráficos muy interesantes.

Anchura y altura

Anchura - width

La propiedad width permite definir la anchura de una caja. Por defecto, la anchura de una caja es automática y se adapta al contenido que muestra. No obstante, es posible definir una anchura fija utilizando la propiedad width.

Los valores más habituales para la propiedad width son: * Un valor en píxeles (px), que define una anchura fija e invariable. * Un valor en porcentaje (%), que define una anchura relativa al ancho del elemento padre. * La palabra clave auto, que indica que la anchura de la caja se adapta automáticamente al contenido que muestra. * La palabra clave inherit, que indica que la anchura de la caja es igual a la anchura del elemento padre.

El siguiente ejemplo establece una anchura fija de 400 píxeles para el elemento <div> con id igual a contenido :

#contenido { width: 400px; }

<div id="contenido">
    <p>Este es un párrafo de texto dentro del div contenido.</p>
</div>

Resultado

Este es un párrafo de texto dentro del div contenido.

Altura - height

La propiedad height permite definir la altura de una caja. Por defecto, la altura de una caja es automática y se adapta al contenido que muestra. No obstante, es posible definir una altura fija utilizando la propiedad height.

Los valores más habituales para la propiedad height son: * Un valor en píxeles (px), que define una altura fija e invariable. * Un valor en porcentaje (%), que define una altura relativa a la altura del elemento padre. * La palabra clave auto, que indica que la altura de la caja se adapta automáticamente al contenido que muestra. * La palabra clave inherit, que indica que la altura de la caja es igual a la altura del elemento padre.

El siguiente ejemplo establece una altura fija de 200 píxeles para el elemento <div> con id igual a contenido:

#contenido { height: 200px; }

<div id="contenido">
    <p>Este es un párrafo de texto dentro del div contenido.</p>
</div>

Resultado

Este es un párrafo de texto dentro del div contenido.

Margen y relleno

Margen - margin

La propiedad margin permite definir el espacio libre que existe entre una caja y las cajas adyacentes. El margen es transparente, por lo que en el espacio ocupado por el margen se muestra el color o imagen de fondo del elemento padre (si están definidos).

El margen se puede definir de forma individual para cada uno de los cuatro lados de la caja:

  • margin-top: margen superior.
  • margin-right: margen derecho.
  • margin-bottom: margen inferior.
  • margin-left: margen izquierdo.
Relleno (padding) y margen (margin).
Relleno (padding) y margen (margin).

Los valores más habituales para la propiedad margin son:

  • Un valor en píxeles (px), que define un margen fijo e invariable.
  • Un valor en porcentaje (%), que define un margen relativo al ancho del elemento padre.
  • La palabra clave auto, que indica que el margen se adapta automáticamente para centrar la caja dentro del elemento padre.
  • La palabra clave inherit, que indica que el margen de la caja es igual al margen del elemento padre.

El valor por defecto del margen es 0, por lo que si no se define ningún margen, la caja no dispone de espacio libre alrededor.

El siguiente ejemplo establece un margen derecho de 50 píxeles para el elemento <p> con id igual a contenido:

#contenido { margin-right: 50px; }

<p id="contenido">Este es un párrafo de texto.</p>
Resultado

Este es un párrafo de texto.

Los márgenes verticales margin-top y margin-bottom sólo se pueden aplicar a los elementos de bloque y las imágenes, mientras que el resto de márgenes se pueden aplicar a cualquier elemento HTML.

a { margin: 20px; }
p { margin: 20px; }

<a href="#">Enlace 1</a>
<a href="#">Enlace 2</a>
<br>
<a href="#">Enlace 3</a>
<a href="#">Enlace 4</a>

<p>Párrafo 1</p>
<p>Párrafo 1</p>

Resultado

Enlace 1 Enlace 2
Enlace 3 Enlace 4

Párrafo 1

Párrafo 1

Podemos apreciar que los enlaces no tienen margen vertical, mientras que los párrafos sí lo tienen.

En el ejercicio anterior, se ha utilizado la propiedad margin para definir el margen de los cuatro lados de la caja al mismo tiempo. No obstante, también es posible definir el margen de los cuatro lados en una sola declaración utilizando la propiedad margin de la siguiente forma:

elemento { margin: arriba derecha abajo izquierda; }
Donde arriba, derecha, abajo e izquierda son los valores del margen para cada uno de los cuatro lados de la caja. Por ejemplo:

#contenido { margin: 10px 20px 30px 40px; }
El ejemplo anterior establece un margen superior de 10 píxeles, un margen derecho de 20 píxeles, un margen inferior de 30 píxeles y un margen izquierdo de 40 píxeles para el elemento con id igual a contenido.

De forma alternativa, también es posible definir el margen de los cuatro lados utilizando dos o tres valores:

  • Si se utilizan dos valores, el primer valor define el margen superior e inferior y el segundo valor define el margen derecho e izquierdo:
#contenido { margin: 10px 20px; }
  • Si se utilizan tres valores, el primer valor define el margen superior, el segundo valor define el margen derecho e izquierdo y el tercer valor define el margen inferior:
#contenido { margin: 10px 20px 30px; }

Relleno - padding

La propiedad padding permite definir el espacio libre que existe entre el contenido de una caja y el borde que lo encierra. El relleno es transparente, por lo que en el espacio ocupado por el relleno se muestra el color o imagen de fondo del propio elemento (si están definidos).

El relleno se puede definir de forma individual para cada uno de los cuatro lados de la caja:

  • padding-top: relleno superior.
  • padding-right: relleno derecho.
  • padding-bottom: relleno inferior.
  • padding-left: relleno izquierdo.
Relleno (padding) y margen (margin).
Relleno (padding) y margen (margin).

Los valores más habituales para la propiedad padding son: * Un valor en píxeles (px), que define un relleno fijo e invariable. * Un valor en porcentaje (%), que define un relleno relativo al ancho del elemento padre. * La palabra clave inherit, que indica que el relleno de la caja es igual al relleno del elemento padre.

El valor por defecto del relleno es 0, por lo que si no se define ningún relleno, el contenido de la caja se muestra justo al lado del borde que lo encierra.

El siguiente ejemplo establece un relleno izquierdo de 50 píxeles para el elemento <p> con id igual a contenido:

#contenido { padding-left: 50px; }

<p id="contenido">Este es un párrafo de texto.</p>
Resultado

Este es un párrafo de texto.

Al igual que con el margen, es posible definir el relleno de los cuatro lados en una sola declaración utilizando la propiedad padding de la siguiente forma:

elemento { padding: arriba derecha abajo izquierda; }
Donde arriba, derecha, abajo e izquierda son los valores del relleno para cada uno de los cuatro lados de la caja. Por ejemplo:

#contenido { padding: 10px 20px 30px 40px; }
El ejemplo anterior establece un relleno superior de 10 píxeles, un relleno derecho de 20 píxeles, un relleno inferior de 30 píxeles y un relleno izquierdo de 40 píxeles para el elemento con id igual a contenido.

De forma alternativa, también es posible definir el relleno de los cuatro lados utilizando dos o tres valores:

  • Si se utilizan dos valores, el primer valor define el relleno superior e inferior y el segundo valor define el relleno derecho e izquierdo:
#contenido { padding: 10px 20px; }
  • Si se utilizan tres valores, el primer valor define el relleno superior, el segundo valor define el relleno derecho e izquierdo y el tercer valor define el relleno inferior:
#contenido { padding: 10px 20px 30px; }

Bordes - border

La propiedad border permite definir el borde que encierra una caja. El borde se muestra entre el contenido y el margen de la caja.

Los valores más habituales para la propiedad border son:

  • Un valor en píxeles (px), que define el grosor del borde.
  • La palabra clave none, que indica que la caja no tiene borde.
  • La palabra clave solid, que indica que el borde es una línea continua.
  • La palabra clave dashed, que indica que el borde es una línea discontinua formada por guiones.
  • La palabra clave dotted, que indica que el borde es una línea discontinua formada por puntos.
  • La palabra clave inherit, que indica que el borde de la caja es igual al borde del elemento padre.
  • Un valor de color, que define el color del borde.

La medida por defecto del borde es none, por lo que si no se define ningún borde, la caja no muestra ningún borde alrededor.

La sintaxis para definir el borde de una caja utilizando la propiedad border es la siguiente:

elemento { border: grosor estilo color; }

El siguiente ejemplo establece un borde sólido de 2 píxeles de grosor y de color rojo para el elemento <p> con id igual a contenido:

#contenido { border: 2px solid red; }

<p id="contenido">Este es un párrafo de texto.</p>
Resultado

Este es un párrafo de texto.

De forma alternativa, es posible definir el borde de los cuatro lados de una caja de forma individual utilizando las siguientes propiedades:

  • border-top: borde superior.
  • border-right: borde derecho.
  • border-bottom: borde inferior.
  • border-left: borde izquierdo.

También es posible definir cada una de las características del borde (grosor, estilo y color) de forma individual utilizando las siguientes propiedades:

  • border-width: grosor del borde.
  • border-style: estilo del borde.
  • border-color: color del borde.

Y de la misma forma, es posible definir cada una de las características del borde de cada uno de los cuatro lados de la caja utilizando las siguientes propiedades:

  • border-top-width, border-right-width, border-bottom-width, border-left-width: grosor del borde.
  • border-top-style, border-right-style, border-bottom-style, border-left-style: estilo del borde.
  • border-top-color, border-right-color, border-bottom-color, border-left-color: color del borde.

El siguiente ejemplo establece un borde superior sólido de 5 píxeles de grosor y de color azul para el elemento <p> con id igual a contenido:

#contenido {
    border-top-width: 5px;
    border-top-style: solid;
    border-top-color: blue;
}

<p id="contenido">Este es un párrafo de texto.</p>

Resultado

Este es un párrafo de texto.

Para los estilos de borde más complejos, es habitual utilizar la propiedad border para definir el borde de los cuatro lados de la caja y utilizar las propiedades individuales para modificar alguna característica concreta de alguno de los lados del borde.

#contenido {
    border: 2px solid red;
    border-top-color: blue;
    border-bottom-style: dashed;
}

<p id="contenido">Este es un párrafo de texto.</p>

Resultado

Este es un párrafo de texto.

Cálculo de dimensiones de una caja

La anchura y altura de un elemento no solamente se calculan teniendo en cuenta sus propiedades width y height. El margen, el relleno y los bordes establecidos a un elemento determinan la anchura y altura final del elemento. En el siguiente ejemplo se muestran los estilos CSS de un elemento:

div {
    width: 300px;
    padding-left:  50px;
    padding-right: 50px;
    margin-left:   30px;
    margin-right:  30px;
    border: 10px solid black;
  }

La anchura total con la que se muestra el elemento no son los 300 píxel indicados en la propiedad width, sino que también se añaden todos sus márgenes, rellenos y bordes:

Cálculo de dimensiones de una caja.
Cálculo de dimensiones de una caja.

De esta forma, la anchura del elemento en pantalla sería igual a la suma de la anchura original, los márgenes, los bordes y los rellenos:

Anchura total = width + margin-left + margin-right + border-left + border-right + padding-left + padding-right

Anchura total = 30px + 10px + 50px + 300px + 50px + 10px + 30px = 480px

Fondos - background

La propiedad background permite definir el fondo de una caja. El fondo se muestra detrás del contenido y del espacio de relleno de la caja. El fondo no se muestra en el espacio ocupado por el margen de la caja.

Existen propiedades específicas para definir el color, imagen, posición y repetición del fondo de una caja:

  • background-color: permite definir el color de fondo de la caja.
  • background-image: permite definir una imagen de fondo para la caja.
  • background-position: permite definir la posición de la imagen de fondo dentro de la caja.
  • background-repeat: permite definir si la imagen de fondo se repite o no dentro de la caja.

Color de fondo - background-color

La propiedad background-color permite definir el color de fondo de una caja. El valor más habitual para la propiedad background-color es un valor de color en formato hexadecimal o una palabra clave que representa un color predefinido.

El siguiente ejemplo establece un color de fondo azul para el elemento <p> con id igual a contenido:

#contenido { background-color: blue; }

<p id="contenido">Este es un párrafo de texto.</p>
Resultado

Este es un párrafo de texto.

Imagen de fondo - background-image

La propiedad background-image permite definir una imagen de fondo para una caja. El valor más habitual para la propiedad background-image es la función url(), que permite especificar la URL de la imagen que se quiere utilizar como fondo.

El siguiente ejemplo establece una imagen de fondo para el elemento <div> con id igual a contenido:

#contenido { background-image: url('image.png'); }

<div id="contenido">
    <p>Este es un párrafo de texto dentro del div contenido.</p>
</div>

Resultado

Este es un párrafo de texto dentro del div contenido.

Imagen de fondo - background-repeat

Por defecto, cuando se define una imagen de fondo para una caja, la imagen se repite tanto en horizontal como en vertical para cubrir toda la superficie del fondo de la caja. No obstante, es posible modificar este comportamiento utilizando la propiedad background-repeat. Los valores más habituales para la propiedad background-repeat son:

  • repeat: la imagen se repite tanto en horizontal como en vertical (valor por defecto).
  • repeat-x: la imagen se repite solamente en horizontal.
  • repeat-y: la imagen se repite solamente en vertical.
  • no-repeat: la imagen no se repite.
  • inherit: la imagen de fondo de la caja es igual a la imagen de fondo del elemento padre.

#contenido {
    background-image: url('image.png');
    background-repeat: no-repeat;
}

<div id="contenido">
    <p>Este es un párrafo de texto dentro del div contenido.</p>
</div>

Resultado

Este es un párrafo de texto dentro del div contenido.

Imagen de fondo - background-position

La propiedad background-position permite definir la posición de la imagen de fondo dentro de la caja. Los valores más habituales para la propiedad background-position son:

  • Dos valores en píxeles (px) o en porcentaje (%), que definen la posición horizontal y vertical de la imagen de fondo dentro de la caja.
  • Palabras clave que definen posiciones predefinidas dentro de la caja: left, center, right, top, bottom.
  • La palabra clave inherit, que indica que la posición de la imagen de fondo de la caja es igual a la posición de la imagen de fondo del elemento padre.

#contenido {
    background-image: url('image.png');
    background-repeat: no-repeat;
    background-position: right bottom;
}

<div id="contenido">
    <p>Este es un párrafo de texto dentro del div contenido.</p>
</div>

Resultado

Este es un párrafo de texto dentro del div contenido.

De la misma forma que con el resto de propiedades de una caja, es posible definir todas las propiedades del fondo en una sola declaración utilizando la propiedad background de la siguiente forma:

elemento { background: color imagen posición repetición; }

Actividades

A3.1 Selectores básicos

A partir de la página web que se te proporciona, debes añadir los selectores a las reglas CSS para aplicar los estilos deseados y crear una página web que tenga el mismo aspecto que la siguiente imagen.

Cada regla CSS incluye un comentario en el que se explica los elementos a los que debe aplicarse.

Contenido | Imagen

A3.2 Selectores avanzados

A partir de la hoja de estilos CSS que se te proporciona, debes añadir los selectores avanzados para seleccionar los elementos indicados.

Contenido

A3.3 Márgenes y rellenos

A partir del código HTML proporcionado, añadir las reglas CSS necesarias para añadir los siguientes márgenes y rellenos:

  1. El elemento #cabecera debe tener un relleno de 1em en todos los lados.
  2. El elemento #menu debe tener un relleno de 0.5em en todos los lados y un margen inferior de 0.5em.
  3. El resto de elementos (#noticias, #publicidad, #principal, #secundario) deben tener 0.5em de relleno en todos sus lados, salvo el elemento #pie, que sólo debe tener relleno en la zona superior e inferior.
  4. Los elementos .articulo deben mostrar una separación entre ellos de 1em.
  5. Las imágenes de los artículos muestran un margen de 0.5em en todos sus lados.
  6. El elemento #publicidad está separado 1em de su elemento superior.
  7. El elemento #pie debe tener un margen superior de 1em.

Contenido | Imagen

A3.4 Bordes

A partir del código HTML y CSS proporcionados, determinar las reglas CSS necesarias para añadir los siguientes bordes:

  1. Eliminar el borde gris que muestran por defecto todos los elementos.
  2. El elemento #menu debe tener un borde inferior de 1 píxel y azul #004C99.
  3. El elemento #noticias muestra un borde de 1 píxel y gris claro #C5C5C5.
  4. El elemento #publicidad debe mostrar un borde discontinuo de 1 píxel y de color #CC6600.
  5. El lateral formado por el elemento #secundario muestra un borde de 1 píxel y de color #CC6600.
  6. El elemento #pie debe mostrar un borde superior y otro inferior de 1 píxel y color gris claro #C5C5C5.

Contenido | Imagen

A3.5 Fondos

A partir del código HTML y CSS proporcionados, determinar las reglas CSS necesarias para añadir los siguientes colores e imágenes de fondo:

  1. Los elementos #noticias y #pie tiene un color de fondo gris claro #F8F8F8.
  2. El elemento #publicidad muestra un color de fondo amarillo claro #FFF6CD.
  3. Los elementos <h2> del lateral #secundario muestran un color de fondo #DB905C y un pequeño padding de .2em.
  4. El fondo del elemento #menu se construye mediante una pequeña imagen llamada fondo_menu.gif.
  5. El logotipo del sitio se muestra mediante una imagen de fondo del elemento <h1> contenido en el elemento #cabecera (la imagen se llama logo.gif).

Contenido | Imagen

Juegos

Para practicar los conceptos aprendidos en esta unidad, puedes utilizar los siguientes juegos interactivos: