Estilizando con CSS

¡Hora de hacer HTML bonito! CSS controla la apariencia visual de las páginas.

¿Qué es CSS?

CSS = Cascading Style Sheets (Hojas de Estilo en Cascada)

CSS define:

Colores
Fuentes y tamaños
Espaciados
Layout y posicionamiento
Animaciones

Cómo Agregar CSS

1. Inline (directamente en la etiqueta)

html

<p style="color: blue; font-size: 18px;">Texto azul</p>

❌ No recomendado para proyectos grandes

2. Interno (en head)

html

<head>    <style>        p {            color: blue;            font-size: 18px;        }    </style></head>

3. Externo (archivo separado) ✅ Recomendado

html

<head>    <link rel="stylesheet" href="style.css"></head>

css

/* style.css */p {    color: blue;    font-size: 18px;}

Sintaxis de CSS

css

selector {    propiedad: valor;    propiedad: valor;}

Ejemplo:

css

h1 {    color: red;    font-size: 32px;    text-align: center;}

Selectores

Por etiqueta

css

p { color: blue; }h1 { color: red; }

Por clase (más usado)

html

<p class="destacado">Texto importante</p>

css

.destacado {    background-color: yellow;}

Por ID (único)

html

<div id="header">...</div>

css

#header {    background: black;}

Múltiples elementos

css

h1, h2, h3 {    font-family: Arial;}

Propiedades Esenciales

Colores

css

.elemento {    color: blue;                    /* Texto */    background-color: #f0f0f0;      /* Fondo */    border-color: rgb(255, 0, 0);   /* Borde */}

Formatos de color:

Nombres: red, blue, white
Hex: #FF5733, #333
RGB: rgb(255, 87, 51)
RGBA: rgba(255, 87, 51, 0.5) (con transparencia)

Texto

css

.texto {    font-family: Arial, sans-serif;    font-size: 16px;    font-weight: bold;          /* normal, bold, 100-900 */    text-align: center;         /* left, right, center, justify */    line-height: 1.5;           /* Espaciado de línea */    text-decoration: underline; /* underline, none */}

Modelo de Caja

Cada elemento es una caja:

┌─────────────────────────────┐
│          MARGIN             │
│   ┌─────────────────────┐   │
│   │      BORDER         │   │
│   │   ┌─────────────┐   │   │
│   │   │   PADDING   │   │   │
│   │   │  ┌───────┐  │   │   │
│   │   │  │CONTENT│  │   │   │
│   │   │  └───────┘  │   │   │
│   │   └─────────────┘   │   │
│   └─────────────────────┘   │
└─────────────────────────────┘

css

.caja {    width: 200px;    height: 100px;    padding: 20px;          /* Espacio interno */    margin: 10px;           /* Espacio externo */    border: 1px solid black;} /* Atajo: arriba derecha abajo izquierda */padding: 10px 20px 10px 20px; /* O: arriba/abajo izquierda/derecha */padding: 10px 20px;

Display

css

.elemento {    display: block;       /* Ocupa todo el ancho */    display: inline;      /* Sigue flujo del contenido */    display: inline-block;/* Inline pero acepta width/height */    display: none;        /* Oculto */}

Flexbox - Layout Moderno

Flexbox es la forma más fácil de organizar elementos:

css

.contenedor {    display: flex;    justify-content: center;    /* Horizontal */    align-items: center;        /* Vertical */    gap: 20px;                  /* Espacio entre */}

Opciones de justify-content:

flex-start - Inicio
flex-end - Final
center - Centro
space-between - Espacio uniforme
space-around - Espacio alrededor

Ejemplo práctico:

html

<nav class="menu">    <a href="/">Inicio</a>    <a href="/sobre">Sobre</a>    <a href="/contacto">Contacto</a></nav>

css

.menu {    display: flex;    justify-content: space-between;    padding: 20px;    background: #333;} .menu a {    color: white;    text-decoration: none;}

Ejercicio Práctico

Crea style.css para la página sobre:

css

* {    margin: 0;    padding: 0;    box-sizing: border-box;} body {    font-family: Arial, sans-serif;    line-height: 1.6;    padding: 20px;    max-width: 800px;    margin: 0 auto;} h1 {    color: #333;    border-bottom: 2px solid #007bff;    padding-bottom: 10px;    margin-bottom: 20px;} h2 {    color: #555;    margin-top: 30px;    margin-bottom: 15px;} ul {    padding-left: 20px;} li {    margin-bottom: 8px;} a {    color: #007bff;} a:hover {    text-decoration: underline;}

Resumen

✅ CSS controla la apariencia visual
✅ Usa archivos externos (.css)
✅ Selectores: etiqueta, .clase, #id
✅ Modelo de caja: margin, border, padding, content
✅ Flexbox para layouts fáciles

¡En la próxima lección, empezaremos con JavaScript! 🚀