Duración estimada: 2 horas

Objetivos de aprendizaje

Entender qué es CSS y cómo se relaciona con HTML
Conocer las tres formas de incluir CSS: inline, interno y externo
Aplicar estilos usando selectores de etiqueta, clase e id
Usar propiedades básicas: color, background-color, font-size, font-family, margin, padding
Comprender la cascada y la especificidad en CSS

Sesión 04 - Introducción a CSS

Contenidos de la Sesión

1. Introducción a CSS

CSS (Cascading Style Sheets) es un lenguaje de hojas de estilo que se utiliza para describir la presentación de documentos HTML. Mientras HTML define la estructura y el contenido, CSS controla cómo se ve ese contenido en pantalla, papel u otros medios.

¿Por qué usar CSS?

Separación de contenido y presentación: Mantiene el HTML limpio y enfocado en la estructura
Reutilización: Los mismos estilos se pueden aplicar a múltiples elementos
Mantenibilidad: Es más fácil actualizar el diseño de todo un sitio
Consistencia: Garantiza un aspecto uniforme en todo el sitio web
Responsive design: Permite adaptar el diseño a diferentes tamaños de pantalla

2. Lugares donde Colocar CSS (CSS Places)

Existen tres formas de incluir CSS en una página HTML. Cada una tiene sus casos de uso, pero se recomienda encarecidamente usar CSS externo para proyectos profesionales.

CSS Inline (En línea)

CSS inline se aplica directamente en el elemento HTML usando el atributo style.

Sintaxis:

<p style="color: red; font-size: 16px;">Este es un párrafo con estilo inline</p>

Características:

Se aplica directamente en la etiqueta HTML
Tiene la máxima prioridad (especificidad más alta)
Solo afecta al elemento específico
No se puede reutilizar

Important

NO USAR CSS INLINE

Dificulta el mantenimiento del código
Mezcla contenido con presentación
No es reutilizable
Hace el HTML más difícil de leer
Dificulta las actualizaciones masivas de estilos

Única excepción: En emails HTML donde el soporte de CSS externo es limitado.

CSS Internal (Interno)

CSS interno se define dentro del documento HTML usando la etiqueta <style> en el <head>.

Sintaxis:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Ejemplo CSS Interno</title>
    <style>
      p {
        color: blue;
        font-size: 18px;
      }
      .destacado {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>Este párrafo tendrá los estilos definidos arriba.</p>
    <p class="destacado">Este párrafo también está destacado.</p>
  </body>
</html>

Características:

Se define en la sección <head> del documento
Afecta solo al documento HTML actual
Permite reutilización dentro de la misma página
Aumenta el tamaño del archivo HTML

Important

NO USAR CSS INTERNO

No se puede compartir entre múltiples páginas
Aumenta el tamaño de cada archivo HTML
Dificulta el mantenimiento en sitios con múltiples páginas
Los estilos no se pueden cachear por separado
Mezcla estructura con presentación

Única excepción: Para estilos críticos “above the fold” en optimización de rendimiento avanzada.

CSS External (Externo) ✅

CSS externo se define en un archivo separado con extensión .css y se vincula al HTML usando la etiqueta <link>.

Sintaxis:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Ejemplo CSS Externo</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <p>Este párrafo tendrá los estilos definidos en styles.css</p>
  </body>
</html>

Archivo styles.css:

p {
  color: green;
  font-size: 20px;
}

Características:

Los estilos se definen en un archivo .css separado
Se vincula mediante <link rel="stylesheet" href="ruta/archivo.css">
Un solo archivo CSS puede ser usado por múltiples páginas HTML
Los navegadores pueden cachear el archivo CSS
Separa completamente contenido de presentación

Important

USAR SIEMPRE CSS EXTERNO

Ventajas:

✅ Reutilizable en múltiples páginas
✅ Fácil mantenimiento y actualización
✅ Mejor rendimiento (caching del navegador)
✅ Código más limpio y organizado
✅ Separación clara de responsabilidades
✅ Facilita el trabajo en equipo
✅ Permite usar preprocesadores (Sass, Less)

Estructura recomendada:

proyecto/
├── index.html
├── about.html
└── css/
    ├── styles.css
    └── reset.css

Múltiples archivos CSS:

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

El orden importa: los estilos se aplican en cascada, los últimos pueden sobrescribir a los primeros.

3. Selectores CSS (CSS Selectors)

Los selectores CSS son patrones que se utilizan para seleccionar y aplicar estilos a elementos HTML específicos.

Selector universal (universal Selector)

TBD

Selector de Etiqueta (Tag Selector)

Selecciona todos los elementos de un tipo específico de etiqueta HTML.

Sintaxis:

etiqueta {
  propiedad: valor;
}

Ejemplo:

/* Aplica a todos los párrafos */
p {
  color: blue;
  font-size: 16px;
}

/* Aplica a todos los h1 */
h1 {
  color: darkblue;
  font-size: 32px;
}

/* Aplica a todos los enlaces */
a {
  color: red;
  text-decoration: none;
}

Características:

Selecciona TODOS los elementos de ese tipo en la página
Es el selector más básico y general
Útil para estilos base que quieres en todos los elementos del mismo tipo

Selector de Clase (Class Selector)

Selecciona elementos mediante su atributo class. Múltiples elementos pueden compartir la misma clase.

Sintaxis:

.nombreClase {
  propiedad: valor;
}

Ejemplo HTML:

<p class="destacado">Primer párrafo destacado</p>
<p class="destacado">Segundo párrafo destacado</p>
<div class="contenedor">Contenedor especial</div>

Ejemplo CSS:

.destacado {
  background-color: yellow;
  font-weight: bold;
}

.contenedor {
  border: 2px solid black;
  padding: 15px;
}

Características:

Se denota con el símbolo . seguido del nombre de la clase
Puede aplicarse a múltiples elementos
Es el selector más usado y versátil
Permite reutilización de estilos
Especificidad media

Selector de ID (Id Selector)

Selecciona un elemento específico mediante su atributo id. El ID debe ser único en toda la página.

Sintaxis:

#nombreId {
  propiedad: valor;
}

