Tema 7 · Estilos y Citas

Inclusión de CSS y Colores Web

Descubre las tres formas de conectar CSS con HTML (en línea, interno y externo) y domina los sistemas de color RGB, HEX y HSL.

Citas, Abreviaturas y Comentarios Enlaces e Hipervínculos (<a>)

Las 3 Formas de Conectar CSS con HTML

HTML define la estructura de un sitio web, mientras que CSS (Cascading Style Sheets) controla su presentación visual. Existen tres métodos para enlazar CSS a un documento HTML:

Método Sintaxis Uso Recomendado
En línea (Inline) <h1 style="color: blue;"> Pruebas rápidas o cambios muy puntuales. No recomendado para sitios reales porque mezcla contenido con diseño.
Interno (Internal) <head> <style> ... </style> </head> Excelente para páginas únicas (como landings o emails HTML) donde los estilos no se comparten con otras vistas.
Externo (External) <link rel="stylesheet" href="styles.css"> El estándar profesional de la industria. Permite controlar el diseño de cientos de páginas web desde un único archivo CSS centralizado.

Sistemas de Color en HTML y CSS

En la web puedes definir colores de cuatro formas principales:

  • Nombres de Color: HTML soporta 140 nombres estándar de colores (ej: DodgerBlue, Tomato, SlateBlue, SeaGreen).
  • Valores HEX: Notación hexadecimal de 6 dígitos que va desde #000000 (negro) hasta #FFFFFF (blanco) en formato #RRGGBB.
  • RGB / RGBA: rgb(rojo, verde, azul) con valores de 0 a 255. Con rgba(r, g, b, alfa) puedes definir un canal de transparencia que va de 0.0 (totalmente transparente) a 1.0 (opaco).
  • HSL / HSLA: Matiz (Hue: 0-360°), Saturación (Saturation: 0-100%) y Luminosidad (Lightness: 0-100%). Es el sistema más intuitivo para generar paletas de color armónicas.

⚡ Modelos de Color y Métodos de Estilo

Observa cómo interactúan estilos internos con clases y cajas de colores en formatos HEX, RGBA y HSL:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Colores y Estilos en HTML5</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .paleta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 15px; margin-top: 15px; }
    .color-card {
      border-radius: 8px;
      padding: 16px;
      color: white;
      font-weight: bold;
      text-align: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>

  <!-- Título con estilo inline -->
  <h2 style="color: #0f172a; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px;">
    Muestrario de Modelos de Color
  </h2>

  <div class="paleta-grid">
    <!-- Nombre estándar -->
    <div class="color-card" style="background-color: Tomato;">
      Tomato<br><small>Palabra Clave</small>
    </div>

    <!-- Hexadecimal -->
    <div class="color-card" style="background-color: #3b82f6;">
      #3B82F6<br><small>Hexadecimal</small>
    </div>

    <!-- RGB -->
    <div class="color-card" style="background-color: rgb(16, 185, 129);">
      rgb(16, 185, 129)<br><small>RGB Nativo</small>
    </div>

    <!-- RGBA con transparencia -->
    <div class="color-card" style="background-color: rgba(139, 92, 246, 0.85);">
      rgba(...)<br><small>Con Alfa (85%)</small>
    </div>

    <!-- HSL -->
    <div class="color-card" style="background-color: hsl(25, 95%, 53%);">
      hsl(25, 95%, 53%)<br><small>HSL Armónico</small>
    </div>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de HTML5 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.