While I was designing my home page Veerasundar.com, I came up with this style definition which can create window styled boxes in a HTML page. I am sharing the style definitions and HTML snippet here, so that if anybody else wants to create the same, they could re-use the same. Off course, there are multiple advanced scripts are available, but below is very basic one, which if you know little HTML and CSS, you can extend it for your own need.

CSS Style definitions:

#Box
{
margin:5px;
text-align:left;
}
#Box #BoxTitle
{
background-color:#EEE;
border:1px solid #DDD;
font-weight:bold;

padding:3px;
font-size:14px;
}

#Box #BoxContent
{
background-color:#FFF;
padding:10px;
border:1px solid #DDD;
border-top-style:none;
line-height:1.5;
font-size:13px;
}

HTML Code:

If you want to see examples of the CSS boxes, then take a look at Veerasundar.com (As of June, I was having a template with Boxes in it. Hope I will not change this template in future! )

Tags: css-tips, html-boxes, windows-in-html