Como crear cuadros con Hojas de Estilo

En este articulo crearemos por medio de hojas de estilo cuadros o boxes con un color de fondo y un borde, primero les paso la Hoja de Estilo y luego veremos como realizar modificaciones.

<style type="text/css">  </style>

Este codigo CSS va entre las etiquetas <HEAD> y </HEAD>. Si sabemos algo de ingles mas o menos sabran para que sirve cada propiedad, sino aqui a continuacion lo vemos en detalle...

background-color - Determina el color de fondo.
border - Determina el color del borde.
border-style - Determina el estilo del borde, a continuacion vemos los diferentes tipos...

Solid

Dashed

Dotted

Double

border-top-width - Determina el ancho en pixeles del borde de arriba.
border-right-width - Determina el ancho en pixeles del borde derecho.
border-bottom-width - Determina el ancho en pixeles del borde de abajo.
border-left-width - Determina el ancho en pixeles del borde de la izquierda.

Para aplicarlo a la celda de una tabla el codigo HTML seria asi...

<table width="100" border="0" cellspacing="0" cellpadding="4" align="center"> <tr> <td class="cuadro"> </td> </tr> </table>En negrita esta resaltado el codigo que indica que esa celda utilize la clase "cuadro" que definimos anteriormente, el resultado de esto seria el siguiente...

Como ven la tabla tiene sus borde y su fondo tal cual lo definimos, si queremos podemos modificar las propiedades y asi obtener otras variables de colores del fondo y del borde, es cuestion de animarse.

Autor: El Guru Programador
http://www.elguruprogramador.com.ar/zonas/ver.asp?cod=72

Usuarios que han visto este tema también han visto...

- Menus Simples con CSS y listas
- Creando esquinas redondeadas usando CSS
- Botones de Formularios con CSS
- Personalizar Mozilla para saber el tipo de enlace que pulsas con CSS
- Cómo quitar subrayado de los enlaces

- Versión imprimible de este documento

- Enviar por e-mail este documento