Creating window styled boxes using CSS

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:

Here goes the Window Title!

Here goes the content for your Windowed HTML box.

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! :D )

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

Chat with the Author

This post was written by Veera, a software developer by profession and a maker by passion.

You will be taken to twitter.com where you can edit the tweet before posting.

If you liked my writing, you may like my products