Usar CSS en HTML

Si queremos agregar estilos a las etiquetas de nuestro documento html, podemos hacerlo de muchas formas, en línea, usando etiqueta style o usando link para importar un archivo CSS externo. Sin embargo, si hacemos uso de más de 1 forma podemos obtener resultados diferente dependiendo el orden en que lo agreguemos, ya que esto se ve afectado por la propiedad de cascada de CSS.

Estilos en linea

Para agregar estilos en línea debemos colocar la propiedad style y asignar las propiedades de CSS con su valor correspondiete. Así mismo, si tenemos la etiqueta style o importamos un archivo de CSS externo y agregamos estislo en línea, este último van a tener mayor prioridad.

Ejemplo de uso de estilo en línea :

<h1 style="color: #1d3557;">Título principal<h1>

Usando etiqueta style

Otra forma de agregar estilos es colocando el código CSS entre la etiqueta style de apertura y de cierre. De esta forma, todo el código CSS y HTML estará en un mismo documento.

Ejemplo, agregando estilos con la etiqueta style :

<style>
  h2 {
    color: #1d3557;
  }
</style>

Estilos desde un archivo externo

Si tenemos un archivo CSS con los estilos para nuestro sitio web, podemos utilizarlo usando la etiqueta link.

Dentro del archivo CSS llamado styles.css, el cual se encuentra en el directorio css :

h2 {
  color: #1d3557;
}

Lo que debemos agregar en nuestro documento HTML :

<link rel="stylesheet" href="./css/styles.css" />

Tener en cuenta que podemos utilizar muchos archivos CSS, el orden de como importemos estos archivos puede alterar los estilos de las etiquetas.

Espero que este artículo te haya sido útil.

¡Happy coding! 🌊