08. Estilos

El atributo HTML style es usado para añadir estilos a un elemento, como el color, la fuente, el tamaño…

La configuración del estilo de un elemento HTML se puede hacer con el atributo style. Dicho atributo tiene la siguiente sintaxis.

<etiqueta style="propiedad: valor;">

La propiedad es una propiedad CSS, lo mismo que el valor.

Color de fondo

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

Ejm

<body style="background-color:powderblue;">

<h1>Esto es un encabezado</h1>
<p>Esto es un párrafo.</p>

</body>

Color de texto

La propiedad CSS color define el color de texto para un elemento HTML.

Ejm

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

Fuentes

La propiedad CSS font-family define la fuente que va a ser usada para un elemento HTML.

Ejm

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

Tamaño del texto

La propiedad CSS font-size define el tamaño de texto para un elemento HTML.

Ejm

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

Alineación de texto

La propiedad CSS text-align define la alineación de texto de un elemento HTML.

Ejm

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

Resumen

  • Utilizar el atributo style para diseñar elementos HTML
  • Usar background-color para el color de fondo
  • Usar color para los colores del texto
  • Utilizar font-family para fuentes de texto
  • Utilizar font-size para los tamaños de texto
  • Utilizar text-align para la alineación del texto
Scroll al inicio