1. ¿Cómo funciona? El concepto de "Selector"
Para cambiar algo en tu web, CSS necesita saber a quién le hablas y qué quieres hacerle. La estructura básica es esta:
- Selector: El elemento al que quieres cambiarle el aspecto (ej. todos los títulos).
- Propiedad: Lo que quieres cambiar (ej. el color).
- Valor: El nuevo ajuste (ej. azul).
2. El "Modelo de Caja" (The Box Model)
Este es el secreto mejor guardado de CSS: para el navegador, todo en una web es una caja. Un botón, un párrafo o una imagen.
Cada caja tiene cuatro capas, de adentro hacia afuera:
- Content: El texto o imagen real.
- Padding (Relleno): Espacio invisible dentro de la caja.
- Border (Borde): La línea que rodea el relleno.
- Margin (Margen): Espacio invisible fuera de la caja que la separa de otras.
3. ¿Por qué se llama "en Cascada"?
Las reglas se aplican de arriba hacia abajo. Si dices que los títulos son rojos al principio, pero azules al final, el navegador aplicará el último color: azul.
4. Los 3 pilares que vas a tocar siempre
| Categoría | Propiedades comunes | ¿Para qué sirve? |
|---|---|---|
| Colores | color, background-color |
Cambiar el tono del texto o del fondo. |
| Texto | font-size, font-family, text-align |
Tamaño, fuente o alineación de la letra. |
| Layout | display: flex, grid, width |
Organizar cómo se colocan los elementos. |
5. ¿Dónde se pone el CSS?
La forma más profesional es la externa:
- Interno: Dentro de etiquetas
<style>en el HTML. - En línea: Directamente en la etiqueta (poco recomendado).
- Externo (Ideal): Un archivo separado llamado
estilos.cssconectado a tu HTML.
6. ¿Cómo conectar el archivo externo?
Copia y pega este código dentro de la sección <head> de tu HTML:
<link rel="stylesheet" href="estilos1.css">
7. ¿Qué significa cada parte?
- <link>: Indica que necesitamos un archivo externo.
- rel="stylesheet": Aclara que el archivo es una hoja de estilo.
- href="estilos1.css": La ruta del archivo. Ojo: debe estar en la misma carpeta que tu HTML.
8. Diferenciar elementos: Clases e IDs
1. Clases (.nombre) - Multiusos
Se pueden usar en varios elementos a la vez.
/* HTML */
<p class="texto-destacado">Soy verde</p> /* CSS */
.texto-destacado {
color: green;
font-weight: bold;
}
2. ID (#nombre) - Único
Solo puede haber uno por página (como un DNI).
/* HTML */
<p id="parrafo-unico">Soy único</p> /* CSS */
#parrafo-unico {
background-color: yellow;
border: 2px solid black;
}
3. Selectores Combinados
Para ser quirúrgico. Ejemplo: solo párrafos dentro del footer.
footer p {
font-size: 10px;
color: gray;
}
9. Recursos y Manuales
Descarga el material complementario aquí:
Manual 1
