Inicio Hojas de estilo CSS
Artículo
Cancelar

Hojas de estilo CSS

2024-09-05 Actualizado 2024-10-30 11 minutos lectura

Introducción

Las hojas de estilo en cascada (CSS, Cascading Style Sheets) son un estándar W3C que define la presentación de los documentos Web, es decir, el modo en el que se muestra un documento en pantalla o se suministra al usuario, ya sea por el monitor, en la pantalla del teléfono móvil o leído por un lector de pantalla. Lo más importante es que con CSS se mantienen las instrucciones de presentación separadas del contenido del documento HTML.

(Voluntario) Mira el siguiente vídeo:

Ventajas de usar CSS

  • Mayor control en el diseño de las páginas: Se puede llegar a diseños fuera del alcance de HTML.
  • Menos trabajo: Se puede cambiar el estilo de todo un sitio con la modificación de un único archivo.
  • Documentos más pequeños: Las etiquetas <font> y la gran cantidad de tablas empleadas para dar una buena apariencia a los sitios web desaparecen ahora, por lo que se ahorra código en la configuración de la presentación del sitio.
  • Documentos mucho más estructurados: Los documentos bien estructurados son accesibles a más dispositivos y usuarios.
  • El HTML de presentación está en vías de desaparecer: Todos los elementos y atributos de presentación de las especificaciones HTML fueron declarados obsoletos por el W3C.
  • Tiene buen soporte: En este momento, casi todos los navegadores soportan casi toda la especificación CSS1, CSS2 y CSS3.

¿Cómo funciona CSS?

  1. Hay que comenzar con un documento HTML. En teoría, el documento tendrá una estructura lógica y un significado semántico a través de los elementos HTML adecuados. Con HTML se crea la estructura de la página web.
  2. Luego hay que escribir las reglas de estilo para definir el aspecto ideal de todos los elementos. Las reglas seleccionan el elemento en cuestión por su nombre y, a continuación, listan las propiedades (fuente, color, etc.) y los valores que se le van a aplicar.
  3. Por último, hay que vincular los estilos al documento. Las reglas de estilo pueden reunirse en un documento independiente y aplicarse a todo el sitio, o pueden aparecer en la cabecera y aplicarse solo a ese documento.

¿Qué crees que hace el siguiente código?

1
2
3
4
5
6
7
8
9
10
11
12
13

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

color: white; pondrá el texto en blanco.

Estructura de las reglas CSS

Todas las reglas CSS siguen misma estructura:

1
2
3
4
5
6

<selector> {
  <propiedad> : <valor>;
  <propiedad> : <valor>;
  <propiedad> : <valor>;
  ...
}

El conjunto de <propiedad> : <valor>; también se llama declaración.

Hay que destacar que cuando a una propiedad como font-family se le asignan dos posibles valores estos van separados por comas (,) y a la hora de establecer uno de ellos intentará siempre hacerlo de izquierda a derecha.

TRES maneras de añadir estilos CSS a un HTML

Existen TRES maneras de añadir CSS al HTML:

  • Como atributo
  • Usando la etiqueta style
  • Usando un fichero .css externo

Como atributo (estilo en línea)

Se puede añadir información de estilo a un elemento concreto empleando el atributo style en la etiqueta del elemento. Por ejemplo:

1

<body style="background-color:lightblue;">

Aunque este es un uso perfectamente válido de la información de estilo, los estilos en línea contaminan el documento con información de presentación.

Debe emplearse con moderación, solo ocasionalmente, para ignorar reglas de nivel más alto.

Usando la etiqueta style (estilos incrustados)

Un método más compacto para añadir hojas de estilo es incrustar un bloque de estilo en la parte superior (en la cabecera o head) del documento HTML empleando el elemento style. Por ejemplo:

1
2
3
4
5

<style>
body {
  background-color: lightblue;
}
</style>

Usando un fichero .css externo (estilos importados o externos)

Es el modo más potente de utilizar CSS.

Se reúnen todas las reglas de estilo en un documento de texto independiente y se crean vínculos a ese documento desde todas las páginas de un sitio.

