Published on

Estilo en línea en HTML - Estilos en línea CSS

Authors

tailwind-nextjs-banner

Las hojas de estilo en cascada (CSS) son un lenguaje de marcado que determina cómo aparecerán sus páginas web. Administra los colores, las fuentes y los diseños de los elementos de tu sitio web, además de permitirte agregar efectos o animaciones a tus páginas.

Podemos diseñar 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 usar el estilo en línea en HTML

Usando 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 de la misma manera que cualquier otro atributo HTML. Usamos style, seguido del signo de igualdad (=), y luego una comilla donde todos los valores de estilo se almacenarán usando los pares estándar de propiedad-valor de CSS - "propiedad: valor;".

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

Vale la pena señalar que el atributo style generalmente se usa en la etiqueta HTML de apertura porque esa 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;">Hello World</h1>

Esto es similar a esto:

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

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

Cuándo usar estilos en línea

Sin embargo, el uso de estilos en línea no se considera una buena práctica porque da como resultado una gran cantidad de repeticiones, ya que los estilos no se pueden reutilizar en otros lugares.

Pero hay ocasiones en las que los estilos en línea son la mejor (o la única) opción, como cuando se diseñan correos electrónicos HTML, contenido CMS como WordPress, Drupal, etc. También puedes usarlos al diseñar contenido dinámico, que es HTML creado o modificado por JavaScript.

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

Supongamos que tenemos dos textos de párrafo con un estilo en línea configurado en red y un estilo interno configurado en green:

<html>
  <head>
      <title>Hello World</title>
      <style>
       p {
           color: green;
       }
   </style>
  </head>
 
  <body>
     <p style="color: red;">Paragraph one is red.</p>
     <p style="color: red;">Paragraph two is also red.</p>
  </body>
</html>

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

Ventajas y desventajas de los estilos en línea

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

Ventajas de CSS en línea:

  • En línea tiene prioridad sobre todos los demás estilos.
  • Cualquier estilo definido en las hojas de estilo internas y externas se reemplaza por los estilos en línea.
  • Puedes insertar rápida y fácilmente reglas CSS en una página HTML, lo cual es útil para probar o previsualizar cambios y realizar correcciones rápidas en tu sitio web.
  • No es necesario crear un archivo adicional.
  • Para aplicar estilo en JavaScript, usa el atributo style.

Desventajas de CSS en línea:

  • Agregar reglas CSS a cada elemento HTML lleva tiempo y desorganiza la 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 por el estilo de varios elementos.
  • Los estilos en línea no se pueden usar para diseñar pseudoelementos y pseudoclases.

Conclusión

En este artículo, aprendimos cómo usar el estilo en línea en HTML, cuándo usarlo y algunas de las ventajas y desventajas de hacerlo.

Dado que el estilo en línea tiene prioridad sobre todos los demás estilos, uno de los mejores momentos para usarlo es al probar o previsualizar cambios y realizar correcciones rápidas en tu sitio web.

Ver en GitHub