Cómo importar un archivo CSS a un documento HTML

Aprender a importar un archivo CSS a un documento HTML es fundamental para personalizar y dar estilo a tus páginas web. En este breve tutorial te explicaremos de forma sencilla y clara cómo hacerlo. ¡Sigue leyendo para darle un toque único a tu sitio web!

Cómo incluir CSS en HTML

CSS se utiliza para dar estilo y presentación a las páginas web HTML. Para incluir CSS en un documento HTML, se pueden utilizar diferentes métodos como **CSS interno, CSS externo y CSS en línea**.

#### CSS interno:
Se utiliza la etiqueta <style> dentro de la sección <head> del documento HTML para incluir CSS internamente. Aquí un ejemplo:

<head>
    <style>
        body {
            background-color: lightblue;
        }
    </style>
</head>

#### CSS externo:
Puedes enlazar un archivo CSS externo al documento HTML utilizando la etiqueta <link> dentro de la sección <head>. Un ejemplo de esto sería:

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

#### CSS en línea:
Para aplicar CSS directamente en una etiqueta HTML, se usa el atributo style. Por ejemplo:

<p style="color: red;">Este es un párrafo rojo</p>

**Resumen**:
– **CSS interno:** dentro de la etiqueta <style> en el <head>.
– **CSS externo:** enlazando un archivo CSS externo con la etiqueta <link>.
– **CSS en línea:** utilizando el atributo style en las etiquetas HTML.

Es importante recordar que el uso de CSS ayuda a mantener la presentación y el diseño de un sitio web separado del contenido, lo que facilita la mantenibilidad y escalabilidad del mismo.

Vincular un CSS a un archivo HTML: Guía paso a paso

Para vincular un archivo CSS a un documento HTML, sigue estos pasos:

Crea tu archivo CSS: Puedes crear un archivo de estilo CSS con la extensión .css. Este archivo contendrá tus reglas de estilo.
Vincula tu archivo CSS a tu archivo HTML: Para ello, utiliza la etiqueta <link> en la sección <head> de tu documento HTML. El atributo href apunta a la ubicación del archivo CSS y el atributo rel="stylesheet" indica al navegador que se trata de un archivo de estilo.
Ejemplo de código HTML:


<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="styles.css">
</head>
<body>
   <h1>Mi página con estilo</h1>
   <p>Contenido de la página.</p>
</body>
</html>

Asegúrate de que la ruta especificada en el atributo href sea correcta para que el navegador pueda cargar el archivo CSS correctamente y aplicar los estilos a tu documento HTML.

Cómo vincular un archivo CSS en HTML

Cuando se trabaja con HTML, es común necesitar vincular un archivo CSS para estilizar una página web. La forma de hacerlo es utilizando la etiqueta <link> en la sección <head> de tu documento HTML. Aquí tienes los pasos básicos:

Crear el archivo CSS: Es importante tener el archivo CSS con los estilos que deseas aplicar a tu página web.
Agregar la etiqueta <link> en el HTML: Debes añadir una línea de código dentro del elemento <head> de tu documento HTML como se muestra a continuación:

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

Donde:

Ver más Reducir el tamaño de una imagen en HTML

Atributo	Descripción
rel=»stylesheet»	Define la relación del archivo enlazado, en este caso, es una hoja de estilos.
type=»text/css»	Especifica el tipo de archivo. En este caso, CSS.
href=»styles.css»	Indica la ubicación del archivo CSS a enlazar. Asegúrate de que la ruta sea correcta.

Con estos pasos, habrás vinculado con éxito tu archivo CSS a tu documento HTML, permitiendo que los estilos se apliquen a tu página web de manera adecuada.

Para importar un archivo CSS a un documento HTML, se utiliza la etiqueta <link rel="stylesheet" href="nombre_archivo.css">. Este código vincula el archivo CSS al HTML, permitiendo aplicar estilos al contenido. Recuerda guardar ambos archivos en la misma carpeta para que funcione correctamente. ¡Hasta pronto!