¿Cómo vincular una hoja de estilo CSS en HTML?

Si te encuentras diseñando tu página web o administrándola, es importante que aprendas cómo vincular una hoja de estilo CSS en HTML. Este proceso es relativamente sencillo y, una vez que lo domines, podrás aplicar diferentes diseños a tu sitio web de una manera personalizada. Aquí te mostraremos cómo vincular una hoja de estilo CSS en HTML paso a paso, para que puedas comenzar a experimentar con el aspecto de tu página web cuanto antes.

¿Qué significa CSS?

CSS (Cascading Style Sheets) es un lenguaje de estilo utilizado para describir el formato y la presentación de un documento escrito en HTML o XML. CSS se puede aplicar a los elementos HTML de una manera declarativa, lo que significa que se puede especificar el formato y la presentación de los elementos HTML utilizando reglas y selectores.

Por ejemplo, una regla CSS puede especificar que todos los elementos de texto con la etiqueta h1 deben tener un color de fondo azul y un tamaño de fuente de 24px. Un selector CSS es el componente de una regla CSS que selecciona los elementos HTML a los que se aplica la regla.

¿Cómo funciona CSS?

Los navegadores web interpretan el CSS y lo usan para dibujar los elementos HTML en pantalla. Sin embargo, para que el navegador web pueda interpretar el CSS, debe estar escrito en un formato específico.

El CSS se puede escribir de varias maneras, pero la forma más común es utilizar hojas de estilo en cascada. Las hojas de estilo en cascada son archivos CSS que contienen las reglas y los selectores que se utilizan para especificar el formato y la presentación de los elementos HTML.

Las hojas de estilo en cascada se pueden aplicar a todos los elementos HTML de un documento o sólo a un subconjunto de los elementos.

¿Qué son las hojas de estilo en cascada?

Las hojas de estilo en cascada son archivos CSS que contienen las reglas y los selectores que se utilizan para especificar el formato y la presentación de los elementos HTML. Las hojas de estilo en cascada se pueden aplicar a todos los elementos HTML de un documento o sólo a un subconjunto de los elementos.

Las hojas de estilo en cascada permiten al autor especificar la presentación de un documento HTML utilizando un conjunto de reglas. Estas reglas se aplican a los elementos del documento HTML y pueden especificar el formato y la presentación de los elementos, como el color, el espaciado, las fuentes y mucho más.

Beneficios de usar hojas de estilo CSS en un archivo independiente:

Las hojas de estilo CSS tienen muchas ventajas sobre el uso de atributos de presentación en los elementos HTML. Algunas de las principales ventajas son:

• Permite a los autores separar el contenido de la forma. Con CSS, los autores pueden escribir un documento HTML sin tener que preocuparse por su aspecto. Esto permite que se concentren en el contenido del documento y facilita la reutilización del mismo contenido con diferentes diseños.
• Los archivos CSS son más pequeños que los archivos HTML. Al separar el formato y la presentación del contenido, se reducen significativamente el tamaño de los archivos HTML. Esto hace que los sitios web se carguen más rápido y permite a los navegadores descargar y almacenar en caché una copia de la hoja de estilo CSS para usarla con diferentes páginas web.
• Permite a los autores crear diseños consistentes. Con CSS, los autores pueden crear diseños que se aplican a todos los elementos de un sitio web de manera consistente. Esto hace que los sitios web sean más fáciles de usar y también facilita la mantenimiento del sitio web, ya que los cambios en el diseño se pueden realizar en un solo lugar.

Conoce: Qué es SEO en Márketing y diferencias entre SEO Y SEM 👈

Pasos para vincular una hoja de estilo CSS en HTML

Hay tres maneras de vincular una hoja de estilo CSS a un documento HTML:

1. Incluir la regla de enlace en el elemento HEAD del documento HTML.

2. Utilizar un atributo de estilo o <style> en el elemento HTML para especificar los estilos de esa clase o contenedor.

3. Vincula tu hoja de estilos CSS utilizando @import

Vamos a ver cómo se puede vincular una hoja de estilo CSS utilizando los tres métodos anteriores:

Método 1: Vincular una hoja de estilo CSS utilizando el elemento HEAD

El primer método para vincular una hoja de estilo CSS en HTML es utilizar el elemento HEAD. El elemento HEAD se utiliza para contener la información metadatos del documento HTML, que no se muestra en pantalla. La regla de enlace se puede incluir entre las etiquetas de apertura y cierre del elemento HEAD. La sintaxis de la regla de enlace es la siguiente:

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

En el ejemplo anterior, la regla de enlace se utiliza para vincular una hoja de estilo CSS externa al documento HTML. La URL especificada en el atributo href es la ubicación de la hoja de estilo CSS. El atributo rel especifica el tipo de recurso que se está vinculando y el valor “stylesheet” indica que se trata de una hoja de estilo CSS. El atributo type especifica el tipo de contenido del recurso vinculado y el valor “text/css” indica que se trata de un archivo CSS.

Método 2: Vincular tus estilos CSS utilizando la etiqueta style

El segundo método para añadir estilos CSS en HTML es utilizar las etiquetas

El atributo style se puede utilizar en cualquier elemento HTML, no requieres una hoja externa sino desde el encabezado o etiquetas en tu sitio web. La sintaxis del atributo style es la siguiente:

<head>    
<style>    
    p {color:red; font-size:20px;}    
</style>    
</head>

En el ejemplo anterior, el atributo style se utiliza para indicarle al navegador que el bloque de texto que se encuentre en las etiquetas <p> </p> será de color rojo y de 20px de tamaño en su tipografía.

Método 3: Vincular una hoja de estilo CSS utilizando @import

El tercer método que se puede utilizar para vincular una hoja de estilo CSS en HTML es utilizando el atributo @import. El atributo @import se utiliza en el elemento style para importar otro archivo CSS en el documento HTML. La sintaxis del atributo @import es la siguiente:

<head>
<style>
    @import (“url”);
</style>
</head>

En el ejemplo anterior, el atributo @import se utiliza para importar un archivo CSS externo al documento HTML. La URL especificada en el atributo url es la ubicación del archivo CSS que se va a importar.

Conclusión

En conclusión, existen tres maneras de vincular una hoja de estilo CSS en HTML. Se puede utilizar el elemento HEAD para incluir la regla de enlace, utilizar el atributo style o utilizar @import. Cada uno de estos métodos tiene sus propias ventajas y desventajas. Los archivos CSS externos son la forma recomendada de vincular una hoja de estilo CSS a un documento HTML. Los archivos CSS externos permiten a los diseñadores y desarrolladores modularizar y reutilizar el código CSS en varios documentos HTML.