CSS para principiantes

Qué es CSS, cómo integrarlo y cómo empezar a estilizar tu portafolio.

Nivel: PrincipianteDuración: 60 minModalidad: Virtual/Presencial

Objetivos de aprendizaje

Al finalizar podrás:

Comprender qué es CSS y su propósito

Aplicar selectores y propiedades básicas

Diferenciar estilos inline/interno/externo

Comenzar a estilizar tu portafolio personal

Idea clave

HTML = estructura
CSS = presentación

Separar el contenido del diseño es fundamental para un desarrollo web limpio y mantenible.

Temario y plan de tiempos

Tema	Duración	Tipo
Apertura y presentación	5'	Introducción
¿Qué es CSS?	10'	Teoría
Formas de aplicar CSS	10'	Práctica
Selectores básicos	10'	Práctica
Propiedades fundamentales	15'	Práctica
Cascada y herencia	5'	Teoría
Cierre y recursos	5'	Conclusión

¿Qué es CSS?

📘 Teoría vs simple

CSS (Cascading Style Sheets) es un lenguaje de hojas de estilo utilizado para describir la presentación de un documento escrito en HTML.

CSS permite separar el contenido (HTML) del diseño, facilitando el mantenimiento y la reutilización de estilos en múltiples páginas web.

Ejemplo comparativo:

Sin CSS:

Título sin estilo

Párrafo sin formato.

Con CSS:

Título estilizado

Párrafo con formato mejorado.

Formas de aplicar CSS

CSS Inline

Se aplica directamente en el atributo style del elemento HTML

Ejemplo:

<p style="color:blue;">Texto azul</p>

✅ Ventajas:

• Rápido para pruebas
• Alta especificidad

❌ Desventajas:

• Difícil de mantener
• No reutilizable
• Mezcla contenido y diseño

Buenas prácticas: Prioriza CSS externo por mantenibilidad. Usa inline solo para estilos únicos o dinámicos específicos.

Selectores básicos

🎯 práctica breve

Por etiqueta

Selecciona todos los elementos de ese tipo

h1 { color: red; }

Por clase

Selecciona elementos con esa clase

.destacado

.destacado { font-weight: bold; }

Por ID

Selecciona el elemento con ese ID único

#titulo

#titulo { font-size: 24px; }

Combinados

Selecciona elementos anidados

header nav a

header nav a { text-decoration: none; }

Playground simple de selectores

Prueba cómo funcionan los selectores con este HTML de ejemplo

Vista previa:

Hola, soy Alex

Sobre mí

Desarrollador web en formación.

Prueba los selectores:

CSS aplicado:

/* Ningún estilo aplicado */

Propiedades fundamentales

🧰 esenciales

color

Color del texto

color: #333;

background-color

Color de fondo

background-color: #f0f0f0;

font-family

Familia de fuente

font-family: Arial, sans-serif;

font-size

Tamaño de fuente

font-size: 16px;

font-weight

Peso de fuente

font-weight: bold;

text-align

Alineación de texto

text-align: center;

margin

Margen exterior

margin: 10px;

padding

Relleno interior

padding: 8px;

border

Borde del elemento

border: 1px solid #ccc;

Panel de prueba

Experimenta con las propiedades y ve los cambios en tiempo real

Color de texto

Color de fondo

Familia de fuente

Tamaño de fuente: 16px

Alineación

Margen: 10px

Padding: 8px

Border radius: 8px

Vista previa:

Tarjeta de ejemplo

Este es un párrafo de ejemplo para probar las propiedades CSS.

CSS generado:

{
  color: #1f2937;
  background-color: #f8fafc;
  font-family: sans-serif;
  font-size: 16px;
  text-align: left;
  margin: 10px;
  padding: 8px;
  border-radius: 8px;
}

Cascada y herencia

🪜 especificidad

¿Cómo decide CSS qué estilo aplicar?

Cuando hay múltiples reglas CSS que afectan al mismo elemento, CSS sigue un orden de prioridad llamado cascada:

Origen: Estilos del usuario vs. del autor
Importancia: !important tiene prioridad
Especificidad: Qué tan específico es el selector
Orden: El último en aparecer gana

Escalera de especificidad

Inline style

style="color: red"

1000 pts

#titulo

100 pts

Clase

.destacado

10 pts

Elemento

h1

1 pts

Ejemplo práctico

CSS:

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

Resultado:

Este párrafo será rojo porque el selector 'p' es más específico que 'body' para este elemento.

