Cascading Style Sheets (CSS) es un lenguaje de marcado que determina cómo aparecerán sus páginas web. Gestiona los colores, fuentes y diseños de los elementos de su sitio web, además de permitirle añadir efectos o animaciones a sus páginas.

Podemos aplicar estilo a un archivo/página HTML de tres maneras: estilo externo, estilo interno y estilo en línea. En este artículo, nos centraremos en el estilo en línea.

Cómo Utilizar el Estilo en Línea en HTML

Utilizando el atributo style, podemos aplicar estilo a nuestro HTML dentro de etiquetas HTML individuales con estilo en línea.

<h1 style="...">...</h1>

El atributo style funciona del mismo modo que cualquier otro atributo HTML. Usamos style, seguido del signo de igualdad (=), y luego una comilla donde se almacenarán todos los valores de estilo usando los pares estándar CSS propiedad-valor – "property: value;".

Nota

Podemos tener tantos pares propiedad-valor como queramos siempre que los separemos con un punto y coma (;).

Cabe señalar que el atributo style se suele utilizar en la etiqueta HTML de apertura porque es la parte del elemento HTML que puede contener texto, datos, una imagen o nada en absoluto. Un ejemplo de estilo en línea es el siguiente:

<h1 style="color: red; font-size: 40px;">HTML desde Cero</h1>

Esto es parecido a esto:

h1 {
  color: red;
  font-size: 40px;
}

La única diferencia es que el estilo en línea sólo se aplica a la etiqueta a la que se aplica, mientras que este segundo ejemplo de código afecta a todas las etiquetas p de tu página html.

Cuándo Usar Estilos en Línea

Sin embargo, el uso de estilos en línea no se considera la mejor práctica, porque da lugar a mucha repetición, ya que los estilos no pueden reutilizarse en otros sitios.

Sin embargo, hay ocasiones en las que los estilos en línea son la mejor (o la única) opción, como por ejemplo al aplicar estilos a correos electrónicos HTML, contenido CMS como WordPress, Drupal, etc. También puedes utilizarlos al aplicar estilos a páginas HTML. También puedes utilizarlos para dar estilo a contenidos dinámicos, creados en HTML o modificados por JavaScript.

A excepción de la declaración !important, los estilos en línea tienen una especificidad/prioridad alta, lo que significa que prevalecerán sobre la mayoría de las demás reglas de las hojas de estilo internas y externas.

Supongamos que tenemos dos párrafos con estilos en línea en red y estilos internos en green:

<html>
  <head>
      <title>HTML desde Cero</title>
      <style>
       p {
           color: green;
       }
   </style>
  </head>
 
  <body>
     <p style="color: red;">El primer párrafo es rojo.</p>
     <p style="color: red;">El segundo párrafo también es rojo.</p>
  </body>
</html>

El CSS de nuestros estilos en línea anulará el CSS del estilo interno, por lo que ambos párrafos serán de color rojo.

Ejemplo de uso de estilos en línea
Ejemplo de uso de estilos en línea

Ventajas y Desventajas de los Estilos Inline

Hasta ahora, hemos aprendido qué son los estilos en línea y cómo utilizarlos dentro de las etiquetas HTML. Ahora, veamos las ventajas y desventajas para ver cuándo debemos usar estilos inline y cuándo no.

Ventajas de Inline CSS:

  • Inline (en línea) tiene prioridad sobre todos los demás estilos. Los estilos definidos en las hojas de estilo internas y externas quedan anulados por los estilos en línea.
  • Puedes insertar rápida y fácilmente reglas CSS en una página HTML, lo que resulta útil para probar o previsualizar cambios y realizar correcciones rápidas en tu sitio web.
  • No es necesario crear un archivo adicional.
  • Para aplicar estilos en JavaScript, utiliza el atributo style.

Desventajas del CSS en línea:

  • Añadir reglas CSS a cada elemento HTML lleva tiempo y desorganiza tu estructura HTML. Es difícil de mantener, reutilizar y escalar.
  • El tamaño y el tiempo de descarga de tu página pueden verse afectados al aplicar estilos a múltiples elementos.
  • Los estilos en línea no pueden utilizarse para aplicar estilos a pseudo-elementos y pseudo-clases. Por ejemplo, puede aplicar estilos a los colores “visited“, “hover“, “active” y “link” de una etiqueta anchor utilizando hojas de estilo externas e internas.

Conclusión

En este artículo hemos aprendido a utilizar el estilo en línea en HTML, cuándo utilizarlo y algunas de las ventajas e inconvenientes de hacerlo.

Dado que el estilo en línea tiene prioridad sobre todos los demás estilos, uno de los mejores momentos para utilizarlo es cuando se prueban o previsualizan cambios y se realizan correcciones rápidas en el sitio web.

5/5 - (2 votos)
Aprende HTML desde cero