El CSS es un lenguaje de diseño gráfico que permite aplicar estilos al HTML. Sus siglas significan «hojas de estilo en cascada» (traducción del inglés Cascading Style Sheets). Este lenguaje es muy utilizado para establecer la apariencia visual de una página web. Se recomienda aprenderlo para trabajar con HTML.
Gracias al CSS es posible definir el color de los elementos HTML, ya sea el color de fondo, de los bordes, de las sombras o del texto. También es posible definir el espaciado y el alineamiento de los elementos, configurar las fuentes y todo lo que tenga que ver con la apariencia y el diseño de una página web.
Hay tres maneras de añadir código CSS en un documento HTML. Una de ellas es usar el atributo style para insertar el código de forma directa. Otra es usando el elemento <style>; debe ir dentro de <head>. Pero la forma recomendada es enlazando un archivo CSS externo con el elemento <link>.
- CSS en línea: mediante el atributo
style. - CSS interno: mediante el elemento
<style>. - CSS externo: mediante el elemento
<link>.
Nota de autor: en este artículo usamos estilos en línea (atributo style) para demostrar lo que se explica. No obstante, se recomienda usar el método externo: enlazar un archivo de estilos CSS con el elemento <link>.
Lista de atributos descritos en este artículo:
| Elemento | Descripción |
|---|---|
style | Para insertar código CSS en línea, sobre un elemento HTML. |
Lista de elementos descritos en este artículo:
| Elemento | Descripción |
|---|---|
<style> | Para insertar código CSS en el documento actual. |
<link> | Para incrustar un recurso externo con código CSS. |
CSS en línea: atributo ‘style’
El atributo style permite insertar estilos CSS de forma directa sobre un elemento HTML en concreto. Sin embargo, esta opción no es recomendable, ya que dificulta el mantenimiento del código y pierde la capacidad de aplicarse en cascada. Es útil en casos concretos; por ejemplo, para insertar estilos muy puntuales.
Ejemplo de código HTML insertando CSS en línea:
<p style="color: red">Párrafo de color rojo.</p>
El resultado será un párrafo de color rojo:
Párrafo de color rojo.
CSS interno: elemento <style>
Para añadir estilos CSS de forma interna se usa el elemento <style>. Los estilos se aplicarán cuando el documento se haya cargado. Tiene la ventaja de evitar una petición HTTP, pero dificulta el mantenimiento del sitio web. Puede ir situado en cualquier parte del documento HTML: dentro y fuera de <head>.
Este elemento tiene dos etiquetas: <style> (de apertura) y </style> (de cierre). Su contenido debe ser código CSS. Para usar este método se deben usar los selectores CSS para aplicar estilos a los elementos HTML que se encuentren en el documento. Los selectores están descritos al final de este artículo.
Ejemplo de código HTML de uso del elemento <style>:
<html>
<head>
<style>
p { color: blue }
</style>
</head>
<body>
<p>Párrafo azul.</p>
</body>
</html>
CSS externo: elemento <link>
Para añadir estilos CSS de forma externa se usa el elemento <link> dentro del elemento <head> del mismo documento HTML. Este elemento puede enlazar varios tipos de recursos. El tipo de recurso enlazado se indica mediante el atributo rel, y en el caso que nos ocupa su valor será stylesheet.
Ejemplo de código HTML de uso del elemento <link>:
<link rel='stylesheet' href='estilos.css'>
El elemento <link> está explicado de forma completa en un artículo específico. Pero para el presente artículo se describen únicamente los atributos que conciernen al CSS. Por tanto, además del atributo rel y su valor stylesheet, es conveniente conocer como mínimo los atributos siguientes.
| Atributo | Descripción |
|---|---|
rel | Indica el tipo de recurso enlazado. En este caso debe ser stylesheet. |
href | La dirección URL del recurso enlazado. |
media | Indica una lista de los tipos de medio (media types) para los cuales el recurso ha sido diseñado. Por defecto: all (todos). Otros valores pueden ser: print (impresora) o screen (pantallas). |
type | El tipo de medio (Mime Type) que se enlaza. En este caso su valor será text/css. |
Selectores CSS
Los métodos interno y externo para añadir CSS hacen uso de los selectores CSS. Existen tres tipos de selectores para hacer referencia a los elementos de un documento HTML: el atributo id, el atributo class y los selectores de tipo (equivalente al nombre de los elementos HTML).
El atributo ‘id’
El atributo id permite establecer un identificador único de un elemento HTML. No debe existir otro elemento con el mismo identificador en el documento HTML. Este identificador se puede usar como selector CSS para aplicar estilos en cascada, pero también puede usarse para programar aplicaciones con JavaScript.
Ejemplo de código HTML declarando un identificador único en un elemento:
<p id='foo'>Esto es un párrafo.</p>
Ejemplo de código CSS usando el atributo id como selector:
#foo { color: red }
Cuando se usa el valor del atributo id como selector CSS, debe hacerse con el prefijo #. Este selector es el que tiene más peso o prioridad entre todos los selectores CSS. Lo recomendable es usar este atributo para programar interactividad de elementos, y usar el atributo class para aplicar estilos.
El atributo ‘class’
El atributo class permite definir conjuntos de estilos CSS sobre todos aquellos elementos que tengan el mismo valor. Por ejemplo, podemos crear una clase con el valor centrado y aplicarle un diseño de texto centrado, de modo que todos los elementos con esta clase aparecerán con el texto centrado.
Ejemplo de código HTML declarando una clase en un elemento:
<p class='texto_antiguo'>Esto es un párrafo con texto centrado.</p>
Ejemplo de código CSS usando el atributo class como selector:
.centrado { text-align: center }
Tal y como se puede observar, cuando se usa el valor del atributo class como selector CSS, debe hacerse con el prefijo .. Este selector tiene un peso medio, es decir, que su prioridad está por debajo de la del selector de identificador (id) y por encima de los selectores de tipo (nombres de elementos).
Selectores de tipo
Los selectores de tipo permiten seleccionar elementos o hacer referencia a ellos a través del nombre del interior de su etiqueta. Por ejemplo, para aplicar estilos a todos los párrafos el selector será p, ya que el elemento de los párrafos es <p>. Así es posible aplicar estilos CSS a todos los elementos del mismo tipo.
La sintaxis CSS es la siguiente:
elemento { propiedades de estilo CSS }
Ejemplos de código CSS usando selectores de tipo:
p { color: blue }
em { color: green }
span { background: yellow }
Con el ejemplo anterior, los párrafos (<p>) se verían de color azul, los elementos con énfasis (<em>) se verían de color verde y los elementos de agrupación de varios elementos en línea (<span>) tendrían el fondo amarillo.
