El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En esta sección, aprenderás las diferentes maneras de añadir CSS a un documento HTML. Existen tres métodos principales para hacerlo: 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 utilizarlos.

Métodos para Añadir CSS

CSS en Línea

El CSS en línea se aplica directamente a un elemento HTML utilizando el atributo style. Este método es útil para aplicar estilos únicos 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 CSS en línea.</p>
</body>
</html>

Explicación:

El atributo style se utiliza dentro de la etiqueta HTML para aplicar estilos específicos.
En el ejemplo, el título <h1> se estiliza con color azul y alineación centrada, mientras que el párrafo <p> tiene un tamaño de fuente de 20px y color verde.

CSS Interno

El CSS interno se coloca dentro de la sección <head> de un documento HTML, utilizando la etiqueta <style>. 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 CSS interno.</p>
</body>
</html>

Explicación:

La etiqueta <style> se coloca dentro de la sección <head>.
Los selectores h1 y p se utilizan para aplicar estilos a todos los elementos <h1> y <p> en la página.

CSS Externo

El CSS externo se coloca en un archivo separado con la extensión .css. Este método es ideal para aplicar estilos a múltiples páginas, manteniendo el código CSS separado del 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 CSS 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 HTML se utiliza para enlazar el archivo CSS externo.
El archivo styles.css contiene los estilos que se aplicarán a los elementos <h1> y <p>.

Comparación de Métodos

Método	Ventajas	Desventajas
CSS en Línea	Rápido y fácil de aplicar a elementos individuales.	Difícil de mantener y no reutilizable.
CSS Interno	Útil para estilos específicos de una sola página.	No reutilizable en múltiples páginas.
CSS Externo	Facilita la reutilización y el mantenimiento del código CSS.	Requiere un archivo adicional y puede aumentar el tiempo de carga inicial.

Ejercicio Práctico

Instrucciones:

Crea un archivo HTML llamado index.html.
Crea un archivo CSS llamado styles.css.
Enlaza el archivo CSS externo en el archivo HTML.
Aplica estilos a un título <h1> y un párrafo <p> utilizando el archivo CSS externo.

Solución:

Archivo HTML (index.html):

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio de CSS Externo</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Bienvenido a mi Sitio Web</h1>
    <p>Este es un párrafo estilizado con CSS externo.</p>
</body>
</html>

Archivo CSS (styles.css):

h1 {
    color: darkred;
    text-align: left;
}

p {
    font-size: 18px;
    color: darkblue;
}

Explicación:

El archivo index.html enlaza el archivo styles.css utilizando la etiqueta <link>.
El archivo styles.css contiene los estilos para el título <h1> y el párrafo <p>.

Conclusión

En esta lección, has aprendido tres métodos para añadir 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 dependerá de tus necesidades específicas. Ahora estás listo para aplicar estilos a tus páginas web de manera eficiente y organizada. En la próxima lección, exploraremos las propiedades básicas de CSS para que puedas empezar a estilizar tus elementos HTML con mayor detalle.

Cómo Añadir CSS a HTML

Métodos para Añadir CSS

CSS en Línea

CSS Interno

CSS Externo

Comparación de Métodos

Ejercicio Práctico

Conclusión

Maestría en CSS: De Principiante a Avanzado

Módulo 1: Introducción a CSS

Módulo 2: Estilización de Texto y Fuentes

Módulo 3: Modelo de Caja y Diseño

Módulo 4: Posicionamiento y Flotación

Módulo 5: Flexbox

Módulo 6: CSS Grid

Módulo 7: Técnicas Avanzadas de CSS

Módulo 8: Diseño Responsivo

Módulo 9: Preprocesadores y Frameworks

Módulo 10: Mejores Prácticas y Optimización

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