Estilos HTML
Dando estilos al HTML
Cada elemento HTML tiene un estilo predeterminado, (el color del fondo es blanco y el color del texto es negro) y se puede cambiar el estilo predeterminado de un elemento HTML con el atributo de estilo.
En el siguiente ejemplo cambiamos el color de fondo a un color gris claro:
<body style="background-color: lightgray"> <h1>Este es un encabezado</h1> <p>Este es un Párrafo</p> </body>
El atributo bgcolor es soportado en versiones anteriores del HTML, pero ya no es valido en HTML5.
El atributo style del HTML
El atributo style tiene la siguiente sintaxis:
style = " propiedad : valor "
La propiedad de hecho es una propiedad del CSS y el valor también es un valor del CSS.
Nota: Más adelante aprenderás más sobre el lenguaje CSS en este tutorial.
El color de texto del HTML
La propiedad color define el color del texto que debe de ser usado en el elemento HTML:
<h1 style="color: blue">Este es un encabezado</h1> <p style="color: red">Este es un Párrafo</p>
Las fuentes del HTML
La propiedad font-family define el tipo de fuente a usar para el elemento HTML:
<h1 style="font-family: verdana">Este es un encabezado</h1> <p style="font-family: courier">Este es un Párrafo</p>
La etiqueta <font> soportada en versiones anteriores del HTML, ya no es valida en HTML5.
El tamaño de texto del HTML
La propiedad font-size define el tamaño del texto a usar para el elemento HTML:
<h1 style="font-size: 300%">Este es un Encabezado</h1> <p style="font-size: 160%">Esto es un Párrafo</p>
El alineamiento de texto del HTML
La propiedad text-align define el alineamiento horizontal del texto para un elemento HTML:
<h1 style="text-align: center">Este es un Encabezado</h1> <p>Este es un Párrafo</p>
La etiqueta <center>soportada en versiones anteriores del HTML ya no es valida en HTML5.
Resumen del Capítulo
- Use el atributo style para dar estilos a los elementos HTML.
- Use background-color para cambiar el color de fondo a los elementos HTML.
- Use color para cambiar el color de texto.
- Use font-family para cambiar la fuente de texto.
- Use font-size para cambiar el tamaño de texto.
- Use text-align para alinear (horizontalmente) el texto.