El desarrollo web se basa en gran medida en tres lenguajes principales: HTML, CSS y Javascript. HTML describe la estructura de los sitios web, es decir, qué elementos hay en la página web.
Las hojas de estilo en cascada (CSS), por otro lado, describen cómo se presentan visualmente los elementos HTML, mientras que Javascript se utiliza para agregar interactividad y comportamiento dinámico a las páginas web.
CSS es particularmente importante cuando se trata de crear interfaces de usuario estéticamente agradables con una excelente experiencia de usuario. CSS es responsable de la presentación y el estilo del contenido web y se utiliza para controlar el diseño, la apariencia y el estilo de las páginas web.
Por ejemplo, usando CSS, puedes cambiar cómo se muestra el contenido en tu página web y modificar cosas como fuentes, colores, bordes, márgenes, espacios y fondos, entre otros.
Además, CSS es crucial para crear sitios web responsivos que se adapten a diferentes tamaños de pantalla y dispositivos. También permite estilos consistentes y uniformes en diferentes páginas de un sitio web y ayuda a que los sitios web sean accesibles para usuarios con discapacidades.
En caso de que desee alinear su sitio web con su marca y utilizar bien los colores de su marca en su sitio web, CSS es lo que le permitirá hacerlo.
Sin CSS, los sitios web probablemente se verían muy similares, con diseños muy sosos, sin estilos, colores, efectos de desplazamiento ni fondos. Los sitios web tampoco responderían y tendrían muy poca personalización para alinear un sitio web con una marca.
Por tanto, CSS es una herramienta muy importante para los desarrolladores web. Para utilizar CSS en su sitio web, debe vincularlo con el HTML de la página. Recuerde, HTML describe los elementos y el contenido de un sitio web.
Por lo tanto, necesita vincular su HTML con CSS para poder utilizar CSS para diseñar los elementos y el contenido de su sitio web. Este artículo le enseñará cómo hacer esto. Sin embargo, antes de ver cómo vincular CSS a HTML, veamos las diferentes formas en que puede escribir CSS y usarlo para diseñar sus elementos HTML.
Tabla de contenido
Diferentes formas de incluir CSS en tu HTML
Hay tres formas principales de incluir CSS en sus archivos HTML. Esto incluye:
#1. Estilos en línea
Esto implica escribir sus estilos CSS directamente en cada elemento HTML, como se muestra a continuación:
<body style="background-color: yellow;">
<h1 style="color: orangered; font-size: 40px;">kirukiru.es</h1>
<p style="color: blue; font-size: 16px;">kirukiru.es is an online publication that produces high-quality articles on
Technology, Business, and Fintech to help
businesses and people grow.</p>
</body>
Por mucho que este método le permita agregar CSS fácilmente a sus páginas HTML, no es una buena manera de agregar CSS a su HTML. Esto se debe a que consume mucho tiempo, dificulta la lectura y el mantenimiento del código, especialmente para estilos a gran escala, y puede afectar los tiempos de carga de las páginas web.
#2. CSS interno
Esto implica escribir los estilos de una página web dentro de un elemento