Dudas y errores cuando se usa CSS

Interensante artículo de CSS Tricks donde se muestran las diferencias que suelen confundirnos cuando creamos reglas de estilo; algo que no sólo ocurre con los principiantes sino con todos nosotros.

Un pequeño resumen de ese artículo.

¿Cuál es la diferencia entre estas dos reglas?

.demo { color: red; }

p.demo { color: red; }

La primera, hará que el texto de cualquier etiqueta que tenga como atributo la clase demo, se vea de color rojo:

<div class="demo"> el texto es rojo </div>

<span class="demo"> el texto es rojo </span>

La segunda, sólo funcionará en las etiquetas P que tengan ese atributo, cualquier otra, no será afectada.

<div class="demo"> el texto será de cualquier color </div>

<p class="demo"> el texto es rojo </p>

¿Y cuál es la diferencia entre estas dos reglas?

.demo p { color: red; }

p.demo { color: green; }

La primera, hará que los textos de las etiquetas P que estén dentro de algún contenedor que tenga como atributo la clase demo, se vea de color rojo:

<div class="demo">

  <p> el texto es rojo </p>

  <span> el texto será de cualquier color </span>

</div>

La segunda, hará que se vean rojos los textos de cualquier etiqueta P que tenga definida esa clase, tal como en el caso anterior.

¿Cuál es la diferencia entre un ID y una clase?

¿Da lo mismo usar uno que otro? Definitivamente no (más información). Los IDs deben ser únicos, sólo una etiqueta en toda la página debe tener ese nombre y se los entiende como "más importantes"; si se usan IDs y clases en al misma etiqueta, las reglas definidas para el ID tienen preponderancia sobre las de la clase porque las propiedades poseen un orden de prioridades:

#demoID { color: red; }

.demoCLASE { color: green; }



<div id="demoID" class=demoCLASE""> el texto será rojo </div>

¿Puede usarse hover para modificar una etiqueta interna?

<div class="demo">

  <p> Sed vitae tortor turpis. <span>Nullam blandit</span> ornare urna vitae rhoncus. </p>

  <p> Nam lacinia lacinia risus, sed <span>elementum libero</span> imperdiet non. </p>

</div>

Con estas reglas, cuando ponemos el cursor sobre ese rectángulo, el texto será amarillo:

.demo { color: red; }

.demo:hover { color: yellow; }

Sed vitae tortor turpis. Nullam blandit ornare urna vitae rhoncus.

Nam lacinia lacinia risus, sed elementum libero imperdiet non.

Con esta otra, lo que cambiará es el color de las etiquetas SPAN que estén dentro del DIV:

.demo { color: red; }

.demo:hover span { color: yellow; }

Sed vitae tortor turpis. Nullam blandit ornare urna vitae rhoncus.

Nam lacinia lacinia risus, sed elementum libero imperdiet non.

¿Los espacios y los puntos y comas son obligatorios?

Los espacios son obligatorios cuando separan palabras claves. Estas dos cosas son lo mismo:

.demo{color:red;}

.demo {      

      color :       red;

}

Estas dos no son lo mismo:

.demo{background:trasnparent url() no-repeat left top;}

.demo{background:trasnparent url()no-repeat left top;}

La primera, funcionará correctamente en cualquier navegador, la segunda, no se aplicará en IE porque falta el espacio entre el cierre del paréntesis y la palabra no-repeat

El punto y coma es obligatorio siempre, excepto en la última propiedad:

Esto es correcto

.demo {

  color: red;

  font-size: 12px

}

Esto es incorrecto:

.demo {

  color: red

  font-size: 12px

}

Es mejor tener la costumbre de agregarlo siempre:

.demo {

  color: red;

  font-size: 12px;

}

¿Qué propiedad se aplica cuando se definen varias veces?

.demo {

  color: red;

  font-size: 18px;

  color: green;

}

La última; siempre la última; en este caso, el color a usar será el verde.