HTML Style (Estilos)
El atributo HTML style se utiliza para agregar estilos a un elemento, como color, fuente, tamaño y más.
El atributo de estilo HTML
Se puede configurar el estilo de un elemento HTML con el atributo style.
El atributo HTML style tiene la siguiente sintaxis:
<tagname style="property:value;">
La property es una propiedad CSS. El value es un valor CSS.
Aprenderá más sobre CSS más adelante en este tutorial.
Color de fondo
La propiedad CSS background-color define el color de fondo de un elemento HTML.
Ejemplo
Establecer el color de fondo de una página en azul polvo (powderblue):
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Inténtalo tú mismo »
Ejemplo
Establecer color de fondo para dos elementos diferentes:
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p
style="background-color:tomato;">This is a paragraph.</p>
</body>
Inténtalo tú mismo »
Color de texto
La propiedad CSS color define el color del texto para un elemento HTML:
Ejemplo
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Inténtalo tú mismo »
Fuentes
La propiedad CSS font-family define la fuente que se utilizará para un elemento HTML:
Ejemplo
<h1 style="font-family:verdana;">Este es un encabezado</h1>
<p style="font-family:courier;">Este es un párrafo.</p>
Inténtalo tú mismo »
Tamaño del texto
La propiedad CSS font-size define el tamaño del texto para un elemento HTML:
Ejemplo
<h1 style="font-size:300%;">Este es un encabezado</h1>
<p style="font-size:160%;">Este es un párrafo.</p>
Inténtalo tú mismo »
Alineación de texto
La propiedad CSS text-align define la alineación horizontal del texto para un elemento HTML:
Ejemplo
<h1 style="text-align:center;">Título centrado</h1>
<p style="text-align:center;">Párrafo centrado.</p>
Inténtalo tú mismo »
Resumen del capítulo
- Utilice el atributo
stylepara diseñar elementos HTML - Utilice
background-colorpara el color de fondo - Utilice
colorpara colores de texto - Utilice
font-familypara fuentes de texto - Utilice
font-sizepara tamaños de texto - Utilice
text-alignpara alineación de texto
