Aplicando Propiedades

Estilos para el Texto

Podemos dar un estilo concreto a todo el texto que haya dentro de un determinado Div. En el código Html se usa la palabra mágica <p> para indicar que se va a empezar un párrafo y </p> para indicar que el párrafo ha terminado (Esto es Html, y está explicado en el Curso de HTML). Para hacerlo bien, como los textos "Este es mi....." que hemos puesto son dos párrafos distintos, deberiamos encerrar esos textos entre esas palabras mágicas. Quedaría así:

<p>Este es mi primer DIV llamado bartolo</p>
<p>Este es mi segundo DIV llamado catalina</p>

Ahora sí que está en condiciones. Las características de los párrafos que se encuentran dentro de los DIVs, como los DIVs bartolo y catalina, hay que definirlos en la hoja de estilos estilos.css

Bueno, como las características de lo contenido dentro de un DIV las tienes explicadas en el Curso de Estilo CSS, aquí solo te voy a explicar con detalle los estilos del propio DIV o capa. Las características principales para una capa son las siguientes:

BACKGROUND-COLOR:

Esto define el color de fondo de la capa. Para especificar qué color queremos hemos de colocarlo en modo hexadecimal. Si, es un verdadero rollo acertar con el color, je je je. Puedes encontrar información acerca de los colores en hexadecimal y algunos ejemplos en www.aulaclic.es

Por ejemplo, un tono de verde podría ser #00CC00, un tono de azul #00CCFF, uno naranja #FF9900. Para especificar el color basta con escribir una línea en la hoja de estilos estilo.css. Por ejemplo, vamos a dar al DIV bartolo y al DIV catalina los dos primeros colores anteriores. La hoja de estilos debe quedar así:

bartolo {background-color:#00CC00 ; }
catalina {background-color:#00CCFF ; }

Ahora vamos a encerrar a bartolo y catalina dentro un DIV llamado global y le vamos a dar el tercer color. Así podremos ver más claramente donde empieza y donde termina cada DIV. Para darle el color a global primero creamos ese DIV en la página index.html así:

<html>
  <head>
    <title>Mi Primera Web Con DIVs</title>
    <link rel="stylesheet" href="estilo.css" type="text/css" media="all">
  </head>
  <body>
    <div id="global">
      <div id="bartolo"><p>Este es mi primer DIV llamado bartolo</p></div>
      <div id="catalina"><p>Este es mi segundo DIV llamado catalina</p></div>
    </div>
  </body>
</html>

Y ahora definimos el estilo que llamaremos "global" en la hoja de estilos estilo.css de este modo:

#global {background-color:#FF9900}
#bartolo {background-color:#00CC00}
#catalina {background-color:#00CCFF}

Si haceis eso y guardais ambos archivos, al abrir el index.html aparecerá esto. Vemos en este ejemplo como aparece una línea verde que es la capa bartolo, una azul que es la catalina y de fondo se ve el color naranja de la capa global que contiene a estos dos personajes.