Hojas de estilo en cascada, también conocido como CSS, es un lenguaje de estilo que se utiliza para diseñar elementos HTML que aparecen en las páginas web. CSS le permite generar hojas de estilo reutilizables que se pueden usar para diseñar múltiples páginas web a la vez. Estas hojas de estilo ahorran mucho tiempo y son fáciles de mantener. Pero ¿alguna vez te has preguntado cómo vincular las hojas de estilo CSS con los documentos HTML? Bueno, tenemos la respuesta resumida para ti en este blog.

Las tres formas de usar las que puede vincular CSS a HTML. Estos se alistan a continuación.

1. CSS en línea
2. CSS interno
3. CSS externo

Todos estos enfoques se han discutido en este blog.

Cómo vincular CSS en línea a HTML

Si está adoptando este enfoque, debe utilizar el atributo de estilo del elemento particular que desea peinar. Simplemente inserte el estilo en la etiqueta de inicio del elemento.

No se recomienda este enfoque ya que el estilo se realiza dentro de la etiqueta de inicio de un elemento particular que hace que el código sea difícil de leer y mantener. Además, el CSS en línea no es reutilizable, por lo tanto, debe diseñar cada elemento por separado, haciendo que la tarea de estilo sea engorrosa, matando así el propósito de usar CSS.

Aquí hemos demostrado este enfoque con un ejemplo.

Html

Cómo vincular CSS a HTML

CSS en línea

En el código anterior, se están generando tres elementos que son; ,

, y

. Los tres están siendo diseñados utilizando el atributo de estilo. El contenedor Div ha recibido algo de relleno y el borde, mientras tanto, el encabezado y el párrafo reciben un cierto color de texto.

Producción

Los elementos fueron diseñados usando CSS en línea.

Cómo vincular CSS a HTML internamente

Este enfoque dirige a los usuarios a diseñar elementos utilizando la etiqueta en la sección principal del documento HTML. Puede usar los nombres de los elementos o usar clases o IDS asignados a elementos para diseñarlos con CSS interno.

Para comprender el funcionamiento de este enfoque, consulte el siguiente ejemplo.

Html

Cómo vincular CSS a HTML

CSS en línea

De nuevo tres elementos que son ,

, y

Sin embargo, se están generando para diseñarlos, estamos utilizando la etiqueta en la sección principal del documento. Tenga en cuenta que dado que el código anterior solo consta de tres elementos, por lo tanto, estamos usando directamente los nombres de los elementos para diseñarlos, sin embargo, cuando hay múltiples elementos de tipo similar, puede asignarles clases e ID para diseñar cada uno de ellos de manera diferente. El código generará la misma salida que la anterior.

Cómo vincular CSS a HTML externamente

Este enfoque le permite vincular CSS a HTML utilizando hojas de estilo externos. Este enfoque requiere que realice sus hojas de estilo en un archivo separado y luego vincule este archivo externo a su archivo HTML usando la etiqueta.

Aquí hemos adjunto capturas de pantalla del editor de códigos para demostrar este enfoque correctamente.

Html

Esta captura de pantalla anterior muestra el archivo HTML. En este documento no necesita diseñar los elementos, simplemente coloque sus elementos de una manera que desee que aparezcan en la página web. Para el propósito de vincular su hoja de estilo, simplemente use el atributo y proporcione el enlace del archivo CSS al atributo HREF de la etiqueta.

CSS

Esta captura de pantalla representa la hoja de estilo CSS. En este archivo, simplemente use los nombres de elementos o las clases/ID asignadas para diseñarlos. El código que se muestra en las capturas de pantalla también generará la misma salida.

Este enfoque se considera el mejor enfoque, ya que le permite generar hojas de estilo por separado, haciendo que el código sea limpio, legible y mantenible.

Conclusión

Para vincular CSS a HTML, hay tres enfoques disponibles que son; CSS en línea, CSS interno y CSS externo. CSS en línea requiere que use el atributo de estilo de un elemento particular en la etiqueta de inicio para diseñarlo, mientras tanto, CSS interno permite a los usuarios diseñar elementos utilizando la etiqueta en la sección principal del documento HTML. Por último, CSS externo significa que debe generar hojas de estilo en otro archivo y conectarlo al documento HTML con la etiqueta. Se prefiere el enfoque CSS externo sobre el resto porque hace que el código sea legible y mantenible.