Taller de HTML5

Selectores y hojas de estilo

Cómo separar el estilo

<span style="font-decoration: underline">
    Hola Mundo
</span>

<head>
  <style>
    #titulo {
      font-decoration: underline;
    }
  </style>
</head>
<body>
  <span id="titulo">Hola Mundo</span>
</body>

Una regla esta compuesta por uno o más selectores y una o más declaraciones.
Cada selector es un conjunto de etiquetas a las cuales se le aplican las propiedades declaradas entre los corchetes.

selector1, selector2 {
    propiedadA: valorA;
    propiedadB: valorB;
}

El elemento perteneciente al DOM tal que su atributo id coincida con el selector.

#identidad

Todo elemento perteneciente al DOM tal que el atributo class coincida con el selector.

Se diferencia del selector por identidad en que la identidad es única para un único elemento en el DOM.

.clase

Todo elemento perteneciente al DOM tal que su etiqueta sea igual al selector.

Puede usarse para inventar nombres de etiquetas nuevas.

etiqueta

Sin dejar espacios se combinan los selectores uno después del otro. El orden recomendado es:

etiqueta.clase#identificador