Ejemplo HTML:

<div id="header">Cabecera Principal</div>
<p id="intro">Párrafo de introducción</p>

Ejemplo CSS:

#header {
  background-color: navy;
  color: white;
  padding: 20px;
}

#intro {
  font-size: 18px;
  font-weight: bold;
}

Características:

Se denota con el símbolo # seguido del nombre del ID
Solo puede aplicarse a un elemento (los IDs son únicos)
Tiene alta especificidad
Útil para elementos únicos en la página

Selectores Múltiples (Multiple Selectors)

Aplica los mismos estilos a múltiples selectores separándolos con comas.

Sintaxis:

selector1,
selector2,
selector3 {
  propiedad: valor;
}

Ejemplo:

h1,
h2,
h3 {
  font-family: Arial, sans-serif;
  color: darkblue;
}

.importante,
.destacado,
#principal {
  font-weight: bold;
}

Características:

Evita repetición de código
Aplica los mismos estilos a diferentes elementos
Mejora la mantenibilidad

Selectores Anidados (Nested Selectors)

Selecciona elementos que están dentro de otros elementos específicos.

Sintaxis:

selector1 selector2 {
  propiedad: valor;
}

Ejemplo HTML:

<div class="contenedor">
  <p>Este párrafo está dentro del contenedor</p>
  <span>Este span también</span>
</div>
<p>Este párrafo NO está en el contenedor</p>

Ejemplo CSS:

/* Solo los párrafos dentro de .contenedor */
.contenedor p {
  color: red;
}

/* Solo los spans dentro de divs */
div span {
  font-style: italic;
}

/* Anidación más específica */
header nav a {
  text-decoration: none;
  color: white;
}

Características:

Permite ser más específico en la selección
Se separan por espacios (descendientes en cualquier nivel)
El elemento final es el que recibe los estilos
Mayor especificidad

Otros selectores de combinación:

/* Hijo directo (solo primer nivel) */
div > p {
  margin: 0;
}

/* Hermano adyacente (inmediatamente después) */
h1 + p {
  font-size: 20px;
}

/* Hermanos generales (todos los que siguen) */
h1 ~ p {
  color: gray;
}

Práctica con CSS Diner

CSS Diner es un juego interactivo que te enseña selectores CSS de forma práctica y divertida.

¿Qué aprenderás?

Selectores básicos y avanzados
Selectores de atributos
Pseudo-clases
Combinadores
Especificidad de selectores

Tip

Completa todos los niveles de CSS Diner para dominar los selectores CSS. Es una forma entretenida y efectiva de aprender.

Otros recursos interactivos:

4. Propiedades CSS (CSS Properties)

Las propiedades CSS definen qué aspectos visuales de un elemento quieres cambiar. Aquí veremos las propiedades más fundamentales relacionadas con tipografía y colores.

Note

Popularidad de propiedades CSS

