Tutorial HTML: Estilo incorporado (style)

El estilo en HTML se refiere a la capacidad de aplicar características visuales a los elementos en una página web. Las instrucciones de estilo pueden ser incorporadas directamente en los elementos HTML usando el atributo style. Este método de aplicar estilos es conocido como estilo en línea o inline en inglés. Aunque hay formas más eficientes y organizadas de aplicar estilos en páginas web, especialmente en proyectos grandes (como las hojas de estilo en cascada o CSS), el estilo en línea puede ser útil para tareas rápidas y pruebas.

Un atributo style en un elemento HTML se ve así:

<p style="color: red;">Este es un párrafo rojo.</p>

En este ejemplo, el texto dentro del elemento de párrafo <p> se mostrará en color rojo. El atributo style contiene una serie de declaraciones de estilo, que siempre tienen la forma propiedad: valor;. En este caso, la propiedad es color y el valor es red.

Puede haber varias declaraciones de estilo en un solo atributo style, separadas por un punto y coma (;). Por ejemplo:

<p style="color: red; font-size: 20px;">Este es un párrafo rojo y grande.</p>

En este ejemplo, el texto se mostrará en color rojo y con un tamaño de fuente de 20 píxeles. La propiedad font-size controla el tamaño de la fuente.

Existen muchas propiedades que se pueden usar en un atributo style. Algunas de las más comunes incluyen:

• color: controla el color del texto.
• background-color: controla el color de fondo de un elemento.
• font-size: controla el tamaño de la fuente del texto.
• font-family: controla la familia de fuentes del texto, como "Arial", "Verdana", "Times New Roman", etc.
• border: agrega un borde alrededor del elemento. El valor puede ser una combinación de ancho, estilo y color, como "1px solid black".
• padding: agrega espacio alrededor del contenido de un elemento, dentro del borde.
• margin: agrega espacio fuera del borde de un elemento.

Por ejemplo:

<div style="background-color: lightblue; padding: 10px; margin: 5px; border: 1px solid black;">
    <p style="color: red; font-size: 20px; font-family: Arial;">Este es un párrafo rojo y grande, dentro de un div con fondo azul claro, margen, padding y borde.</p>
</div>

Aunque el estilo en línea puede ser útil en ciertas situaciones, también tiene varias desventajas. La más notable es que no es eficiente para estilos que se aplican a muchos elementos. Si se quiere cambiar el estilo, se tendría que ir y cambiar cada atributo style individualmente.

Otra desventaja es que el estilo en línea tiene la mayor especificidad en CSS. Eso significa que cualquier estilo aplicado en línea anulará los estilos aplicados en las hojas de estilo externas o internas. Esto puede llevar a confusiones y dificultades para depurar los problemas de estilo.

A pesar de estas desventajas, el estilo en línea sigue siendo una herramienta útil en el arsenal de un desarrollador web. Puede ser especialmente útil para aplicar estilos rápidamente en tiempo de desarrollo, hacer pruebas rápidas, o en situaciones donde las hojas de estilo externas no están disponibles o no son prácticas.