Cómo aplicar estilos
Una regla de estilo se puede aplicar mediante el uso del parámetro style. Por ejemplo, la línea:
<h1 style="{color:blue}">Bienvenidos < /h1>
Mostrará un título de color azul.
Ese método funciona correctamente, pero es difícil de mantener. En un documento con 50 títulos tendríamos que aplicar el formato a cada uno de ellos. ¿Y si después nos cansamos y los queremos poner todos verdes? Tendríamos que modificarlos todos. Por este motivo, las hojas de estilo se suelen aplicar de otra manera: como elementos dentro de la cabecera de la página web y mejor aún, en archivos externos. Así se recopilan todas las reglas en un mismo espacio, haciendo que sea más sencillo su mantenimiento y modificación.
De este modo, una regla que hiciese exactamente lo mismo quedaría así:
h1 { color:blue; }
La línea anterior, situada en la cabecera (entre <head> y </head>) de la página, haría que se cambiasen de color todos los <h1> de nuestra página. Como se puede observar es más rápido y más sencillo. Incluso el mantenimiento de la página se vuelve trivial, ya que el cambio de color se reduciría a poner green (verde) donde ahora pone blue (azul).
Veamos un ejemplo de cómo usar el elemento <style> en la cabecera de un documento HTML:
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
Este código daría lugar a lo siguiente:
This is a heading
This is a paragraph.