Puedes consultar las estadísticas de uso de propiedades CSS en navegadores reales: CSS Properties Popularity - Chrome Status

Las propiedades más usadas incluyen: display, width, height, color, background-color, font-size, margin, padding, entre otras.

`font-family`

Define la familia tipográfica (tipo de letra) que se usará para el texto.

Sintaxis:

selector {
  font-family: "Nombre de la fuente", fuente-alternativa, familia-genérica;
}

Ejemplo:

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1 {
  font-family: Georgia, "Times New Roman", serif;
}

code {
  font-family: "Courier New", Courier, monospace;
}

Familias genéricas:

serif: Fuentes con serifas (ej: Times New Roman, Georgia)
sans-serif: Fuentes sin serifas (ej: Arial, Helvetica)
monospace: Fuentes de ancho fijo (ej: Courier, Consolas)
cursive: Fuentes de tipo cursiva
fantasy: Fuentes decorativas

Buenas prácticas:

Siempre incluir una fuente genérica al final como fallback
Usar comillas para nombres de fuentes con espacios
Listar fuentes en orden de preferencia (font stack)

`font-size`

Define el tamaño de la fuente.

Sintaxis:

selector {
  font-size: valor;
}

Ejemplo:

body {
  font-size: 16px;
}

h1 {
  font-size: 2.5rem; /* 40px si el base es 16px */
}

p {
  font-size: 1rem; /* 16px */
}

.small {
  font-size: 0.875rem; /* 14px */
}

Unidades comunes:

px: Píxeles (valor absoluto)
rem: Relativo al tamaño de fuente del elemento raíz (<html>)
em: Relativo al tamaño de fuente del elemento padre
%: Porcentaje del tamaño del padre

`line-height`

Define la altura de la línea (espacio vertical entre líneas de texto).

Sintaxis:

selector {
  line-height: valor;
}

Ejemplo:

body {
  line-height: 1.6; /* Sin unidad: multiplicador del font-size */
}

p {
  line-height: 24px; /* Valor fijo en píxeles */
}

h1 {
  line-height: 1.2; /* Títulos suelen tener menos espacio */
}

Buenas prácticas:

Usar valores sin unidad (ej: 1.5, 1.6) para mejor escalabilidad
Un line-height de 1.5-1.6 es ideal para lectura de texto
Títulos pueden usar valores más bajos (1.2-1.3)

`font-weight`

Define el grosor o peso de la fuente.

Sintaxis:

selector {
  font-weight: valor;
}

Valores comunes:

.light {
  font-weight: 300; /* Ligera */
}

.normal {
  font-weight: 400; /* Normal (default) */
  font-weight: normal; /* Equivalente a 400 */
}

.medium {
  font-weight: 500; /* Media */
}

.semibold {
  font-weight: 600; /* Semi-negrita */
}

.bold {
  font-weight: 700; /* Negrita */
  font-weight: bold; /* Equivalente a 700 */
}

.extrabold {
  font-weight: 800; /* Extra negrita */
}

Valores posibles:

Numéricos: 100, 200, 300, 400, 500, 600, 700, 800, 900
Palabras clave: normal (400), bold (700), lighter, bolder

Nota: No todas las fuentes soportan todos los pesos.

`font-style`

Define el estilo de la fuente (normal, cursiva, oblicua).

Sintaxis:

selector {
  font-style: valor;
}

Valores:

.normal {
  font-style: normal; /* Estilo normal (default) */
}

.italic {
  font-style: italic; /* Cursiva */
}

.oblique {
  font-style: oblique; /* Oblicua (inclinada) */
}

Ejemplo práctico:

em {
  font-style: italic; /* Los <em> suelen ser itálicos */
}

cite {
  font-style: italic; /* Las citas también */
}

`background-color`

Define el color de fondo de un elemento.

Sintaxis:

selector {
  background-color: valor;
}

Formatos de color:

/* Nombres de colores */
.box1 {
  background-color: red;
}

/* Hexadecimal */
.box2 {
  background-color: #ff0000;
  background-color: #f00; /* Forma corta */
}

/* RGB */
.box3 {
  background-color: rgb(255, 0, 0);
}

/* RGBA (con transparencia) */
.box4 {
  background-color: rgba(255, 0, 0, 0.5); /* 50% transparente */
}

/* HSL (Hue, Saturation, Lightness) */
.box5 {
  background-color: hsl(0, 100%, 50%);
}

/* Transparente */
.box6 {
  background-color: transparent;
}

`color`

Define el color del texto.