De este modo, se pueden hacer cambios en el estilo de un modo homogéneo en todo el sitio editando la información del estilo en un único documento.

Para hacerlo se emplea con el elemento link en el documento HTML. Por ejemplo:

1
2
3

<head>
  <link rel="stylesheet" href="mystyle.css">
</head>

1
2
3

body {
  background-color: lightblue;
}
¿Debería usar @import?

Se puede importar una hoja de estilo con la sentencia @import de CSS pero es más recomendable utilizar la etiqueta link. Esta sentencia puede usarse en un archivo CSS o dentro del elemento style. Un ejemplo de este último método sería:

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <style type=“text/css” media=“screen”>
        @import url("dirección web o local del archivo css"); 
        /* aquí podrían ir otros @import u otras reglas de estilo */
    </style>
    <title>Mi primera página web con estilo</title>
</head>
/* Aquí iría el body */
</html>
¿Cómo se escribe un comentario en CSS?

Así:

1

/* Este es un comentario */

La cascada de CSS

La “cascada”, de las hojas de estilo en cascada, se refiere a lo que ocurre si varias fuentes de información de estilo quieren dar formato al mismo elemento de una página. Cuando un navegador encuentra un elemento para el cual hay varias declaraciones de estilo, las ordena de acuerdo al origen de la hoja de estilo, la especificidad de los selectores y el orden de la regla para poder determinar cuál aplicar.

Los navegadores otorgan un peso distinto a las hojas de estilo que, ordenadas de menor a mayor peso, son:

  1. Hojas de estilo del navegador: Son los que tiene el navegador por defecto.
  2. Hojas de estilo del usuario: Son las que se pueden aplicar desde una extensión de navegador como Stylus.
  3. Hojas de estilo del desarrollador.
  4. Hojas de estilo del usuario con el uso de !important.

Además de este orden, existe otra jerarquía de pesos que se aplican a las hojas de estilo creadas por la persona que ha diseñado la página web. Es importante entender esta jerarquía y tener en cuenta que las reglas de estilo que están al final de la lista sobreescribiran a las primeras. La siguiente lista, que como la anterior está ordenada de menor a mayor peso, muestra esta otra jerarquía:

  1. Hojas de estilo externas vinculadas (empleando el elemento link en la cabecera del documento).
  2. Hojas de estilo externas importadas (empleando el elemento @import dentro del elemento style en la cabecera del documento).
  3. Hojas de estilo incrustadas (empleando el elemento style en la cabecera del documento).
  4. Estilos en línea (empleando el atributo style en la etiqueta del elemento).
  5. Declaraciones de estilo marcadas como !important.

Hasta ahora se tuvieron en cuenta las distintas fuentes de la información del estilo. Pero aún puede existir algún conflicto a nivel de reglas. Por esa razón, “la cascada” continúa a nivel de reglas. Lo verás mejor con el el siguiente ejemplo, que podría estar en una hoja de estilo externa o incrustada. En él se muestran dos reglas que hacen referencia al elemento strong. Por ejemplo:

1
2

strong {color: red;} 
h1 strong {color: blue;}

En el ejemplo anterior, todo el texto del documento HTML marcado con la etiqueta strong aparecerá en color rojo. Sin embargo, si el texto marcado con la etiqueta strong aparece dentro de una cabecera de primer nivel (h1), su color será azul. Esto ocurre porque un elemento en un contexto determinado es más específico que en un contexto general y, por lo tanto, tiene más peso. Debes tener en claro que, cuanto más específico sea el selector se le dará más peso para ignorar las declaraciones en conflicto.

Cuando una hoja de estilo contiene varias reglas en conflicto de igual peso, sólo se tendrá en cuenta la que está en último lugar. En el siguiente ejemplo, todas las cabeceras de primer nivel del documento serían rojas porque se impone siempre la última regla. Por ejemplo:

1
2
3

h1 {color: green;} 
h1 {color: blue;} 
h1 {color: red;}
¿Qué ocurrirá si añadimos varios estilos al mismo elemento?

