Fundamentos de la web

¿Qué es CSS?

CSS es el lenguaje que le da apariencia a una página web. Si HTML es el esqueleto, CSS es la ropa, el maquillaje y el diseño de interiores. Sin CSS, todo se ve igual — texto negro sobre fondo blanco.

01HTML sin CSS vs con CSS

El mismo contenido, completamente diferente apariencia:

❌ Sin CSS

Mi Tienda

Bienvenido a mi tienda online.

✓ Con CSS

Mi Tienda

Bienvenido a mi tienda online.

02¿Cómo funciona una regla CSS?

Toda instrucción CSS tiene tres partes: a quién le aplicas, qué cambias, y cuál es el nuevo valor.

Selector

→

color

Propiedad

gold

Valor

;

estilos.css

/* Cambiar el título principal */
h1 {
  color: gold;
  font-size: 3rem;
  text-align: center;
}

/* Cambiar el fondo de la página */
body {
  background-color: #0a0a0f;
  color: white;
  font-family: 'Inter', sans-serif;
}

/* Dar estilo a un botón */
button {
  background: #c8a84b;
  color: black;
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

03Las propiedades más usadas

color

Color del texto.

color: red; / color: #fff;

background

Color o imagen de fondo.

background: #0a0a0f;

font-size

Tamaño del texto.

font-size: 16px; / 1rem;

padding

Espacio interno del elemento.

padding: 10px 20px;

margin

Espacio externo entre elementos.

margin: 0 auto;

border-radius

Redondea las esquinas.

border-radius: 8px;

04¿Dónde va el CSS?

El CSS puede vivir en tres lugares. Para empezar, dentro del mismo HTML en una etiqueta <style>:

index.html

<head>
  <style>
    body {
      background: black;
      color: white;
    }
    h1 {
      color: gold;
    }
  </style>
</head>

Lo que hace la IA por ti: No necesitas memorizar propiedades. Dile a Claude: "haz que el fondo sea oscuro, el texto blanco, los títulos en dorado y los botones redondeados" — él genera el CSS completo. Tu trabajo es entender qué significa cada línea cuando la ves.

Lo que aprendiste hoy

CSS controla la apariencia — colores, tamaños, espacios, fuentes.
Cada regla CSS tiene: selector, propiedad y valor.
El selector indica a qué elemento aplica el estilo.
CSS va dentro de una etiqueta <style> en el <head> del HTML.
Sin CSS toda web se ve igual — con CSS cada web tiene identidad propia.

← Lección anterior: HTML Siguiente: PHP →