08- 馃帹 Estilos en HTML: Gu铆a b谩sica y ejemplos







Estilos en HTML

En **HTML**, el atributo **`style`** se usa para agregar estilos a los elementos.

Podemos cambiar el color, tama帽o de letra, fuente, etc. directamente en la etiqueta.


Ejemplo

Soy de color rojo

Soy de color azul

Soy muy grande


C贸digo del ejemplo

<p>Soy un p谩rrafo normal</p>
<p style="color:red;">Soy de color rojo</p>
<p style="color:blue;">Soy de color azul</p>
<p style="font-size:34px;">Soy grande</p>
                        



El atributo **`style`**

La configuraci贸n de un elemento se puede hacer con el atributo **`style`**.

Su sintaxis es la siguiente:


Sintaxis

<tagname style="property:value;">
                    

La propiedad es una **propiedad CSS**. El valor es un **valor CSS**.




Color de fondo

La propiedad de CSS **`background-color`** define el color de fondo de un elemento HTML.


Ejemplo

Yo soy un p谩rrafo con fondo azul claro


C贸digo del ejemplo

<div style="background-color:powderblue;">
    <p>Yo soy un p谩rrafo con fondo azul claro</p>
</div>
                        



Color del texto

La propiedad de CSS **`color`** define el color del texto de un elemento HTML.


Ejemplo

Yo soy un p谩rrafo con texto azul


C贸digo del ejemplo

<p style="color:blue;">Yo soy un p谩rrafo con texto azul</p>
                        



Fuentes en HTML

La propiedad de CSS **`font-family`** define la fuente del texto de un elemento HTML.


Ejemplo

Este texto usa Times New Roman.

Este texto usa Arial.


C贸digo del ejemplo

<p style="font-family: 'Times New Roman', Times, serif;">Este texto usa Times New Roman.</p>
<p style="font-family: Arial, sans-serif;">Este texto usa Arial.</p>
                        



Tama帽o de la letra

La propiedad de CSS **`font-size`** define el tama帽o del texto de un elemento HTML.


Ejemplo

Yo soy un p谩rrafo con texto grande


C贸digo del ejemplo

<p style="font-size:30px;">Yo soy un p谩rrafo con texto grande</p>
                        



Alineaci贸n del texto

La propiedad de CSS **`text-align`** define la alineaci贸n del texto dentro de un elemento HTML.


Ejemplo

Yo soy un p谩rrafo centrado


C贸digo del ejemplo

<p style="text-align:center;">Yo soy un p谩rrafo centrado</p>
                        



Resumen

Hemos aprendido sobre c贸mo usar el atributo **`style`** para aplicar estilos a los elementos HTML. En esta entrada vimos:

  • El atributo **`style`** para aplicar estilos en l铆nea.
  • Propiedades de fondo y texto.
  • Configuraciones de tama帽o de texto y alineaci贸n.

Estas propiedades nos permiten personalizar la apariencia de nuestros elementos HTML de manera efectiva.


Publicar un comentario

0 Comentarios