Podemos definir más de una regla para un elemento HTML, en este ejemplo el elemento h1 tiene dos reglas:
h1,h2,h3,h4,h5,h6 {
font-family:Verdana;
}
h1 {
font-size:40px;
}
Supongamos que queremos todas las cabeceras con la misma fuente pero tamaños de fuente distinta, luego podemos implementarlo de la siguiente manera:
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<meta charset="UTF-8">
<style>
h1,h2,h3,h4,h5,h6 {
font-family:Verdana;
}
h1 { font-size: 16px; font-fam
ily: Arial, Helvetica, sans-serif;color:#0000ff;}
h2 { font-size:30px; font-family: Arial, Helvetica, sans-serif;color:#ff00ff;}
h3 { font-size:25px; font-family: Arial, Helvetica, sans-serif;color:#00ff00;}
h4 {
font-size:20px;
}
h5 {
font-size:15px;
}
h6 {
font-size:10px;
}
</style>
</head>
<body>
<h1>Título de nivel 1</h1>
<h2>Título de nivel 2</h2>
<h3>Título de nivel 3</h3>
<h4>Título de nivel 4</h4>
<h5>Título de nivel 5</h5>
<h6>Título de nivel 6</h6>
</body>
</html>
Es decir, podemos inicializar un conjunto de elementos HTML con una serie de propiedades de estilo comunes. Luego agregamos en forma individual las propiedades no comunes a dichas marcas:
h1,h2,h3,h4,h5,h6 {
font-family:Verdana;
}
h1 {
font-size:40px;
}
Es decir, al elemento h1 realmente le hemos definido 2 propiedades: font-family y font-size. Lo mismo para los otros elementos HTML.