Conectar o linkear un archivo CSS con HTML es una de las primeras cosas que aprendemos cuando estamos empezando. A pesar de que es un proceso simple es muy importante saber cómo linkear un archivo CSS con HTML de forma correcta y así evitar errores en nuestro código.

1. Como Conectar un
Archivo CSS Con HTML
www.dominalaprogramacion.com

2. www.dominalaprogramacion.com
Para conectar una hoja de estilo con un archivo HTML
debemos entender la diferencia entre HTML, CSS y
JavaScript.

3. www.dominalaprogramacion.com
CSS es un lenguaje que tiene como objetivo la
apariencia y el estilo de un sitio web. Es decir,
agregar un diseño que permita mejorar la
experiencia de los visitantes en el sitio.
HTML es un lenguaje de marcado de hipertexto que
se basa en la estructura base del sitio web.
JavaScript se basa en el funcionamiento de un
sitio web y en la interacción con el usuario.

4. www.dominalaprogramacion.com
Una vez entendida la diferencia entre estos tres
lenguaje podemos comprender como conectar una
hoja de estilo con HTML.

5. www.dominalaprogramacion.com
Para conectar una hoja de estilo con un archivo HTML
necesitamos usar una etiqueta llamada <link>. La
etiqueta en si no es suficiente ya que necesitaremos
añadir dos atributos los cuales son "rel" y "href".
<link rel="stylesheet" href="">

6. El atributo "rel" determina la relación que hay entre el
archivo en el que estamos poniendo la etiqueta <link> y el
archivo que queremos conectar. En este caso le ponemos
"stylesheet" porque este archivo que estamos tratando de
añadir es una hoja de estilo que en inglés es "stylesheet".
<link rel="stylesheet">
www.dominalaprogramacion.com

7. Ya que tenemos la relación debemos determinar cuál es
la ruta del archivo CSS que queremos conectar con el
archivo HTML. Para ello debemos utilizar el atributo
"href".
<link rel="stylesheet" href="RUTA DE TU ARCHIVO CSS">
www.dominalaprogramacion.com

8. Determinar la ruta es decirle al navegador en donde
dentro de los archivos de nuestro sitio web en donde está
ese archivo que queremos conectar. Es muy importante
ver el video ubicado al inicio de este artículo para
entender de forma clara este concepto.
www.dominalaprogramacion.com

9. www.dominalaprogramacion.com
Mira nuestro video para complementar esta información
clic aquí