Cómo enlazar HTML con CSS

Cuando empezamos en el mundillo del desarrollo web y empezamos a dominar HTML, lo siguiente que nos toca aprender es CSS. Pero, ¿Cómo puedo enlazar mi código CSS con HTML?

En este post te lo voy a explicar. ¡Presta mucha atención!

Preparando nuestro HTML

Lo primero que vamos a hacer es crear una pagina index.html con un código básico HTML y añadirle un elemento H1 (o cualquier otro que quieras) para posteriormente darle un estilo con nuestro CSS y así poder comprobar que se ha enlazado correctamente.

Aquí te dejo el código

				
					<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enlazar CSS</title>
</head>
<body>
  <h1>Hola Mundo</h1>
</body>
</html>

Como ves en el código anterior lo que hemos hecho ha sido crear la estructura básica de una página HTML básica y en el body, hemos añadido un elemento h1 que imprimiría por la pantalla de nuestro navegador la frase “Hola Mundo”.

⚠️ Importante. Antes de seguir con el siguiente paso, revisa que puedes abrir correctamente este código en tu navegador y que se ve todo correctamente.

Creando nuestra hoja de estilos CSS

Ahora tenemos que crear un nuevo fichero donde iremos guardando los estilos que vayamos aplicando a nuestras etiquetas de HTML, en concreto a la etiqueta H1 para nuestro ejemplo.

Para ello, creamos un nuevo fichero que llamaremos estilos.css y lo guardaremos en el mismo directorio que nuestro fichero index.html.

Dentro de nuestro fichero estilos.css, vamos a crear una regla básica para nuestro elemento H1. En mi caso le voy a decir que cambie el color de la fuente a un color rojo.

Para ello tengo que escribir el siguiente código.

				
					h1{
    color:red;
}

Antes de continuar, te recuerdo que si aún no dominas muy bien estos lenguajes y necesitas apoyo extra, tienes a disposición mi formación WebPro Academy, donde podrás aprender HTML, CSS y mucho más por una suscripción a muy lowcost .

Enlazar la hoja de estilos en nuestro HTML

Ahora es donde surge la magia.

Para que la fuente de nuestro H1 cambie a rojo, debemos de enlazar nuestro código CSS a nuestro HTML.

Para que esto sea posible, accede nuevamente al fichero index.html y sitúate en la etiqueta <head> de nuestro código y antes del cierre de la misma, escribe el siguiente fragmento:

				
					<link rel="stylesheet" href="estilos.css">

En esta etiqueta link vemos que existen dos atributos importantes:

rel: En este atributo tenemos que escribir stylesheet para indicarle que vamos a enlazar una hoja de estilos.

href: Tenemos que escribir la ruta relativa / absoluta de nuestra hoja de estilos. Como para nuestro ejemplo este fichero de estilos se encontraba en el mismo directorio que nuestro fichero html, pues solo tenemos que escribir el nombre, es decir, estilos.css.

Si has seguido las instrucciones tal y como te he indicado, ahora deberías de ver tu código H1 en color rojo. De esta forma, confirmamos que nuestra hoja de estilos se ha enlazado correctamente con nuestro fichero HTML.

Te lo explico en un vídeo

Para que no te queden dudas, he preparado un vídeo en mi canal de YouTube donde puedes ver exactamente todo el proceso y veas en detalle como realizar este enlace de tu código HTML con las hojas de estilos CSS.

¡Déjame saber en los comentarios de este post si has podido enlazar correctamente tu código 😄 !

Inscríbete a mi newsletter

Al suscribirte a mi newsletter recibirás un correo con el nuevo contenido que vaya subiendo sobre consejos para desarrolladores web.