Programación

CSS desde cero: dale color y diseño a tu primera página web

Por el Equipo Bit a Bit · · 8 min de lectura

En esta guía · 10 secciones
  1. Cómo conectar CSS a tu página
  2. Cómo se escribe una regla
  3. Tres formas de elegir qué pintar
  4. Las propiedades que más usarás
  5. El modelo de caja
  6. Poner cosas una al lado de otra: flexbox
  7. Que se vea bien en el celular
  8. Pruébalo tú mismo
  9. Retos para practicar
  10. Siguiente paso

HTML dice qué es cada cosa; CSS dice cómo se ve: colores, tamaños, espacios y posición. Con unas pocas reglas, una página sosa se convierte en una página con diseño. Al final tienes un editor para practicar.

Cómo conectar CSS a tu página

Crea un archivo llamado estilos.css en la misma carpeta que tu index.html, y añade esta línea dentro de <head>:

<link rel="stylesheet" href="estilos.css">

Para pruebas rápidas también puedes escribir el CSS dentro de la página, entre <style> y </style>. Es lo que hace el editor de más abajo.

Cómo se escribe una regla

h1 {
  color: blue;
  font-size: 32px;
}
  • Selector (h1): a qué elementos se aplica.
  • Propiedad (color): qué quieres cambiar.
  • Valor (blue): cómo lo quieres. Cada línea termina en punto y coma.

Tres formas de elegir qué pintar

  • p { … }Por etiqueta: afecta a todos los párrafos.
  • .boton { … }Por clase: afecta a los elementos con class="boton". Es la forma más usada.
  • #contacto { … }Por id: afecta a un único elemento con id="contacto".

En el HTML, la clase se pone así: <a class="boton" href="#">Comprar</a>. Un mismo estilo sirve para muchos botones.

Las propiedades que más usarás

  • color: #1f4fd8;Color del texto. Puedes usar nombres (red) o códigos (#1f4fd8).
  • background-color: white;Color de fondo.
  • font-family: Arial, sans-serif;Tipo de letra.
  • font-size: 18px;Tamaño de la letra.
  • text-align: center;Alinea el texto: left, center o right.
  • padding: 20px;Espacio por dentro, entre el borde y el contenido.
  • margin: 20px;Espacio por fuera, entre este elemento y los demás.
  • border: 2px solid gray;Un borde: grosor, estilo y color.
  • border-radius: 12px;Redondea las esquinas.
  • max-width: 600px;Ancho máximo, para que el texto no se estire demasiado.

El modelo de caja

Para CSS, todo es una caja. De dentro hacia fuera tiene cuatro capas: el contenido, el padding (relleno), el border (borde) y el margin (margen). Si un botón se ve "apretado", sube su padding; si está pegado a otro, sube su margin.

Pon esto siempre al inicio de tu CSS: * { box-sizing: border-box; }. Hace que el ancho incluya el padding y el borde, y te evita muchas sorpresas.

Poner cosas una al lado de otra: flexbox

.botones {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
  • display: flex pone a los hijos en fila.
  • gap es el espacio entre ellos.
  • justify-content los reparte en horizontal: center, space-between…
  • align-items los alinea en vertical.

Que se vea bien en el celular

Con una media query das reglas distintas según el ancho de la pantalla. Aquí, en pantallas de menos de 600 píxeles, los elementos pasan de estar en fila a estar uno debajo de otro:

@media (max-width: 600px) {
  .botones {
    flex-direction: column;
  }
}

Pruébalo tú mismo

Esta tarjeta de presentación tiene su CSS arriba, dentro de <style>. Cambia los valores y mira el resultado.

Retos para practicar

  • Cambia el color de fondo de la página: busca #f3f5f8 y pon otro, por ejemplo #fde6e4.
  • Redondea más la tarjeta: sube border-radius a 32px.
  • Cambia la letra: prueba Georgia, serif en font-family.
  • Pon los botones en columna: añade flex-direction: column; dentro de .botones.
  • Añade una sombra a la tarjeta: box-shadow: 0 8px 24px rgba(0,0,0,.12);
Aprende de cualquier web: en Chrome o Edge, haz clic derecho sobre un elemento y elige Inspeccionar (o pulsa F12). Verás su HTML y su CSS, y puedes cambiar valores para probar sin romper nada: al recargar, todo vuelve a la normalidad.

Siguiente paso

¿Aún no tienes la estructura clara? Repasa la estructura HTML. ¿Listo para juntarlo todo? Sigue con tu primera página completa y publicada.

Sigue leyendo