Sintaxis:

selector {
  color: valor;
}

Ejemplo:

body {
  color: #333; /* Gris oscuro para mejor legibilidad */
}

h1 {
  color: #1a1a1a; /* Casi negro */
}

a {
  color: #0066cc; /* Azul para enlaces */
}

.error {
  color: #d32f2f; /* Rojo para errores */
}

.success {
  color: #388e3c; /* Verde para éxito */
}

Contraste y accesibilidad:

Es importante mantener un buen contraste entre el color del texto y el fondo para legibilidad:

/* Buen contraste */
.readable {
  background-color: white;
  color: #222;
}

/* Mal contraste - evitar */
.bad-contrast {
  background-color: lightgray;
  color: gray;
}

Herramientas de contraste:

5. Google Fonts

Google Fonts es un servicio gratuito de Google que proporciona una biblioteca de fuentes tipográficas optimizadas para la web.

¿Por qué usar Google Fonts?

✅ Gratuito y de código abierto
✅ Fácil de implementar
✅ Optimizado para web (carga rápida)
✅ Gran variedad de fuentes profesionales
✅ Funciona en todos los navegadores
✅ CDN global (carga rápida en todo el mundo)

Cómo usar Google Fonts:

Paso 1: Seleccionar una fuente

Visita Google Fonts
Explora y selecciona la fuente que deseas
Haz clic en “Select this style” para los pesos que necesites

Paso 2: Copiar el código de importación

Hay dos formas de incluir Google Fonts:

Opción A: Usando <link> en HTML (recomendado)

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
    rel="stylesheet"
  />
</head>

Opción B: Usando @import en CSS

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

Paso 3: Usar la fuente en CSS

body {
  font-family: "Roboto", sans-serif;
}

Ejemplo completo:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Ejemplo Google Fonts</title>

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Playfair+Display:wght@400;700&display=swap"
      rel="stylesheet"
    />

    <style>
      body {
        font-family: "Roboto", sans-serif;
        font-weight: 400;
      }

      h1 {
        font-family: "Playfair Display", serif;
        font-weight: 700;
      }

      .light {
        font-weight: 300;
      }

      .bold {
        font-weight: 700;
      }
    </style>
  </head>
  <body>
    <h1>Título con Playfair Display</h1>
    <p>Texto normal con Roboto</p>
    <p class="light">Texto ligero con Roboto</p>
    <p class="bold">Texto negrita con Roboto</p>
  </body>
</html>

Fuentes populares de Google Fonts:

Roboto: Moderna, limpia, versátil
Open Sans: Legible, neutral, profesional
Lato: Elegante, amigable
Montserrat: Geométrica, moderna
Poppins: Geométrica, amigable
Playfair Display: Elegante, para títulos
Merriweather: Serif, ideal para lectura

Buenas prácticas:

No cargar demasiadas fuentes (máximo 2-3)
Cargar solo los pesos que realmente necesitas
Usar display=swap para mejor rendimiento
Usar preconnect para optimizar la carga

Recursos adicionales:

6. Unidades CSS (CSS Units)

Las unidades CSS determinan el tamaño de los elementos. Hay dos tipos principales: absolutas y relativas.

Unidades Absolutas

px (Píxeles)

El píxel es una unidad de medida fija que no cambia según el contexto.

Características:

Valor absoluto y fijo
1px = 1 píxel en la pantalla (aproximadamente)
Fácil de entender y usar
No es responsive por naturaleza
Ignora las preferencias de accesibilidad del usuario

Ejemplo:

.box {
  width: 200px;
  height: 100px;
  font-size: 16px;
  border: 2px solid black;
}

Cuándo usar px:

Bordes (border: 1px solid)
Sombras (box-shadow)
Detalles muy específicos
Medidas muy pequeñas

Limitaciones:

No se adapta al tamaño de fuente preferido del usuario
Menos flexible para diseño responsive
Puede causar problemas de accesibilidad

Unidades Relativas

rem (Root Em)

rem es relativo al tamaño de fuente del elemento raíz (<html>).

Cómo funciona:

1rem = tamaño de fuente del elemento <html>
Por defecto, 1rem = 16px (si no se modifica)
Si cambias el font-size de <html>, todos los rem se ajustan

Ejemplo:

html {
  font-size: 16px; /* Base: 1rem = 16px */
}

body {
  font-size: 1rem; /* 16px */
}

h1 {
  font-size: 2.5rem; /* 40px */
}

.small {
  font-size: 0.875rem; /* 14px */
}

