Introducción a CSS

CSS (Cascading Style Sheets o Hojas de Estilo en Cascada) es el lenguaje que se utiliza para describir la presentación visual de un documento HTML.
Con CSS puedes cambiar colores, fuentes, tamaños, márgenes, posiciones y en general la apariencia de una página web.

¿Qué es CSS?

CSS significa Cascading Style Sheets.

  • Cascading (cascada): las reglas se aplican siguiendo un orden jerárquico y de prioridad.
  • Style (estilo): define cómo se ve un elemento en la página.
  • Sheets (hojas): porque se organizan en archivos (generalmente .css).

Cómo se aplica CSS

Existen tres formas principales de aplicar CSS a un documento HTML:

  1. En línea (inline): dentro del atributo style de una etiqueta.
<p style="color:red;">Texto en rojo</p>
  1. En el documento HTML, usando <style>:
<style>
  p {
    color: blue;
  }
</style>
  1. En un archivo externo (recomendado):
<link rel="stylesheet" href="styles.css" />

✅ Ejercicio:
Crea un archivo index.html y conéctalo a un archivo styles.css. Cambia el color de fondo de la página.

Selectores básicos

Un selector en CSS es la forma de decirle al navegador a qué elemento aplicar un estilo.

  • Por etiqueta: selecciona todos los elementos de un tipo.
p {
  color: green;
} /* Todos los párrafos serán verdes */
  • Por clase (.): se aplica a elementos con un atributo class.
.texto {
  font-size: 18px;
}
  • Por id (#): se aplica a un elemento con un identificador único id.
#principal {
  background: yellow;
}

📌 Especificidad:
Si dos reglas afectan al mismo elemento, el navegador aplica la más específica:
id > clase > etiqueta.

✅ Ejercicio:
Aplica un estilo a todos los párrafos, uno distinto a una clase llamada .importante, y un color de fondo a un id llamado #titulo.

Colores y unidades

Colores en CSS

  • Por nombre: red, blue, green
  • HEX: #ff0000 (rojo)
  • RGB: rgb(255, 0, 0) (rojo)
  • HSL: hsl(0, 100%, 50%) (rojo)

Unidades en CSS

  • Absolutas:
    • px (píxeles, fijos).
  • Relativas:
    • % (porcentaje relativo al contenedor).
    • em (relativo al tamaño de la fuente del elemento padre).
    • rem (relativo al tamaño de la fuente raíz del documento).
  • Viewport:
    • vh (altura de la pantalla).
    • vw (ancho de la pantalla).

✅ Ejercicio:
Haz un texto en rgb(0, 128, 255), con un tamaño en 2em.

Propiedades de texto

Las propiedades de texto permiten controlar cómo se ve el contenido escrito.

p {
  color: navy; /* Color del texto */
  font-size: 18px; /* Tamaño de la fuente */
  font-family: Arial, sans-serif; /* Tipo de letra */
  text-align: center; /* Alineación */
  line-height: 1.5; /* Espacio entre líneas */
  letter-spacing: 2px; /* Espacio entre letras */
}

✅ Ejercicio:
Crea un párrafo con fuente personalizada, centrado y con espacio extra entre letras.

Fondos y bordes

body {
  background-color: lightgray; /* Fondo de color */
  background-image: url('fondo.png'); /* Fondo con imagen */
  background-repeat: no-repeat; /* No repetir la imagen */
  background-size: cover; /* Escalar al tamaño de la pantalla */
}

div {
  border: 2px solid black; /* Grosor, estilo y color */
  border-radius: 10px; /* Bordes redondeados */
}

✅ Ejercicio:
Crea un div con fondo de color, borde redondeado y sombra (box-shadow).

Modelo de Caja (Box Model)

El Box Model es la forma en que CSS representa cada elemento como una caja con 4 áreas:

  1. Content (contenido) → el texto o imagen dentro del elemento.
  2. Padding (relleno interno) → espacio entre el contenido y el borde.
  3. Border (borde) → línea alrededor del padding.
  4. Margin (margen) → espacio externo respecto a otros elementos.
div {
  width: 200px;
  padding: 20px;
  border: 5px solid red;
  margin: 10px;
}

✅ Ejercicio:
Dibuja un div con diferentes valores de margin y padding para ver la diferencia.

Posicionamiento

La propiedad position define cómo se coloca un elemento en la página.

  • static: posición normal.
  • relative: relativo a su posición original.
  • absolute: relativo al primer contenedor con posición distinta de static.
  • fixed: fijo en la pantalla, incluso al hacer scroll.
  • sticky: se comporta como relative, pero se fija al hacer scroll.
.caja1 {
  position: static;
}
.caja2 {
  position: relative;
  top: 10px;
  left: 20px;
}
.caja3 {
  position: absolute;
  top: 0;
  right: 0;
}
.caja4 {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

✅ Ejercicio:
Crea un botón que quede fijo en la esquina inferior derecha.

Listas, enlaces y tablas

Enlaces con pseudoclases

a {
  color: blue;
}
a:hover {
  color: red;
} /* Cuando el ratón pasa por encima */
a:visited {
  color: purple;
} /* Enlaces ya visitados */

Tablas

table {
  border-collapse: collapse;
  width: 100%;
}
td,
th {
  border: 1px solid black;
  padding: 8px;
}
tr:hover {
  background-color: lightyellow;
}

✅ Ejercicio:
Crea una tabla con filas alternadas de colores.

Flexbox (introducción)

Flexbox (Flexible Box) es un sistema de diseño que facilita organizar elementos en filas o columnas.

.container {
  display: flex; /* Activa flexbox */
  justify-content: space-between; /* Distribución horizontal */
  align-items: center; /* Alineación vertical */
}

✅ Ejercicio:
Crea un contenedor con 3 cajas distribuidas horizontalmente con espacio entre ellas.

Grid (introducción)

Grid es un sistema de diseño en dos dimensiones (filas y columnas).

.container {
  display: grid; /* Activa grid */
  grid-template-columns: 1fr 1fr 1fr; /* 3 columnas iguales */
  gap: 10px; /* Espacio entre celdas */
}

✅ Ejercicio:
Crea un grid de 3 columnas con 6 cajas.

Responsividad (básico)

Responsive Design permite que una web se adapte a distintos tamaños de pantalla.

Se logra con media queries: reglas CSS que se aplican solo en ciertos anchos de pantalla.

@media (max-width: 600px) {
  body {
    background: lightblue;
  }
  p {
    font-size: 14px;
  }
}

✅ Ejercicio:
Haz que el fondo cambie de color en pantallas pequeñas.

Buenas prácticas y cierre

  • Usa siempre un archivo externo (styles.css).
  • Reutiliza clases, evita usar id para estilos.
  • Usa variables CSS (Custom Properties):
:root {
  --color-principal: #3498db;
}

button {
  background: var(--color-principal);
  color: white;
}

🎯 Proyecto final

Crea una página personal sencilla con:

  • Un encabezado y un menú de navegación.
  • Una sección con texto e imágenes.
  • Una tabla y una lista.
  • Estilos aplicados con Flexbox y/o Grid.
  • Diseño responsive con media queries.