Cargando...

Introducción a CSS

El HTML simple puede mostrar texto y enlaces, pero las páginas se ven incompletas hasta que controlas color, espaciado y diseño. CSS es el lenguaje que convierte el marcado estructurado en una página diseñada.

¿Qué es CSS?

CSS (Cascading Style Sheets) es el lenguaje estándar para estilizar documentos HTML. Escribes reglas que dicen al navegador cómo deben verse los elementos: color de texto, fuentes, márgenes, fondos, diseño y más. HTML responde «¿qué es este contenido?» CSS responde «¿cómo debe aparecer?»

HTML y CSS trabajan juntos

Piensa en HTML como el esqueleto de la página y en CSS como la ropa y el acabado. Sigues necesitando HTML sólido — encabezados, párrafos, enlaces y landmarks — para que CSS tenga elementos con sentido que estilizar. Este curso asume que ya conoces HTML básico.

📊 Roles de HTML frente a CSS

Capa	Trabajo principal	Preguntas típicas
HTML	Estructura y significado	¿Es un encabezado, párrafo o enlace?
CSS	Presentación y diseño	¿Qué color, tamaño, espaciado y disposición?
JavaScript (después)	Comportamiento e interactividad	¿Qué pasa al hacer clic?

Estudiarás JavaScript en un curso posterior. Por ahora mantén la separación clara: estructura en HTML, aspecto en CSS.

Primera mirada a una regla CSS

Una regla CSS tiene un selector (qué estilizar) y declaraciones (cómo estilizarlo). Las declaraciones van entre llaves y usan una propiedad y un valor.

Una regla simple

css

CSS Code

h1 {
color: navy;
font-size: 2rem;
}

Qué hace esta regla

h1 es el selector — apunta a cada elemento h1
color: navy; establece el color del texto
font-size: 2rem; establece el tamaño del encabezado
Cada declaración termina con punto y coma
Profundizarás selectores y unidades más adelante. Aquí basta ver la forma de una regla.

Ver CSS en una página

Los navegadores aplican reglas CSS a los elementos HTML coincidentes. Abajo, una página corta usa un bloque <style> interno para que veas HTML y CSS en un archivo. Sesiones posteriores cubren hojas externas y otras formas de añadir CSS.

HTML con bloque style

html

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>CSS Demo</title>
<style>
body {
font-family: Georgia, serif;
background-color: #f5f7fb;
}
h1 {
color: #1a365d;
}
p {
color: #334155;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Styled with CSS</h1>
<p>This paragraph uses the p rule above.</p>
</body>
</html>

Qué cambió

Sin las reglas <style>, la página usa el aspecto por defecto del navegador. Con CSS el fondo se suaviza, el encabezado se vuelve azul oscuro y el párrafo gana espaciado legible. Mismo contenido HTML — presentación distinta.

Por qué importa «cascading» (avance)

«Cascading» en CSS significa que los estilos pueden venir de varios sitios y el navegador resuelve qué regla gana con cascade y specificity. Aún no necesitas el algoritmo completo. Recuerda: varias reglas pueden apuntar al mismo elemento, y CSS tiene un sistema claro para el aspecto final. Sesiones posteriores lo hacen práctico.

Pruébalo tú mismo

Crea un archivo llamado intro.html.
Pega el ejemplo HTML-con-style, guarda y ábrelo en el navegador.
Cambia color: #1a365d; en la regla h1 a color: teal;, guarda y actualiza.
Confirma el color del encabezado. Si nada cambia, revisa el guardado y la pestaña correcta.

Errores comunes

Esperar que CSS cree la estructura de la página — usa elementos HTML para encabezados, listas y enlaces; estilízalos con CSS
Escribir nombres de propiedad sin selector o llaves, de modo que el navegador ignore las declaraciones
Olvidar el punto y coma tras una declaración, lo que puede romper la siguiente propiedad de la misma regla
Poner contenido visible solo en CSS — CSS estiliza contenido; no reemplaza el texto HTML

Resumen

CSS estiliza páginas HTML: colores, fuentes, espaciado, diseño y presentación
HTML estructura el contenido; CSS controla cómo se ve
Una regla CSS une un selector con declaraciones propiedad/valor dentro de { }
Puedes empezar con un bloque <style> y luego pasar a hojas externas
Cascading significa que varias reglas pueden aplicar; lecciones posteriores explican cuál gana
Practica editando una regla pequeña y actualizando el navegador

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓

Preguntas

🎯

70%

Para Aprobar

♾️

∞

Tiempo

🔄

∞

Intentos

📝 Instrucciones

Lee cada pregunta cuidadosamente
Selecciona la mejor respuesta para cada pregunta
Puedes repetir el quiz tantas veces como quieras
Tu progreso se mostrará en la parte superior

Idioma