.container {
  width: 60rem; /* 960px */
  padding: 2rem; /* 32px */
  margin: 1.5rem; /* 24px */
}

Ventajas de rem:

✅ Consistente en toda la página
✅ Respeta las preferencias del usuario
✅ Fácil de escalar todo el diseño
✅ Mejor para accesibilidad
✅ Cálculo sencillo (siempre relativo a la raíz)

Técnica popular: Base de 10px

html {
  font-size: 62.5%; /* 10px (62.5% de 16px) */
}

body {
  font-size: 1.6rem; /* 16px */
}

h1 {
  font-size: 3.2rem; /* 32px */
}

.small {
  font-size: 1.4rem; /* 14px */
}

Esto hace los cálculos más intuitivos: 1.6rem = 16px, 2.4rem = 24px, etc.

em (Em)

em es relativo al tamaño de fuente del elemento padre.

Cómo funciona:

1em = tamaño de fuente del elemento padre
Se hereda y se multiplica en elementos anidados
Puede ser confuso en estructuras profundas

Ejemplo:

.parent {
  font-size: 20px;
}

.child {
  font-size: 0.8em; /* 16px (0.8 * 20px) */
  padding: 1em; /* 16px (1 * 16px del font-size del propio .child) */
}

.grandchild {
  font-size: 0.5em; /* 8px (0.5 * 16px del padre) */
}

Problema de compounding (efecto multiplicador):

div {
  font-size: 1.2em;
}

<div>
  <!-- 1.2em -->
  <div>
    <!-- 1.2 * 1.2 = 1.44em -->
    <div><!-- 1.2 * 1.44 = 1.728em --></div>
  </div>
</div>

Cada nivel multiplica el tamaño, lo que puede causar problemas inesperados.

Cuándo usar em:

Para padding/margin que debe escalar con el texto
Para componentes que deben ser proporcionales a su contexto
Cuando quieres que algo se adapte al tamaño de su padre

Ejemplo práctico:

button {
  font-size: 1rem;
  padding: 0.5em 1em; /* El padding se adapta al tamaño del texto del botón */
  border-radius: 0.25em;
}

Comparación y Recomendaciones

Tabla comparativa:

Unidad	Relativa a	Uso recomendado	Ejemplo
`px`	Nada (absoluta)	Bordes, sombras, detalles muy específicos	`border: 1px`
`rem`	Fuente del `<html>`	Font-sizes, espaciados principales, anchos/altos	`font-size: 2rem`
`em`	Fuente del padre	Padding/margin proporcional al texto del elemento	`padding: 1em`

Buenas prácticas:

✅ Usar rem para la mayoría de los tamaños (fuentes, espaciados, anchos)
✅ Usar em para padding/margin de componentes que deben escalar con su texto
✅ Usar px solo para bordes y detalles muy específicos
✅ Establecer una base clara en html para rem
❌ Evitar usar px para fuentes (afecta accesibilidad)
❌ Evitar anidaciones profundas con em (efecto multiplicador)

Ejemplo de sistema de diseño:

/* Base */
html {
  font-size: 16px; /* o 62.5% para base de 10px */
}

/* Tipografía */
body {
  font-size: 1rem; /* 16px */
  line-height: 1.6;
}

h1 {
  font-size: 2.5rem; /* 40px */
}
h2 {
  font-size: 2rem; /* 32px */
}
h3 {
  font-size: 1.5rem; /* 24px */
}

/* Espaciados */
.container {
  padding: 2rem; /* 32px */
  margin: 0 auto;
}

/* Componentes */
button {
  font-size: 1rem;
  padding: 0.75em 1.5em; /* Proporcional al texto */
  border: 1px solid; /* Valor fijo pequeño */
}

Ejemplo

CSS Intro - Curriculum Vitae con estilos

Aquí puedes ver un ejemplo práctico donde se aplican selectores, tipografía, colores y un archivo CSS externo.

Archivos del ejemplo:

index.html: Página principal con estructura HTML y enlace a CSS externo
otrapagina.html: Página adicional para practicar estilos compartidos
style.css: Hoja de estilos externa reutilizable

Recursos Adicionales y Práctica

Videos de Kevin Powell (CSS Expert)

Kevin Powell es uno de los mejores educadores de CSS en YouTube. Aquí algunos recursos recomendados:

Fundamentos de CSS:

Learn CSS in 20 Minutes - Introducción rápida y completa
CSS em and rem explained - Explicación de unidades relativas
CSS rem vs em units - Diferencias entre rem y em

