Estilos en HTML

Para cambiar el estilo en el que por defecto se visualizan los elementos de un documento HTML en un navegador web, existen varios métodos:

Estilo en línea (Inline): utilizando el atributo style.
Estilo interno (Internal): usando un elemento "style".
Estilo externo (External): empleando un archivo CSS (Cascading Style Sheets) externo al documento HTML.

EJEMPLO A continuación se explica cómo hacer uso de estos métodos para mostrar un párrafo de color rojo.

Estilo en línea - Atributo style

Para cambiar el color de un párrafo, se puede escribir el siguiente código ("estilo-en-linea.html"):

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Ejemplo de estilo en línea</title>
  </head>
  <body>
    <p style="color:red">Esto es un párrafo de color rojo.</p>
  </body>
</html>

Obsérvese que, se ha utilizado el atributo style en el elemento "p". En un navegador se verá algo similar a:

Visualización del archivo estilo-en-linea.html en Google Chrome, donde se ve un párrafo de color rojo aplicando estilo en línea.

Estilo interno - Elemento "style"

En este caso, se usa el elemento "style" dentro del "head" ("estilo-interno.html"):

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Ejemplo de estilo interno</title>
    <style>
      p {color:red;}
    </style>
  </head>
  <body>
    <p>Esto es un párrafo de color rojo.</p>
  </body>
</html>

Estilo externo - Elemento "link"

Para aplicar un estilo externo, hay que hacer uso del elemento "link", el cual permite enlazar el documento HTML con un archivo externo. El código HTML puede ser ("estilo-externo.html"):

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Ejemplo de estilo externo</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <p>Esto es un párrafo de color rojo.</p>
  </body>
</html>

Véase que, en el atributo rel se indica la relación que existe entre el archivo HTML y el archivo CSS. Por otro lado, por medio del atributo href se ha enlazado el documento HTML con el archivo "styles.css", que es donde está definido el estilo del párrafo:

p {color:red;}

Por norma general, utilizar archivos CSS externos es la forma más habitual y adecuada de aplicar estilos a documentos HTML.

EJEMPLO Además de color, existen otras muchas propiedades CSS que pueden utilizarse. Por ejemplo, si además de rojo, también se quiere indicar que el párrafo se muestre centrado en la pantalla del navegador, esto se puede hacer usando la propiedad text-align ("parrafo-rojo-y-centrado.html"):

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Ejemplo de párrafo rojo y centrado</title>
    <style>
      p {
        color:red;
        text-align:center;
      }
    </style>
  </head>
  <body>
    <p>Esto es un párrafo de color rojo y centrado.</p>
  </body>
</html>

En pantalla se visualizará:

Visualización del archivo parrafo-rojo-y-centrado.html en Google Chrome, donde se ve un párrafo de color rojo y centrado en la pantalla aplicando estilo interno.

Elemento "span" y atributo class

EJEMPLO Para ver parte del texto de un párrafo de color rojo:

Se puede escribir ("uso-elemento-span-y-atributo-class.html"):

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <title>Ejemplo uso del elemento span y del atributo class</title>
    <style>
      .rojo {color:red;}
    </style>
  </head>
  <body>
    <p>Párrafo con <span class="rojo">dos palabras</span> de color rojo.</p>
  </body>
</html>

Véase que, asignando el valor "rojo" al atributo class, se ha indicado el estilo (en este caso color:red;) con el que el texto contenido dentro del elemento "span" (en este caso "dos palabras") debe mostrarse en pantalla.

.rojo tiene que llevar el carácter punto, ya que, ha sido definido por el programador.

Ejercicio resuelto
Cuatro párrafos con estilos