Asi asociamos un css a una pagina web:
Para que una página de contenido gane un aspecto determinado, necesitaremos un medio para cargar o asociar el CSS dentro de un HTML. Esta operación se puede realizar a varios niveles, pero lo más habitual es enlazar el CSS por medio de la etiqueta <link>.
Hay tres maneras de vincular una hoja de estilo CSS en 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.
Publicaciones Relacionadas