Selectores CSS:

CSS Specificity explained - Entendiendo la especificidad
Learn CSS Pseudo-classes In 8 Minutes - Pseudo-clases

CSS Shorts (videos cortos):

YouTube Shorts - Kevin Powell - Tips rápidos de CSS

Canal principal:

Kevin Powell - Suscríbete para aprender CSS moderno

CSS Battle

CSS Battle es una plataforma de desafíos donde compites escribiendo el código CSS más corto posible para recrear diseños específicos.

¿Por qué practicar en CSS Battle?

🎯 Mejora tu comprensión de propiedades CSS
🧠 Desarrolla pensamiento creativo para resolver problemas
⚡ Aprendes técnicas avanzadas y trucos de CSS
🏆 Compites con otros desarrolladores
🎨 Practicas con diseños visuales reales

Cómo empezar:

Visita cssbattle.dev
Regístrate gratis
Comienza con los targets del Battle #1
Intenta recrear el diseño con CSS
Compara tu solución con otras de la comunidad

Niveles de dificultad:

Battles numerados progresivamente (Battle #1, #2, #3…)
Cada battle tiene múltiples targets
Comienza con los primeros para aprender los fundamentos

Tip

No te preocupes por hacer el código más corto al principio. Enfócate en lograr el diseño correctamente. Con la práctica aprenderás a optimizar.

Ejemplo de un target:

Target #1: Simply Square
Recrear un cuadrado naranja centrado en un fondo azul

Recursos de CSS Battle:

CSS Battle - Plataforma principal
CSS Battle Solutions - Soluciones en GitHub
CSS Battle Tips - Consejos y técnicas

Resumen

En esta sesión hemos aprendido:

✅ Qué es CSS y por qué es fundamental en desarrollo web
✅ Los tres lugares donde se puede colocar CSS (inline, internal, external)
✅ PARA NO SUSPENDER: Usar siempre CSS externo para proyectos profesionales
✅ Selectores CSS: etiqueta, ID, clase, múltiples, anidados…
✅ Propiedades CSS fundamentales de tipografía y color
✅ Cómo usar Google Fonts en nuestros proyectos
✅ Unidades CSS: px, rem y em, y cuándo usar cada una
✅ Recursos para seguir aprendiendo: Kevin Powell y CSS Battle

Lo más importante:

Important

NO USAR CSS INLINE ❌
NO USAR CSS INTERNAL ❌
USAR SIEMPRE CSS EXTERNAL ✅

Esto garantiza código mantenible, reutilizable y profesional.

Ejercicios prácticos

1. Estilizar el CV

Aplica estilos a la página de CV creada en la sesión 01: cambia colores, tipografía y añade separación entre secciones.
2. Hoja de estilos externa

Extrae todos los estilos inline de una página HTML existente a un archivo style.css externo y enlázalo correctamente.

Checklist final

Al terminar esta sesión deberías ser capaz de:

Sé enlazar una hoja de estilos externa con <link>
Puedo usar selectores de etiqueta, clase (.clase) e id (#id)
Entiendo la diferencia entre margin y padding
Comprendo cómo funciona la cascada: a igual especificidad, gana el último estilo
Sé aplicar colores con nombre, hex y rgb

🎯 Objetivos de aprendizaje

Sesión 04 - Introducción a CSS

Contenidos de la Sesión

1. Introducción a CSS

2. Lugares donde Colocar CSS (CSS Places)

CSS Inline (En línea)

CSS Internal (Interno)

CSS External (Externo) ✅

3. Selectores CSS (CSS Selectors)

Selector universal (universal Selector)

Selector de Etiqueta (Tag Selector)

Selector de Clase (Class Selector)

Selector de ID (Id Selector)

Selectores Múltiples (Multiple Selectors)

Selectores Anidados (Nested Selectors)

Práctica con CSS Diner

4. Propiedades CSS (CSS Properties)

font-family

font-size

line-height

font-weight

font-style

background-color

color

5. Google Fonts

6. Unidades CSS (CSS Units)

Unidades Absolutas

Unidades Relativas

Comparación y Recomendaciones

Ejemplo

CSS Intro - Curriculum Vitae con estilos

Recursos Adicionales y Práctica

Videos de Kevin Powell (CSS Expert)

CSS Battle

Resumen

💻 Ejercicios prácticos

✅ Checklist final

Objetivos de aprendizaje

`font-family`

`font-size`

`line-height`

`font-weight`

`font-style`

`background-color`

`color`

Ejercicios prácticos

Checklist final