Ejemplo III de Estilos CSS. Dar formato al texto

Con este ejemplo vamos a ver como darle un formato concreto y algo distinto al predeterminado a nuestros títulos y comprobaremos como están separadas la parte que indica el Aspecto de la que indica el Contenido.

Este es el código para dicho ejemplo. No os asustéis porque en lo sucesivo os explico todo lo que aqui aparece detalladamente.

Copiaros este código tal y como os dije en el apartado anterior y os comento como funciona. (lo que rodea a "color:red" son corchetes "{ }", no paréntesis "( )" !! )

<html>
  <head>
    <title>Ejemplo1 de Estilo</title>
    <style>
      .rojo {color:red;}
    </style>
  </head>
  <body>
    <p>Esto es un ejemplo de <span class="rojo">Estilo</span></p>
  </body>
<html>

Vemos como están claramente separadas la zona de definición de la Forma y de Contenido. En la cabecera, entre <style> y </style> se define la forma en que se deben representar los contenidos. Por otro lado, entre <body> y </body> se encuentran los contenidos en sí, y se indica el tipo de presentación (el formato) que debe tener cada elemento, los cuales ya han sido definidos en la zona style.

Zona de Definición de la Forma

Las definiciones de cada uno de los estilos se agrupan entre las etiquetas <style> y </style> dentro de la cabecera (head).

Podemos definir todos los estilos que queramos, e incluso retocar los ya existentes. Aunque os lo explico más adelante, en el ejemplo que nos ocupa se puede ver que se esta definiendo un estilo llamado rojo, que simplemente se caracteriza por convertir en color rojo (red) el elemento al que se le aplique.

La definición de un estilo se denomina "regla" y consta de un "selector" (en el caso del ejemplo el selector sería "rojo") y una "declaración", donde se indican las características que deseamos que tenga ese elemento o selector.

Zona de Definición del Contenido

En esta zona, vemos que se ha escrito un párrafo (caracterizado por ir entre los simbolos <p> y <p>) y que a una de sus palabras (concretamente "Estilo") se le ha aplicado el estilo "rojo" antes definido. Vemos como para aplicar ese estilo a esa palabra se usa la nueva palabreja <span>.

Todo lo encerrado entre <span...> y </span> tendrá el formato que se indique mediante la otra palabreja class.

Para especificar qué tipo de estilo de los definidos en style se debe aplicar a lo encerrado entre <span...> y </span> se utiliza la palabra class de la forma que veis en el ejemplo:

<span class="tipodeestilo"> texto al que se va a aplicar el estilo </span>

No es tan dificil, no?