Se irán procesando en cascada sobreescribiendose unos a otros. De manera muy simplificada ordenamos de mayor prioridad a menor prioridad de la siguiente manera:

  1. Importancia: Usando la palabra clave !important.
  2. Origen: Visto anteriormente.
  3. Especificidad:
    1. Estilos en linea.
    2. Seleccionando por ID.
    3. Seleccionando por clase.
    4. Seleccionando por elemento (o pseudo elementos).
    5. Seleccionando con el selector universal.
  4. Orden de aparición: El último prevalece.

Tipos de elementos: Bloque y en línea

En CSS, la noción de “elemento de bloque” y “en línea” es puramente de presentación. Un elemento de bloque de CSS siempre genera saltos de línea, antes y después de él, mientras que los elementos en línea de CSS no lo hacen, aparecen en el flujo de la línea y sólo pasarán a otra línea si no tienen espacio.

En HTML, los párrafos (p), cabeceras (como h1), listas (ol, ul, dl) y contenedores (div) son los elementos de bloque más comunes, mientras que, el texto enfatizado (em), las anclas (a) y los elementos span son los elementos en línea más comunes.

Con CSS podrás indicarle al navegador cómo quieres que se vea en el documento empleando para ello los atributos block e inline de la propiedad display, independientemente de que un elemento sea de bloque o en línea.

(Voluntario) Lee el artículo La propiedad display.

¿Qué diferencia hay entre los elementos block y los elementos inline?

Por defecto, cada elemento HTML tiene un tipo de representación concreto. Como norma general, los elementos que se utilizan dentro de un párrafo, son de tipo inline, mientras que los que se utilizan para agrupar, son de tipo block. La propiedaddisplay de CSS permite modificar el comportamiento de un elemento HTML.

  • block: Se apila en vertical. Ocupa todo el ancho disponible de su etiqueta contenedora.
  • inline: Se coloca en horizontal. Se adapta al ancho de su contenido. Ignora width o height.

¿De qué tipo es el elemento p? ¿Bloque o en línea?

¿De qué tipo es el elemento em? ¿Bloque o en línea?

Modelo de cajas

Lee el artículo Modelo de cajas CSS.

Selectores

Lee el artículo Selectores en CSS.

Unidades de medida en CSS

CódigoUnidadDescripciónUso en la Web  
mmMilímetrosMedidad métricas.NO  
cmCentímetros NO  
inPulgadas NO  
ptPuntoUnidad tradicional de medida equivalente a 1/72 pulgadas.NO  
pcPicaUnidad tradicional de medida equivalente a 12 puntos (o 1/6 pulgadas).NO  
pxPixelLas unidades de píxel son relativas a la resolución del monitor.SI  
emEmMedida relativa respecto al tamaño de la letra que por defecto mostraría el navegador.SI  
exExUnidad de medida relativa que es la altura de la letra minúscula “x”.SI  
%PorcentajeEl valor porcentual se refiere al tamaño por defecto aplicado en el navegador.SI  

La mejor solución de trabajo es configurar un tamaño por defecto en forma de porcentaje, y para cada elemento de la página configurar el tamaño con la unidad em.

Con:

1

body { font-size: 15px; }

El tamaño del texto variará según la resolución del monitor.

Con:

1

body { font-size: 200%; }

Se configura el tamaño del texto con respecto al tamaño configurado en el navegador. Si un navegador visualiza, por defecto, fuentes de 14 píxeles, un valor del 200% corresponde a 28 píxeles.

Con:

1

h1 { font-size: 2.5em; }

Establece el tamaño del texto de las cabeceras de primer nivel en un tamaño dos veces y medio mayor que el tamaño de la fuente mostrada por defecto en el navegador.

(Voluntario) Lee Unidades CSS.

Posicionamiento

Lee el artículo Posicionamiento en CSS.

CSS con tablas y listas

Lee el artículo CSS con tablas y listas

Webs de referencia

Chuletas CSS

(Voluntario) Juegos CSS

Bibliografía

Desarrollo de Aplicaciones Web, Diseño de Interfaces Web
fp ciclo superior modulo formación profesional daw desarrollo de aplicaciones web diseño de interfaces web diw
Este artículo está licenciado bajo CC BY 4.0 por el autor.
Recientemente actualizado
Índice

Representación de colores

Guías de estilo