Importante: No todas las propiedades se heredan. Por ejemplo, borders, margins y paddings NO se heredan de elementos padre a hijo.

Portafolio: primer estilizado

🚀 manos a la obra

Starter Kit - HTML base

Estructura básica de un portafolio personal para empezar a estilizar

HTML:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Mi Portafolio</title>
  <link rel="stylesheet" href="style.css"/>
</head>
<body>
  <header id="titulo">
    <h1 class="destacado">Hola, soy Alex</h1>
    <nav>
      <a href="#">Inicio</a>
      <a href="#">Proyectos</a>
      <a href="#">Contacto</a>
    </nav>
  </header>
  <main>
    <section>
      <h2>Sobre mí</h2>
      <p>Desarrollador web en formación.</p>
    </section>
  </main>
</body>
</html>

CSS de arranque (style.css):

/* Tipografía y colores */
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #1f2937; /* gris-800 */
  background-color: #f8fafc; /* slate-50 */
}

/* Títulos */
h1 { color: #0f172a; /* slate-900 */ }
h2 { color: #334155; }

/* Espaciado y bordes en párrafos */
p {
  margin: 10px 0;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

/* Navegación */
header nav a {
  text-decoration: none;
  color: #0369a1;
  margin-right: 12px;
}

/* Ejemplo de override específico */
#titulo h1.destacado {
  font-weight: 700;
}

Buenas prácticas: Mantén una estructura HTML limpia y semántica. Organiza tus estilos en un archivo style.css separado para mejor mantenimiento.

Errores frecuentes y cómo corregirlos

🚧

Olvidar unidades

❌ Incorrecto:

font-size: 12

✅ Correcto:

font-size: 12px

CSS requiere unidades para la mayoría de valores numéricos

Usar = en vez de :

❌ Incorrecto:

color = red

✅ Correcto:

color: red

CSS usa dos puntos (:) para separar propiedad y valor

Repetir IDs

❌ Incorrecto:

<div id="box"></div>
<div id="box"></div>

✅ Correcto:

<div id="box1"></div>
<div id="box2"></div>

Los IDs deben ser únicos en cada página

Abusar de inline

❌ Incorrecto:

<p style="color:red;font-size:14px;">

✅ Correcto:

<p class="texto-destacado">

Usa clases CSS en lugar de estilos inline para mejor mantenimiento

Olvidar <link>

❌ Incorrecto:

<!-- Sin enlace al CSS -->

✅ Correcto:

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

Recuerda enlazar tu archivo CSS en el <head>

Selectores mal escritos

❌ Incorrecto:

.mi clase { color: red; }

✅ Correcto:

.mi-clase { color: red; }

Los nombres de clase no pueden tener espacios

Quiz rápido

📝 autoevaluación

Pon a prueba tus conocimientos

5 preguntas sobre los conceptos básicos de CSS

1. ¿Qué significa CSS?

2. ¿Cuál es la forma más recomendada de aplicar CSS?

3. ¿Qué selector tiene mayor especificidad?

4. ¿Cuál es la propiedad para cambiar el color del texto?

5. ¿Qué propiedad NO se hereda por defecto?

Recursos y siguiente paso

📚

Documentación oficial

Próximos temas sugeridos:

• Flexbox y Grid Layout
• Responsive Design
• Animaciones CSS
• Preprocesadores (Sass/Less)

CSS para principiantes

Objetivos de aprendizaje

Temario y plan de tiempos

¿Qué es CSS?

Ejemplo comparativo:

Título sin estilo

Título estilizado

Formas de aplicar CSS

Ejemplo:

✅ Ventajas:

❌ Desventajas:

Selectores básicos

Vista previa:

Sobre mí

Prueba los selectores:

CSS aplicado:

Propiedades fundamentales

color

background-color

font-family

font-size

font-weight

text-align

margin

padding

border

Vista previa:

Tarjeta de ejemplo

CSS generado:

Cascada y herencia

CSS:

Resultado:

Portafolio: primer estilizado

HTML:

CSS de arranque (style.css):

Errores frecuentes y cómo corregirlos

Quiz rápido

1. ¿Qué significa CSS?

2. ¿Cuál es la forma más recomendada de aplicar CSS?

3. ¿Qué selector tiene mayor especificidad?

4. ¿Cuál es la propiedad para cambiar el color del texto?

5. ¿Qué propiedad NO se hereda por defecto?

Recursos y siguiente paso

MDN Web Docs - CSS

CSS Reference

CodePen

Próximos temas sugeridos: