Cómo insertar CSS en HTML

¿Quieres añadir algún lenguaje CSS a tu proyecto? ¡Perfecto!
Hay 3 formas de incorporar CSS en nuestra página html: estilo en línea, incrustado y enlace externo.
¡Vamos a verlos!

Estilo en línea

Cuando hablamos de estilo en línea, pretendemos insertar CSS en una sola línea: la misma que el elemento que vamos a modificar. En este caso crearemos un atributo global, el atributo "style" dentro de la etiqueta html, seguido de la propiedad css que vamos a modificar y el valor de esa propiedad.

Este modo, teóricamente, se podría usar para aplicar algunos estilos o efectos a un solo elemento HTML, sin embargo, nunca debería usarse. Imagine, por ejemplo, que el cliente te pide que cambies el color de todas las etiquetas p en la página: si has usado el estilo en línea para insertar tu css, deberás cambiar todas las etiquetas p presentes. Una a una. Un poco pesado, ¿verdad?
Además, el estilo online penaliza el SEO de tu web, así que recuerda: ¡no lo uses!

CSS Embedded

El segundo método para incrustar CSS en su página html es internamente: ¿cómo funciona? Dentro del encabezado de la página html, abrirás una etiqueta de "estilo" - que obviamente tendrá una apertura y un cierre - y, dentro de este último, a su vez, colocarás tu selector (es decir, el elemento del código al cual se aplicará la propiedad css: no te preocupes, ¡lo explicaremos todo en detalle en las próximas guías!)

La diferencia, como puedes ver en la foto de abajo, es esta: con el selector puedes especificar a qué elemento quieres aplicar tus propiedades CSS. En el caso específico de nuestro ejemplo, cada etiqueta p presente en nuestra hoja html tendrá el color rojo. Sin embargo, recuerda: el CSS embedded actúa solo en el documento al que se agrega.

Link externo

El último método para implementar CSS en su código es insertar un enlace externo. Este es el método más utilizado y común, debido a su organización ordenada y estilo limpio, pero sobre todo para adherirse al principio de separation of concerns, el principio cardinal de la programación informática. Para implementarlo, necesitamos crear un nuevo archivo en nuestro editor de texto, que tenga la extensión ".css" (la mejor práctica es llamar al archivo "style.css"); en este archivo escribiremos todas nuestras reglas CSS, y lo vincularemos a nuestro archivo HTML usando una etiqueta de "enlace", siempre en la cabecera de nuestro documento HTML, como puedes ver en la foto de abajo.

P.D. El CSS embedded tiene prioridad sobre el CSS externo, sin embargo, siempre es preferible, por las razones anteriores, usar una hoja de estilo separada vinculándola con esta tercera metodología.

Ahora conoce todas las formas de implementar CSS en el código de tu sitio web. ¡Sigue aprendiendo más sobre el mundo del desarrollo web sin miedo! ¿Te atreves?