Bautizando DIVs

Vamos a estrenar la Hoja de Estilo estilo.css definiendo algunas propiedades en ella. No te hace ilusión? je je. Primero abrimos el archivo index.html y asignamos un nombre de estilo al único div que tenemos en él. Lo bautizaremos bartolo, y esto se hace añadiendo id="nombre-del-estilo" al primer <div>, tal y como puedes ver abajo.

Para poder aprovechar más estos ejemplos vamos a crear un segundo div. En este caso lo bautizamos como catalina. No, no es que no sepa escribir, es que hay que acostumbrarse a escribir los nombres de archivos y de estilos sin mayúsculas, ni acentos, ni espacios en blanco, ni guiones bajos "_" (los guiones medios "-" si valen) ni cosas raras. Si no usas números en los nombres de estilos mejor que mejor, a veces da problemas.

El caso es que el código ahora quedaría así (hemos ampliado eso de "esto es mi primer DIV añadiendo "llamado bartolo" y lo mismo para catalina):

<html>
  <head>
  </head>
  <body>
    <div id="bartolo">
      Este es mi primer DIV llamado bartolo
    </div>
    <div id="catalina">
      Este es mi segundo DIV llamado catalina
    </div>
  </body>
</html>

Si guardas el index.html y lo abres no verás cambios, pues el navegador se va a buscar las características del bartolo y estas no han sido aún definidas en la hoja de estilo, así que vamos a hacerlo ahora.

Las características que puedes darle a un Div son un montón, todas las que se pueden hacer en HTML y aún unas cuantas más. En las páginas siguientes vamos a ir viendo algunas de ellas aplicadas a nuestra querida pareja, bartolo y catalina. Cuando me canse de explicar características pasamos a hacer la página web en serio, pero mientras no está de más que te vayas familiarizando con todas esas propiedades, que nos van a hacer falta para la web definitiva. Seguimos?