Listado completo de tutoriales

5 - Agrupación de varios elementos HTML con una misma regla de estilo.


Esta característica nos permite ahorrar la escritura de reglas duplicadas para diferentes elementos de HTML.

La sintaxis es disponer los nombres de los elementos HTML que queremos aplicar una regla separados por comas:

h1,h2,h3 {
  font-family:verdana;
  color:#0000ff;
}

Supongamos que queremos la misma fuente y color para los elementos h1,h2 y h3 luego podemos implementarlo de la siguiente manera:

<!DOCTYPE html>
<html>
<head>
  <title>Problema</title>
  <meta charset="UTF-8">

<style>
h1,h2,h3 {
  font-family:verdana;
  color:#0000ff;
}
</style>
</head>
<body>
<h1>Título de nivel 1</h1>
<h2>Título de nivel 2</h2>
<h3>Título de nivel 3</h3>
</body>
</html>
style agrupar reglas para varios elementos HTML

Es decir, separamos por coma todas los elementos a los que se aplicará la misma regla de estilo:

h1,h2,h3 {
  font-family:verdana;
  color:#0000ff;
}

Retornar