En muchas ocasiones, al maquetar una página web, se necesita recuadrar una información para remarcar su contenido, destacándolo de otros textos del documento.

Es básicamente lo que vamos a hacer en el ejercicio de esta ocasión. Se trata de un ejemplo muy sencillo, pero que sirve como continuación de otro artículo que hemos publicado en el taller de HTML. (ENLACE A http://www.desarrolloweb.com/articulos/2025.php) En dicho taller realizábamos los recuadros utilizando únicamente HTML, sin declaración de estilos, lo que no es muy adecuado debido a las tendencias actuales.

CSS es, en estos momentos, la tecnología más adecuada para definir los estilos de un documento. Lo que antes habíamos realizado con HTML se puede realizar con CSS obteniendo varias ventajas de la maquetación con Hojas de Estilo en Cascada.

Nota: Las ventajas y fundamentos de las Hojas de Estilo en Cascada (CSS) se pueden ver en el artículo Maquetar una web con CSS.

El ejercicio

Para empezar, sería bueno observar el objetivo de este ejercicio, para tener una idea exacta de lo que vamos a hacer.
El ejercicio dispone de tres recuadros con estilos distintos, aunque a pesar de ello tienen códigos muy similares. Para variar su aspecto, simplemente se cambia la declaración de estilos para cada uno.

La maquetación con estilos se realiza utilizando etiquetas <DIV> en lugar de tablas. Por eso el código incluye las etiquetas <DIV> necesarias y poco más.

Este sería el código de la primera tabla.

<div id=tabla1>
   <div id=cabtab1>
   Recuadro curioso con HTML
   </div>
   <div id=cuerpotab1>
   Este es el interior del recuadro. Esperamos que os resulte elegante... es muy sencillo.
   </div>
</div>

Contiene tres etiquetas <DIV> una para englobar el recuadro entero, y asignarle estilos como el borde o estilos que deseemos que se apliquen a todo el recuadro. También tendremos un <DIV> para el encabezamiento del recuadro y otro para el cuerpo.

Los estilos que utilizamos para este recuadro son los siguientes.

#tabla1{
   border: 1px solid #1E679A;
   width: 280px;
}
#cabtab1{
   background-color: #1E679A;
   font-weight: bold;
   color: #ffffff;
   padding: 2 2 2 2px;
}
#cuerpotab1{
   padding: 4 4 4 4px;
   background-color: #ffffcc;
}
Cada <DIV> tiene asignado un estilo distinto dependiendo de nuestras necesidades.

Para el segundo recuadro podremos ver un código HTML casi idéntico. Lo único que cambiamos son los identificadores de los <DIV> , para poder asignar unos estilos distintos al recuadro.

<div id=tabla2>
   <div id=cabtab2>
   Recuadro curioso con HTML
   </div>
   <div id=cuerpotab2>
   Este es el interior del recuadro. Esperamos que os resulte elegante... es muy sencillo.
   </div>
</div>

El código CSS para definir el aspecto es el siguiente.

#tabla2{
   border: 1px solid #165480;
   width: 200px;
}
#cabtab2{
   background-color: #5fa6d7;
   font-weight: bold;
   font-size: 8pt;
   padding: 2 2 2 2px;
}
#cuerpotab2{
   font-size: 8pt;
   padding: 4 4 4 4px;
   background-color: #ffffcc;
}

Como se puede ver, no tiene ninguna dificultad adicional con respecto al primer ejemplo, pues sólo se definen estilos para cada uno de los <DIV> .

En el tercer recuadro hemos complicado un poquito el código, aunque nada reviste ninguna complicación. En este caso, como el recuadro contenía un texto con varias opciones de una lista, hemos incluido, dentro del cuerpo del recuadro, un <ul> (unordered list) con cada una de las opciones a visualizar.

<div id=tabla3>
  <div id=cabtab3>
  Recuadro curioso con HTML
  </div>
  <div id=cuerpotab3>
   <ul>
     <li>Opción uno</li>
     <li>Otra opción con texto en varias líneas</li>
     <li>Lo que sea que desees destacar</li>
     <li>Última opción</li>
   </ul>
  </div>
</div>

En la declaración de estilos también hemos definido el aspecto de la lista, para que se ajuste a nuestras necesidades.

#tabla3{
   border: 1px solid #80A93E;
   width: 200px;
}
#cabtab3{
   background-color: #B7F259;
   font-weight: bold;
   font-size: 8pt;
   padding: 2 2 2 2px;
}
#cuerpotab3{
   font-size: 8pt;
   padding: 4 4 4 4px;
   background-color: #F5ECB9;
}
#cuerpotab3 ul{
   margin: 0 2 0 20px;
   padding: 0 0 0 0px;
}
#cuerpotab3 li{
   margin: 0 2 0 2px;
   padding: 0 0 0 0px;
}

Para definir el estilo de la lista indicamos el identificador del <DIV> donde se encuentra la lista, seguido de la etiqueta sobre la que deseamos declarar los estilos, en este caso "ul" para definir los estilos de la lista y "li" para declarar los estilos de cada una de las opciones. En este ejemplo hemos declarado los estilos necesarios para definir un margen adecuado para la lista y para cada una de sus opciones.

Conclusión

Hemos visto una manera sencilla de hacer cajas con CSS. Tal vez este artículo es demasiado básico, pero se trataba de mostrar cómo se pueden hacer con CSS algunas cosas que habíamos hecho previamente con sólo HTML.

Como se puede ver, comparando este ejemplo con su contrapartida en HTML , Con CSS se maqueta con mucha más coherencia y se obtiene un código mucho más claro.