Curso CSS Módulo 2

 

Módulo 2: Selectores y Propiedades Básicas en CSS

En este módulo aprenderás a aplicar estilos de forma precisa utilizando selectores y a dar tus primeros pasos con las propiedades CSS. Los selectores son la puerta de entrada para decirle al navegador: “¡Quiero dar estilo a este elemento!”. Y las propiedades son las instrucciones que le dices al navegador para modificar su apariencia (color, tamaño, alineación, etc.).

---

📌 ¿Qué es un selector en CSS?

Un selector es la manera en que CSS “apunta” a los elementos de una página para aplicarles un estilo. Por ejemplo, si quieres que todos los párrafos sean azules, usas el selector p. Si quieres que solo un párrafo tenga un estilo especial, usarás clases o IDs.

p { color: blue; }

---

🎯 Tipos de selectores más usados

1️⃣ Selector de etiqueta

Aplica el estilo a todas las etiquetas de un tipo específico. 👉 Ejemplo: todos los <h1> tendrán texto rojo.

h1 { color: red; }

---

2️⃣ Selector de clase

Permite aplicar estilos a elementos específicos usando un nombre de clase. Se declara en HTML con class="nombre" y en CSS con un punto .. 👉 Ejemplo: los elementos con clase .destacado tendrán fondo amarillo.

.destacado { background-color: yellow; }

---

3️⃣ Selector de ID

Sirve para aplicar estilos a un elemento único en la página. Se declara en HTML con id="nombre" y en CSS con un numeral #. 👉 Ejemplo: el elemento con #principal tendrá letra más grande.

#principal { font-size: 24px; }

---

4️⃣ Selectores combinados

CSS permite “combinar” selectores para ser más específico:

• div p → todos los párrafos dentro de un div.
• ul li → todos los ítems dentro de una lista.
• div > p → solo los párrafos que son hijos directos de un div.

div p { color: green; }

---

🎨 ¿Qué son las propiedades CSS?

Las propiedades son las instrucciones que le das al navegador para cambiar el estilo. Cada propiedad tiene un valor, por ejemplo:

• color → define el color del texto.
• background-color → cambia el color de fondo.
• font-size → cambia el tamaño de la letra.

p { color: purple; font-size: 18px; }

✅ Consejo: siempre termina cada línea con ; para evitar errores.

---

📥 Preguntas de repaso

Pregunta 1

¿Qué selector se usa para dar estilo a todos los párrafos de una página?

• A) .parrafo
• B) p
• C) #parrafo
• D) *p

✅ Respuesta correcta: B) p

---

Pregunta 2

¿Qué símbolo se usa en CSS para aplicar estilos a una clase?

• A) #
• B) .
• C) *
• D) :

✅ Respuesta correcta: B) .

---

Pregunta 3

¿Cuál de estas opciones aplica estilo a un elemento con el ID menu?

• A) .menu { }
• B) menu { }
• C) #menu { }
• D) &menu { }

✅ Respuesta correcta: C) #menu { }

---

Esta lección forma parte del curso básico de CSS. En el próximo módulo aprenderás a trabajar con colores, fuentes y estilos de texto.