El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

CSS en Línea, Interno y Externo

Siguiente ►
►

En este tema, aprenderemos sobre las tres formas principales de aplicar CSS a un documento HTML: CSS en línea, CSS interno y CSS externo. Cada método tiene sus propias ventajas y desventajas, y es importante entender cuándo y cómo usarlos de manera efectiva.

  1. CSS en Línea

El CSS en línea se aplica directamente a los elementos HTML utilizando el atributo style. Este método es útil para aplicar estilos rápidos y específicos a un solo elemento, pero no es ideal para mantener un código limpio y organizado.

Ejemplo de CSS en Línea

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de CSS en Línea</title>
</head>
<body>
    <h1 style="color: blue; text-align: center;">Hola, Mundo!</h1>
    <p style="font-size: 16px; color: green;">Este es un párrafo con CSS en línea.</p>
</body>
</html>

Explicación

  • El atributo style se utiliza dentro de la etiqueta HTML.
  • Los estilos se definen como pares propiedad: valor separados por punto y coma.

Ventajas

  • Fácil de aplicar y entender para pequeños cambios.
  • No requiere un archivo CSS separado.

Desventajas

  • Difícil de mantener y escalar.
  • No promueve la separación de contenido y presentación.
  • Puede resultar en un código HTML desordenado.

  1. CSS Interno

El CSS interno se coloca dentro de una etiqueta <style> en la sección <head> del documento HTML. Este método es útil para aplicar estilos a una sola página web.

Ejemplo de CSS Interno

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de CSS Interno</title>
    <style>
        h1 {
            color: blue;
            text-align: center;
        }
        p {
            font-size: 16px;
            color: green;
        }
    </style>
</head>
<body>
    <h1>Hola, Mundo!</h1>
    <p>Este es un párrafo con CSS interno.</p>
</body>
</html>

Explicación

  • La etiqueta <style> se coloca dentro de la sección <head>.
  • Los estilos se aplican a través de selectores CSS, como h1 y p.

Ventajas

  • Útil para aplicar estilos a una sola página.
  • Mantiene el HTML más limpio en comparación con el CSS en línea.

Desventajas

  • No es reutilizable en otras páginas.
  • Puede hacer que el archivo HTML sea más grande y menos manejable.

  1. CSS Externo

El CSS externo se coloca en un archivo separado con extensión .css. Este archivo se vincula al documento HTML utilizando la etiqueta <link>. Este método es el más recomendado para proyectos grandes y sitios web con múltiples páginas.

Ejemplo de CSS Externo

Archivo HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de CSS Externo</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hola, Mundo!</h1>
    <p>Este es un párrafo con CSS externo.</p>
</body>
</html>

Archivo CSS (styles.css)

h1 {
    color: blue;
    text-align: center;
}

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

Explicación

  • La etiqueta <link> en la sección <head> se utiliza para vincular el archivo CSS externo.
  • Los estilos se definen en un archivo separado, lo que permite una mejor organización y reutilización.

Ventajas

  • Promueve la separación de contenido y presentación.
  • Facilita la reutilización de estilos en múltiples páginas.
  • Mantiene el HTML limpio y manejable.

Desventajas

  • Requiere la gestión de archivos adicionales.
  • Puede aumentar el tiempo de carga inicial si no se optimiza correctamente.

Ejercicio Práctico

Ejercicio 1: Aplicar Estilos Usando CSS en Línea, Interno y Externo

  1. Crea un archivo HTML llamado index.html.
  2. Aplica estilos en línea a un elemento <h1> y un <p>.
  3. Aplica estilos internos a otro elemento <h1> y <p> en la misma página.
  4. Crea un archivo CSS externo llamado styles.css y aplica estilos a un tercer conjunto de <h1> y <p>.

Solución

index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio de CSS</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        .internal-style {
            color: red;
            text-align: left;
        }
    </style>
</head>
<body>
    <h1 style="color: blue; text-align: center;">Estilo en Línea</h1>
    <p style="font-size: 16px; color: green;">Este es un párrafo con estilo en línea.</p>

    <h1 class="internal-style">Estilo Interno</h1>
    <p class="internal-style">Este es un párrafo con estilo interno.</p>

    <h1 class="external-style">Estilo Externo</h1>
    <p class="external-style">Este es un párrafo con estilo externo.</p>
</body>
</html>

styles.css

.external-style {
    color: purple;
    text-align: right;
}

Retroalimentación y Consejos

  • Errores Comunes: Olvidar cerrar las etiquetas de estilo o no vincular correctamente el archivo CSS externo.
  • Consejo: Siempre verifica la consola del navegador para detectar errores de sintaxis o problemas de vinculación de archivos.

Conclusión

En esta lección, hemos aprendido sobre las tres formas principales de aplicar CSS a un documento HTML: en línea, interno y externo. Cada método tiene sus propias ventajas y desventajas, y la elección del método adecuado depende del contexto y los requisitos del proyecto. En el próximo tema, exploraremos los selectores básicos de CSS y cómo utilizarlos para aplicar estilos de manera más eficiente.

◄ Anterior
◄
Siguiente ►
►

Curso de HTML

Módulo 1: Introducción a HTML

Módulo 2: Formateo de Texto en HTML

Módulo 3: Enlaces y Medios en HTML

Módulo 4: Tablas en HTML

Módulo 5: Formularios en HTML

Módulo 6: Elementos Semánticos de HTML5

Módulo 7: Técnicas Avanzadas de HTML

Módulo 8: Integración de HTML y CSS

Módulo 9: Diseño Web Responsivo

Módulo 10: Mejores Prácticas y Accesibilidad

Módulo 11: Proyecto: Construyendo un Sitio Web Completo

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados