- ¿Puedes diseñar una página web sin CSS?
Debido a que el lenguaje HTML es el que se encarga de estructurar los contenidos de una página web, técnicamente sería lo único que necesitarías para mostrar texto, imágenes, secciones y videos a tus visitantes. No obstante, CSS es el lenguaje que se encarga de que el diseño sea atractivo, ordenado y que dé una buena experiencia de usuario.
¿Quieres saber cómo luce una página sin CSS? Mira la siguiente imagen, extraída de una publicación de nuestro blog:
Te dejamos a continuación el aspecto que tiene con CSS.
- ¿Qué es cascada CSS?
Mira el siguiente código. Se ve como si tuviéramos dos reglas dirigidas a la propiedad de color de fondo para el elemento p:
Esto representa un conflicto, pues el mismo elemento no puede tener distintos colores de fondo. En este caso, CSS se queda con azul debido a la forma en que operan las cascadas.
En términos más sencillos, cascada significa que CSS considera el orden de las reglas cuando le da estilo a los elementos. La regla de la cascada dicta que si la propiedad CSS de un elemento tiene asignados diferentes valores, entonces el navegador tomará el valor que fue procesado al final. En nuestro ejemplo, el valor rojo se colocó primero y azul está después, así que aplica el último.
La cascada resuelve reglas conflictivas dentro de la misma hoja de estilo o en varias de ellas; es decir, las reglas que se procesaron en hojas de estilo posteriores anulan las reglas conflictivas en páginas previas. La regla de la cascada también aplica cuando se trata de CSS interno, externo y en línea: en línea anula el interno y el interno anula el externo.
La cascada es central para las funciones de CSS: es la «C» de su nombre. De cualquier modo, no tienes por qué preocuparte, ya que si la comprendes de forma adecuada podrás utilizarla correctamente.
- ¿Qué es especificidad CSS?
Existe otro escenario: tu etiqueta p tiene un id. Según el CSS, ¿tu párrafo será rojo o azul?
Según la regla de la cascada, se supone que el valor azul anula al rojo. Sin embargo, no pasó eso. ¿Por qué? El problema con este ejemplo es que los selectores CSS son de diferentes tipos, pero describen el mismo elemento. En casos así, CSS designa algunos selectores como «más específicos» que otros; a esto se le conoce como «especificidad CSS». Combinadas con la cascada, las reglas de especificidad CSS eligen cuál estilo aplicar en caso de un conflicto.
CSS dice que los selectores de clase son más «específicos» que los selectores de elementos; y los selectores de identidad son más «específicos» que los selectores de clase. En el ejemplo anterior, la primera regla CSS utiliza un selector de identidad, por lo que el valor de rojo prevalece, ya que es más específico que el valor del elemento.
- ¿Qué es herencia CSS?
Herencia significa que algunas declaraciones CSS aplicadas a un elemento «padre» se pasan a elementos «hijo».
Podemos ver herencia con una propiedad como tamaño de fuente:
No todas las propiedades heredan valores de elementos «padre». Como en el caso anterior: el estilo solo está aplicado al elemento «padre». La declaración tamaño de fuente se hereda, pero no la del borde.