Los estilos CSS afectan directamente a las etiquetas HTML. En ese sentido, existen tres maneras de inyectar código CSS a los documentos HTML para que estas tengan el color, la belleza y la experiencia de uso que deseamos.
1 – Referenciando un documento de estilos CSS en la etiqueta <head></head>
Ejemplo
<head><link rel="stylesheet" href="./estilos.css"></head>Esta opción es la mejor práctica y la más recomendada por las siguientes razones:
- Te permite actualizar fácilmente el código CSS para todo el sitio web o para las páginas HTML donde estén invocadas.
- Es una buena práctica por parte de la comunidad de desarrollo Frontend.
2 – Código incrustado dentro de la etiqueta <head></head>
Ejemplo
<head> <style> p { color: blue; } </style></head>Esta opción solo se recomienda cuando se van a aplicar pocos estilos en un documento .html. Tiene la ventaja de ahorrar un request del servidor, ya que no hace un llamado de invocación al documento .css.
Sin embargo, esta opción tiene algunas desventajas:
- No permite un eficiente mantenimiento del código CSS. Imagínate por ejemplo, modificar el estilo de 100 documentos .html.
- Si escribes muchas líneas de código CSS, el documento .html carga mucho más lento.
3 – Estilo embebido como atributo en la etiqueta HTML
Ejemplo
<main> <p style="color: blue;"></p></main>Esta opción no es recomendada por varias razones:
- No permite el mantenimiento de código CSS en el sitio. Imagínate donde tengas que modificar el color de texto de los párrafos en un sitio web con 1000 páginas. Sería un proceso repetitivo y desgastante.
- No es una buena práctica entre la comunidad de desarrolladores Frontend.
- Se dificulta mucho aplicar otras tecnologías como preprocesadores y post-css.
- En la jerarquía de presentación de la página web, esta manera sobre escribe el código CSS que esté invocado en la etiqueta
<head></head>