HTML Styles con CSS:

Aplicar estilos a HTML con CSS

CSS se introdujo junto con HTML 4, para proporcionar una mejor manera de estilizar elementos HTML.
CSS se puede añadir a HTML de las siguientes maneras: La mejor forma de añadir CSS a HTML, es poner la sintaxis CSS en archivos CSS separados.
Sin embargo, en este tutorial HTML vamos a presentarles a CSS mediante el atributo de estilo. Esto se hace para simplificar los ejemplos. También hace que sea más fácil para que se modifique el código y probarlo usted mismo.
Usted puede aprender todo sobre CSS en nuestro Tutorial CSS.

Estilos en línea

Un estilo en línea se puede utilizar si un estilo único se va a aplicar a una sola ocurrencia de un elemento.
Para utilizar los estilos en línea, utilice el atributo de estilo en la etiqueta correspondiente. El atributo style puede contener cualquier propiedad CSS.
* El siguiente ejemplo muestra cómo cambiar el color del texto y el margen izquierdo de un párrafo:
  <p style="color:blue;margin-left:20px;">Esto es un párrafo.<p>

* En el siguiente ejemplo vamos a utilizar la propiedad background-color que define el color de fondo de un elemento:
  <!DOCTYPE html>
  <html>
  <body style="background-color:yellow;">
  <h2 style="background-color:red;">Esto es un titular</h2>
  <p style="background-color:green;">Esto es un páragrafo.</p>
  </body>
  </html>

La propiedad background-color hace que el "viejo" bgcolor atributo quede obsoleto.

* En el siguiente ejemplo, la familia de la fuente, el color y las propiedades font-size define el tipo de letra, color y tamaño del texto de un elemento:
  <!DOCTYPE html>
  <html>
  <body>
  <h1 style="font-family:verdana;">Esto es un titular</h1>
  <p style="font-family:arial;color:red;font-size:20px;">Esto es un paragrafo.</p>
  </body>
  </html>

Las fuentes de la familia, el color y las propiedades font-size hacen que la vieja etiqueta <font>quede obsoleta.

* En el siguiente ejemplo, vamos a ver la propiedad text-align como especifica la alineación horizontal del texto en un elemento:
  <!DOCTYPE html>
  <html>
  <body>
  <h1 style="text-align:center;">Centrar el Texto en el titular</h1>
  <p>Esto es un paragrafo.</p>
  </body>
  </html>

La propiedad text-align hace que la vieja etiqueta <center> quede obsoleta.

Hoja de estilo interna

Una hoja de estilo interna se puede utilizar si un solo documento tiene un estilo único. Los estilos internos se definen en la sección <head> de una página HTML, utilizando la etiqueta <style>, así:
  <head>
  <style type="text/css">
  body {background-color:yellow;}
  p {color:blue;}
  </style>
  </head>

Hoja de estilos externa

Una hoja de estilos externa es ideal cuando se aplica el estilo a muchas páginas. Con una hoja de estilos externa, puede cambiar el aspecto de un sitio Web completo, cambiando un solo archivo. Cada página debe enlazar con la hoja de estilo con la etiqueta <link>. La etiqueta <link> va dentro de la sección <head>:
  <head>
  <link rel="stylesheet" type="text/css" href="mihojadeestilos.css">
  </head>

Etiquetas y atributos desaprobados

En HTML 4, varias etiquetas y atributos fueron utilizados para los documentos de estilo. Estas etiquetas no son compatibles con las nuevas versiones de HTML.
Evite el uso de los elementos: <font>, <center> y <strike> y los atributos: color y bgcolor.