Conceptos claves
Para representar las reglas de manera consistente, los navegadores siguen un conjunto de directrices de implementación guiados de tres principios fundamentales de CSS:
- CASCADA
- HERENCIA
- ESPECIFIDAD
CASCADA
El término en cascada indica la forma en que finalmente un navegador muestra los estilos para elementos concretos de una página Web. Los estilos que se ven en una página Web proceden de distintas fuentes, definidas por el diseñador y estilos predeterminados por el propio navegador.
El aspecto final de una página Web es el resultado de las reglas aplicadas por estas dos fuentes en conjunto (o “en cascada”) para representar la página Web de forma óptima.
HERENCIA
La herencia en CSS es el mecanismo mediante el cual ciertas propiedades se transmiten de un elemento padre a sus hijos. Por ejemplo, si un elemento padre tiene especificado el color rojo, sus hijos automáticamente también tendrán el color rojo sin necesidad de especificar esta propiedad de forma explícita. Está claro que la herencia nos ayuda a escribir menos y de eso modo ahorrar código.
ESPECIFICIDAD
Básicamente la especificidad se refiere al valor que toma cada uno de los elementos de una hoja de estilo, como hay distintos tipos se selectores hay selectores que tienen más peso e importancia que otros, es decir más especificidad. La jerarquía de selectores, de menor a mayor especifidad es la siguiente:
- ETIQUETAS
- CLASES
- ID
- ESTILOS EN LINEA
Comentarios en CSS
CSS permite incluir comentarios entre sus reglas y estilos. Los comentarios son contenidos de texto que el diseñador incluye en el archivo CSS para su propia información y utilidad. Los navegadores ignoran por completo cualquier comentario de los archivos CSS, por lo que es común utilizarlos para estructurar de forma clara los archivos CSS complejos.
El comienzo de un comentario se indica mediante los caracteres /* y el final del comentario se indica mediante */, tal y como se muestra en el siguiente ejemplo: