🔗Índice
- Introducción
- ¿Qué es CSS?
- ¿Qué es la cascada en CSS?
- ¿Qué es la herencia en CSS?
- ¿Qué es la especificidad en CSS?
- ¿Qué es un selector en CSS?
- Menciona al menos 5 tipos de selectores que conozcas
- ¿Qué maneras existen para conectar una hoja de estilos con un documento HTML?
- ¿Qué es el Box-Model y que partes lo constituyen?
- ¿Qué es el colapsado de márgenes?
1. Introducción
CSS ha ido evolucionando a pasos enormes en los últimos años y ha pasado a ser más respetado por los desarrolladores web. Este post es un resumen de las preguntas típicas que puedes encontrar en una entrevista laboral para desarrollador frontend.
2. ¿Qué es CSS?
CSS significa Cascading Style Sheets, o por su traducción al español, Hojas de Estilo en Cascada. Es una tecnología web que nos permite brindarle estilo y apariencia a nuestras páginas.
🔗Más información en CSS de la MDN.
3. ¿Qué es la Cascada en CSS?
La Cascada es un algoritmo que tiene el navegador web que en base a criterios estipulados se encarga de decidir qué regla de CSS se aplica a un elemento en concreto cuando existen conflictos.
Algunos de los criterios que se manejan en el algoritmo de la Cascada son el orden de aparición de los estilos, la especificidad y el origen de los estilos.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Cascada - Básico</title>
<style>
.rojo {
color: red;
}
.amarillo {
color: yellow;
}
</style>
</head>
<body>
<p class="rojo amarillo">Este párrafo es negro por la regla general.</p>
</body>
</html>
En este ejemplo, ¿de qué color se pinta el párrafo?
Como ambas clases tienen la misma especificidad (eso lo veremos mas adelante), por cascada se aplica la clase que este mas abajo, osea la clase amarillo. Se llama cascada por que los estilos que empatan en especificidad se aplican de arriba a abajo, entonces primero el parrafo es rojo pero luego la clase amarillo "pisa" ese estilo y lo sobre escribe a amarillo.
Los 3 criterios que se evalúan en el algoritmo de la cascada son:
- Origen de las hojas de estilos (user styles con
!important, user styles, user agent) en ese orden. - Especificidad donde cada selector tiene un peso asignado, el que tenga más especificidad gana.
- Orden de las hojas de estilo (estilos en línea, con la etiqueta
<style>dentro del HTML, una hoja de estilos importada con la etiqueta<link>)
Más información sobre la Cascada en los recursos para desarrolladores de Google
4. ¿Qué es la herencia en CSS?
La herencia es una poderosa característica de CSS que permite que algunos estilos aplicados a un elemento padre también sean aplicables a un elemento hijo sin que lo especifiquemos de manera explícita.
Por lo general las propiedades CSS heredables son las que tienen que ver con el texto como por ejemplo color, font-family, font-size, etc.
Por ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Herencia en CSS - Básico</title>
<style>
body {
color: blue; /* Todos los textos serán azules */
font-family: Arial, sans-serif; /* Fuente de todos los textos */
}
</style>
</head>
<body>
<h1>Este es un título</h1>
<p>Este es un párrafo que hereda el color azul y la fuente Arial.</p>
</body>
</html>
Aplicamos color y font-family a todo el body y sin escribirlo de manera explícita los elementos h1 y p toman esos estilos porque los heredan de body.
Las propiedades que no son heredables son las que tienen que ver con el modelo de caja como por ejemplo: margin, padding, border, etc., estas propiedades pueden ser heredables si forzamos la herencia con la palabra reservada inherit.
5. ¿Qué es la especificidad en CSS?
La especificad es el segundo criterio que evalúa el algoritmo de la cascada para aplicar estilos a un elemento en específico. Consiste en asignarle pesos acumulativos a los diferentes selectores y luego evaluar cual es el mayor.
Los puntos de especificidad son:
- Selectores de elementos, pseudo-elementos: (0,0,1)
- Selectores de clase, pseudo-clases, selectores de atributo: (0,1,0)
- Selectores de id: (1,0,0)
- Estilos en línea: (1,0,0,0)
- Sentencias
!important: (1,0,0,0,0)
Por ejemplo:
.container div.box {
/*(0, 2, 1) -> 2 clases y una etiqueta*/
}
div ul li a.link {
/*(0, 1, 4) -> 1 clase y 4 etiquetas*/
}
#container .main section article.post span.title {
/*(1, 3, 3) -> 1 id, 3 clases y 3 etiquetas*/
}
2 consejos finales:
- Mantener una especificidad baja evita complicaciones futuras.
- Trata de no usar
!importanta no ser que sea justificado.
6. ¿Qué es un selector en CSS?
Un selector en CSS es un fragmento de código que indica al navegador a que elementos aplicará qué estilos.
Es de las partes más importantes de una sentencia CSS ya que una mal selector puede involucrar bug a nivel de diseño en nuestro proyectos.
7. Menciona al menos 5 tipos de selectores que conozcas
Los selectores CSS más usuales son:
- Selector de etiqueta (
<body>) - Selector de clase (
.container) - Selector de id (
#container) - Selector descendente (
.container div) - Selector de atributo (
[class]) - Selector hijo directo (
section > div) - Selector hermano adyacente (
div + div.item) - Selector hermano general (
section ~ section.item)
8. ¿Qué maneras existen para conectar una hoja de estilos con un documento HTML?
3 son las principales maneras de lograrlo:
- Estilos en línea: aplicamos los estilos de manera incrustada en un elemento HTML usando el atributo
style.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Estilos en línea</title>
</head>
<body>
<!-- muestra Hola Mundo en rojo -->
<h1 style="color:red;">Hola Mundo</h1>
</body>
</html>
- Estilos en la misma hoja HTML usando la etiqueta
<style>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.titulo{
color:red;
}
</style>
<title>Estilos en línea</title>
</head>
<body>
<!-- muestra Hola Mundo en rojo -->
<h1 class="titulo">Hola Mundo</h1>
</body>
</html>
- Estilos importados usando la etiqueta
<link>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Estilos en línea</title>
</head>
<body>
<!-- muestra Hola Mundo en rojo -->
<h1 class="titulo">Hola Mundo</h1>
</body>
</html>
.titulo{
color:red;
}
Se recomienda usar en lo posible estilos importados usando
<link>.
9. ¿Qué es el Box-Model y qué partes lo constituyen?
Todo elemento en CSS es considerado de forma rectangular (también aquellos que tienen la propiedad border-radius).
El Box-Model consiste en comprender todas las características que tienen los elementos al ser considerados como cajas.
El Box-Model consta de 4 partes:
- Content Box: el contenido de la caja.
- Border Box: el borde de la caja.
- Padding Box: espacio entre el Border Box y el Content Box.
- Margin Box: espacio de la caja con otras cajas.
La siguiente imagen es muy ilustrativa para entenderlo mejor:
Una analogía interesante es imaginar el Box-Model como un conjunto de cuadros en un museo:
Más información sobre el Box-Model en la página oficial de web dev de Google
10. ¿Qué es el colapsado de márgenes?
El colapsado de márgenes es una característica muy interesante de CSS que sucede con los márgenes verticales de los elementos.
Consiste en que los márgenes verticales de 2 elementos no se suman, sino que colapsan en uno solo para establecer la separación de los mismos.
En el ejemplo quizás lo más intuitivo sería pensar que el margin-top y margin-bottom de los elementos se sumen y tengan una separación de 80px. Por el contrario lo que en verdad sucede es que se elige el margen mayor (en este caso da lo mismo, 40px) y esta es la separación final.
En el libro CSS in Depth de Keith Grant hacen una analogía super didáctica: imagina que a un bus sube una persona que se siente cómoda viajando a una distancia de 3 asientos vacíos, entonces encuentra un lugar que cumple esta condición y se sienta. Más adelante en el camino casualmente se sube otra persona que también le gusta sentarse a 3 asientos de distancia de cualquier persona en el bus. Como ambos tienen la misma condición no hace falta que uno se separe a 3 asientos y el otro que se separe a otros 3 asientos adicionales (6 asientos), en este caso no se suman sino que se sobre entiende que la distancia entre ambos tiene que se de 3 asientos para que ambos viajen a gusto.
Esta analogía ejemplifica demasiado bien el concepto de colapsado de márgenes.
Preguntas que se agregaran en futuras actualizaciones:
11. ¿Para qué sirve la propiedad box-sizing?
12. ¿Para qué sirve la propiedad overflow?
13. ¿Qué son las medidas relativas y las medidas absolutas en CSS?
14. ¿Cuál es la diferencia entre las medidas em y rem?
15. ¿Qué son las medidas vw y vh en CSS?
16. ¿Cuál es la diferencia entre FlexBox y CSS Grid?
17. ¿Cómo centrarías un div usando FlexBox?
Otros post de mi autoría que te pueden interesar:
Top comments (0)