El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este tema, aprenderás cómo vincular hojas de estilo CSS a tu documento HTML para estilizar tus páginas web. CSS (Cascading Style Sheets) es un lenguaje utilizado para describir la presentación de un documento HTML. Con CSS, puedes controlar el diseño, los colores, las fuentes y el espaciado de tus elementos HTML.

Métodos para Vincular CSS a HTML

Existen tres métodos principales para incluir CSS en un documento HTML:

CSS en Línea (Inline CSS)
CSS Interno (Internal CSS)
CSS Externo (External CSS)

CSS en Línea (Inline CSS)

El CSS en línea se aplica directamente a un elemento HTML utilizando el atributo style. Este método es útil para aplicar estilos específicos a un solo elemento.

Ejemplo:

<!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: 20px; color: green;">Este es un párrafo con estilo en línea.</p>
</body>
</html>

Explicación:

El atributo style se utiliza dentro de las etiquetas HTML para aplicar estilos específicos.
En el ejemplo, el encabezado <h1> tiene un color de texto azul y está centrado, mientras que el párrafo <p> tiene un tamaño de fuente de 20px y un color de texto verde.

CSS Interno (Internal CSS)

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.

Ejemplo:

<!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: 20px;
            color: green;
        }
    </style>
</head>
<body>
    <h1>Hola Mundo</h1>
    <p>Este es un párrafo con estilo interno.</p>
</body>
</html>

Explicación:

La etiqueta <style> se coloca dentro de la sección <head> del documento HTML.
Dentro de la etiqueta <style>, se definen los estilos CSS para los elementos HTML.
En el ejemplo, el encabezado <h1> y el párrafo <p> tienen los mismos estilos que en el ejemplo de CSS en línea, pero aplicados mediante CSS interno.

CSS Externo (External CSS)

El CSS externo se coloca en un archivo separado con la extensión .css. Este método es el más recomendado, ya que permite reutilizar el mismo archivo CSS en múltiples páginas HTML.

Ejemplo:

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 estilo externo.</p>
</body>
</html>

Archivo CSS (styles.css):

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

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

Explicación:

La etiqueta <link> en la sección <head> del documento HTML se utiliza para vincular el archivo CSS externo.
El atributo rel="stylesheet" indica que el archivo vinculado es una hoja de estilo.
El atributo href="styles.css" especifica la ruta al archivo CSS.
En el archivo styles.css, se definen los estilos CSS para los elementos HTML.

Ejercicio Práctico

Objetivo: Crear una página HTML que utilice los tres métodos de vinculación de CSS.

Instrucciones:

Crea un archivo HTML llamado index.html.
Crea un archivo CSS llamado styles.css.
Aplica estilos utilizando CSS en línea, interno y externo.

Solución:

Archivo HTML (index.html):

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio de Vinculación de CSS</title>
    <style>
        h2 {
            color: red;
            text-align: left;
        }
    </style>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 style="color: blue; text-align: center;">Hola Mundo</h1>
    <h2>Este es un encabezado con estilo interno.</h2>
    <p>Este es un párrafo con estilo externo.</p>
</body>
</html>

Archivo CSS (styles.css):

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

Explicación:

El encabezado <h1> utiliza CSS en línea.
El encabezado <h2> utiliza CSS interno.
El párrafo <p> utiliza CSS externo.

Conclusión

En esta lección, aprendiste cómo vincular CSS a un documento HTML utilizando tres métodos diferentes: 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 de las necesidades específicas de tu proyecto. En general, el uso de CSS externo es el más recomendado para mantener un código limpio y reutilizable.

Vinculando CSS a HTML

Métodos para Vincular CSS a HTML

CSS en Línea (Inline CSS)

CSS Interno (Internal CSS)

CSS Externo (External CSS)

Ejercicio Práctico

Conclusión

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