Recuadro sencillo y elegante con CSS

Cmo hacer un recuadro atractivo pero muy fcil de hacer, utilizando CSS para aplicarle los estilos.

En muchas ocasiones, al maquetar una pgina web, se necesita recuadrar una informacin para remarcar su contenido, destacndolo de otros textos del documento. Es bsicamente lo que vamos a hacer en el ejercicio de esta ocasin. Se trata de un ejemplo muy sencillo, pero que sirve como continuacin de otro artculo que hemos publicado en el taller de HTML. (ENLACE A http://www.desarrolloweb.com/articulos/2025.php) En dicho taller realizbamos los recuadros utilizando nicamente HTML, sin declaracin de estilos, lo que no es muy adecuado debido a las tendencias actuales. CSS es, en estos momentos, la tecnologa ms adecuada para definir los estilos de un documento. Lo que antes habamos realizado con HTML se puede realizar con CSS obteniendo varias ventajas de la maquetacin con Hojas de Estilo en Cascada.
Nota: Las ventajas y fundamentos de las Hojas de Estilo en Cascada (CSS) se pueden ver en el artculo Maquetar una web con CSS.

El ejercicio Para empezar, sera 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 cdigos muy similares. Para variar su aspecto, simplemente se cambia la declaracin de estilos para cada uno. La maquetacin con estilos se realiza utilizando etiquetas <DIV> en lugar de tablas. Por eso el cdigo incluye las etiquetas <DIV> necesarias y poco ms. Este sera el cdigo 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. Tambin 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; }

Cada

<DIV>

tiene asignado un estilo distinto dependiendo de nuestras necesidades.

#cabtab1{ background-color: #1E679A; font-weight: bold; color: #ffffff; padding: 2 2 2 2px; } #cuerpotab1{ padding: 4 4 4 4px; background-color: #ffffcc; }

Para el segundo recuadro podremos ver un cdigo HTML casi idntico. 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 cdigo 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 slo se definen estilos para cada uno de los <DIV> . En el tercer recuadro hemos complicado un poquito el cdigo, aunque nada reviste ninguna complicacin. En este caso, como el recuadro contena 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>Opcin uno</li> <li>Otra opcin con texto en varias lneas</li> <li>Lo que sea que desees destacar</li> <li>ltima opcin</li> </ul> </div> </div>

En la declaracin de estilos tambin 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. Conclusin Hemos visto una manera sencilla de hacer cajas con CSS. Tal vez este artculo es demasiado bsico, pero se trataba de mostrar cmo se pueden hacer con CSS algunas cosas que habamos hecho previamente con slo HTML. Como se puede ver, comparando este ejemplo con su contrapartida en HTML , Con CSS se maqueta con mucha ms coherencia y se obtiene un cdigo mucho ms claro.