CSS se puede agregar como un archivo separado o incrustarse directamente en su documento HTML. Si desea incluir CSS en HTML, entonces "Estilos en línea", "Estilos incrustados" y el "Hojas de estilo externo" son los tres métodos para lograr esta funcionalidad. Sin embargo, la forma ideal es crear y aplicar estilos a HTML es utilizar las hojas de estilo externo, ya que se requerirá una modificación mínima de marcado para afectar varias páginas a la vez.

Este artículo discutirá el procedimiento para con la atención un archivo CSS externo en Html. También explicaremos enlace y importador un archivo CSS externo en HTML. Además, se proporcionarán ejemplos relacionados con los métodos mencionados. Entonces, comencemos!

Cómo agregar un archivo CSS externo en HTML

Si desea aplicar un estilo a varias páginas web simultáneamente, es perfecto agregar un archivo CSS externo es perfecto. Un CSS externo se considera un archivo separado que comprende todas las reglas de estilo, y puede vincularse a cualquier página HTML de su sitio web. Agregar un archivo CSS externo le permite modificar el aspecto de su sitio web solo haciendo cambios en un solo archivo. Además, los archivos de CSS, JavaScript y HTML separados le permiten mantener el código y mejorar la legibilidad.

Hay dos métodos para agregar un archivo CSS externo HTML: vinculación e importación.

Vinculación de un archivo CSS externo en HTML

En primer lugar, crearemos un archivo CSS en HTML. Para este propósito, puede abrir su editor de código favorito; Sin embargo, utilizaremos el código Visual Studio.

Después de abrir el código VS, crearemos un "estilo.CSS " Archivo CSS para agregar estilos:

A continuación, especificaremos el estilo que queremos aplicar a la página web en el archivo CSS abierto. Aquí, hemos asignado los valores al "fondo" y "fuente" Propiedades para el HTML "cuerpo" y también agregó el "color" Para el encabezado:

cuerpo
Antecedentes: rosa;
fuente: 18px arial, sans-serif;

H1
color azul;

Prensa "Ctrl+S" Para guardar el código agregado en el "estilo.CSS " archivo:

El "" La etiqueta se utiliza para vincular un CSS externo a un archivo HTML. Esta etiqueta se agrega en el "" Sección de un documento HTML. Hemos vinculado nuestro archivo HTML con "estilo.CSS " En el programa dado a continuación, usando la etiqueta. Luego, hemos agregado un encabezado con el

etiqueta y un párrafo con el

etiqueta. El estilo especificado en el "estilo.CSS " El archivo se aplicará a estos elementos HTML:

Esto es linuxhint.comunicarse

Estamos aprendiendo cómo agregar un archivo CSS en HTML

Guarde este programa JavaScript y abra su archivo HTML en el navegador:

Como puede ver, hemos aplicado con éxito el estilo especificado a nuestros elementos HTML vinculándolos con el archivo CSS externo:

Importar un archivo CSS externo en HTML

Otro método para agregar un archivo CSS externo es usar el "@importar" regla en el documento HTML. El javascript "@importar" Las declaraciones dan instrucciones al navegador para cargar y utilizar los estilos desde el archivo CSS externo.

Puede importar un archivo CSS externo en HTML simplemente agregando la declaración "@Import" en la etiqueta del documento HTML. De esta manera, se le permitirá agregar otras reglas CSS para los elementos HTML, dentro de la misma etiqueta:

Esto es linuxhint.comunicarse

Estamos aprendiendo a agregar un archivo CSS en HTML

En el programa JavaScript proporcionado, hemos importado el "estilo.CSS " archivo, y el estilo especificado con el archivo mencionado se aplicará a los encabezados. También hemos agregado estilo para el elemento HTML del párrafo:

Nuestro "mi proyecto.html " El archivo tiene los siguientes elementos HTML con los estilos aplicados:

Conclusión

Agregar un archivo CSS en HTML es útil si desea aplicar un estilo a varias páginas web a la vez. Además, cuando mantiene los archivos HTML, JavaScript y CSS por separado, su código se vuelve fácil de administrar. Este artículo sobre el procedimiento para agregar un archivo CSS en HTML. También hemos explicado vincular e importar un archivo CSS externo en HTML. Además, también se proporcionan ejemplos relacionados con los métodos mencionados.