Cómo enlazar CSS en HTML

Descubre la clave para dar estilo a tus páginas web: cómo enlazar CSS en HTML y elevar el diseño de tu sitio a otro nivel.

Cómo enlazar un HTML con un CSS

Para enlazar un archivo HTML con un archivo CSS y darle estilo a una página web, se utiliza la etiqueta <link> en la sección <head> del documento HTML. Este enlace permite que el navegador cargue el archivo CSS y aplique los estilos correspondientes al documento HTML.

El atributo href se utiliza para especificar la ruta o URL donde se encuentra el archivo CSS que se desea enlazar. Por ejemplo, si el archivo CSS se encuentra en la misma carpeta que el archivo HTML, la etiqueta de enlace se vería así:

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

La relación rel="stylesheet" indica que el archivo enlazado es una hoja de estilos. También es posible utilizar el atributo type="text/css" para especificar el tipo de archivo siendo enlazado, en este caso, un archivo CSS.

Cómo incluir CSS en HTML

Para incluir CSS en HTML, existen varias formas de hacerlo:

**CSS Externo:** Se puede enlazar un archivo CSS externo a un documento HTML utilizando la etiqueta <link>. Por ejemplo:
```
<head>
    <link rel="stylesheet" type="text/css" href="estilos.css">
</head>
        
```

**CSS Interno:** También se puede incluir CSS directamente en el documento HTML usando la etiqueta <style>. Por ejemplo:

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

**CSS en línea:** Se puede aplicar CSS directamente a un elemento HTML utilizando el atributo style. Por ejemplo:
```
<p style="color: red;">Este es un párrafo rojo</p>
        
```

Además de estas formas básicas de incluir CSS en HTML, es importante recordar que el orden de las reglas CSS es crucial, ya que se aplican en cascada. Esto significa que las reglas más específicas tienen prioridad sobre las más generales.

Por lo tanto, para mantener un código limpio y estructurado, se suele recomendar el uso de CSS externo para separar el diseño del contenido en archivos independientes.

Incorporar un archivo CSS en HTML

Para incorporar un archivo CSS en HTML y así poder aplicar estilos a un documento web, se utiliza la etiqueta <link> en la sección <head> del archivo HTML. Este enlace debe hacer referencia al archivo CSS externo que se desea utilizar.

El atributo href de la etiqueta <link> se utiliza para indicar la ruta del archivo CSS que se va a incorporar. Es importante asegurarse de que la ruta especificada sea correcta para que el navegador pueda encontrar y aplicar los estilos correctamente.

Algunas cosas a tener en cuenta sobre la incorporación de archivos CSS en HTML:

Ver más Seleccionar un hijo en cualquier nivel con CSS

Es recomendable que el enlace al archivo CSS se coloque antes de cualquier otro enlace a archivos CSS para asegurar que los estilos se apliquen correctamente.
El atributo type="text/css" se puede incluir, aunque en HTML5 no es obligatorio ya que se asume por defecto que se trata de un archivo CSS.
Es posible vincular múltiples archivos CSS a un documento HTML para aplicar diferentes estilos a diferentes secciones de la página.

Ejemplo de cómo incorporar un archivo CSS en HTML:

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

En este ejemplo, el archivo CSS llamado «estilos.css» se encuentra en la misma carpeta que el archivo HTML y se vincula a través del atributo href de la etiqueta <link>.

Al finalizar este tutorial sobre cómo enlazar CSS en HTML, estarás listo para mejorar el diseño de tus páginas web. ¡No olvides vincular ese estilo para darle vida a tus proyectos online! ¡Hasta pronto!