Cómo enlazar CSS con HTML
noviembre 12, 2023
HTML es el lenguaje de marcado que te ayuda a definir la estructura de una página web. Por su parte, CSS es el lenguaje de hojas de estilo que se utiliza para hacer que la estructura sea presentable y esté bien diseñada. Entonces, para que los estilos que implementes con CSS se reflejen en el HTML, debes encontrar una manera de vincularlos. Es por ello, que vamos a ver cómo enlazar CSS con HTML.
Vinculación de archivos de hojas de estilo
Las hojas de estilo en cascada o CSS, son un lenguaje de diseño sencillo destinado a simplificar el proceso de hacer que las páginas web sean presentables. Por lo que es una poderosa herramienta para que los diseñadores web cambien el diseño y el control de las páginas. Mejor dicho, esto afecta y altera la forma en que se muestran.
Ahora, este es compatible con todos los navegadores y está diseñado principalmente para separar el contenido del documento de la presentación del mismo. Además, puedes realizar el enlace escribiendo CSS en línea, CSS interno o CSS externo.
Pero… ¿Qué es CSS?
CSS significa Hoja de estilo en cascada. Es un lenguaje de marcado de hojas de estilo que se utiliza para presentar o agregar complementos visuales en un lenguaje de marcado como HTML. Donde suelen utilizarse para cambiar el diseño o las fuentes, añadir una imagen o cambiar el color de fondo. Por ende, como componente central de HTML, CSS es un tema importante en el desarrollo de software.
Y… ¿Cómo crear un archivo CSS?
Por otro lado, se puede crear una hoja de estilo externa en cualquier editor de texto. Simplemente debes guardarlo con una extensión .css y el archivo CSS no puede contener etiquetas HTML. Pero los archivos HTML y CSS deben estar en la misma carpeta.
Entonces, aclarado esto, para vincular tu CSS a tu HTML, debes usar la etiqueta de enlace con algunos atributos relevantes. Donde la etiqueta de enlace es una etiqueta de cierre automático que debes colocar en la sección principal de tu HTML.
Así que, para enlazar CSS con HTML, considera:
- <link rel=»stylesheet» type=»text/css» href=»styles.css» />
Coloca la etiqueta de enlace en la sección principal de tu HTML como se muestra a continuación:
<head>
<meta charset=»UTF-8″ />
<meta http-equiv=»X-UA-Compatible» content=»IE=edge» />
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″ />
<link rel=»stylesheet» type=»text/css» href=»styles.css» />
<title>Link CSS to HTML</title>
</head>
Respecto a los atributos de la etiqueta de enlace tenemos:
- rel: es la relación entre el archivo externo y el archivo actual. Para CSS, usas una hoja de estilo. Por ejemplo: rel=“stylesheet»
- type: es el tipo de documento que está vinculando al HTML. Para CSS, es text/css. Por ejemplo: type=“text/css»
- href: significa Referencia de hipertexto. Se utiliza para especificar la ubicación del archivo CSS y el nombre del archivo. Es un enlace en el que se puede hacer clic, por lo que también puede mantener presionada la tecla CTRL y hacer clic en él para ver el archivo CSS. Por ejemplo, href=»styles.css» si el archivo CSS se encuentra en la misma carpeta que el archivo HTML. O href=»folder/styles.css» si el archivo CSS está ubicado en otra carpeta
¡Ya lo sabes!
