TIC II: CSS

lunes, 20 de abril de 2026

CSS

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 { Propiedad: Valor; }

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 (contenido): 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.

Dato clave: La regla más específica y la que aparece "más abajo" en el código suele ser la que gana.

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.css conectado 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

Manual 2

10. Ejemplo en Codepen

https://codepen.io/amartind11/pen/bNwJLwX

TIC II

Páginas