These days I am working very heavily on conversion of existing web applications to use new HTML5 and CSS specifications. So I installed add-on in Visual Studio 2010 to use HTML5 intellisense. Now when I started to create new pages and type HTML tags, I could see new attributes and elements in the intellsense drop down list etc. One of the things that stood out on most of the pages was that all the TABLE elements had greenunderlines for attributes like cellpadding, cellspacing etc. When I hover on those errors, I get the following message.

How to set cellpadding, cellspacing and border for table using CSS

Since a lot of existing web applications have the page structure created using TABLE elements, you will need a solution to get rid of these obsolete attributes and make your pages CSS compliant. Here what you are going to do.

Set border

Define a style for your table in your CSS file or style section in header of your page. And add border style to it. To control how border is drawn around cells, you will need to add border-collapse style as well. Here is an example of it.

.tablewithspacing
{
    border: 1px solid #193144;
    border-collapse:separate;
}

.tablewithspacing td
{
    border:1px solid #193144;
    padding:2px;
    vertical-align:top;
}

There are two possible values for border-collapse style.

	collapse: This value will make border lines collapse or draw on top of each other. You can see from the image here how border lines are drawn.
	separate: This value will make border lines draw with padding in between. As you can see image how each cell has individual border rectangle drawn.

If you want to draw border only around the table and not for individual cells then do not set border style for td element.

Set cellpadding

As you can see from the same CSS style, I have set padding style for td element for my table. This will ensure that I have cellpadding of 2px around the cells.

In my previous post, How to draw circle with CSS, we saw drawing of circle using CSS box-radius style. In this post I will show another aspect of syntax of box-radius style to draw an ellipse. An oval shape is ellipse which has major-axis length idfferent from minor-axis. In previous post I only used one value for box-radius.

box-radius Syntax

box-radius: horizontalRadius / verticalRadius

For simplicity sake I have only used one value. As you can see there are two components of border-radius to control radius along horizontal and vertical direction. If you do not specify vertical radius value, browser will use horizontal radius value for vertical radius as well.

Draw Ellipse

Based on the above information about syntax, to draw ellipse we need to specify different values for horizontal and vertical radius. Here is what you will need to draw ellipse.

• DIV that has height different than width. Depending on shape of ellipse you want, height may be more or less than width.
• horizontalRadius value of border-radius will be half of width of DIV
• verticalRadius value of border-radius will be half of height of DIV

Here is an example of style example I used to draw an ellipse using CSS.

.ellipseDiv { height:50px; width:100px; border: 2px solid #005; border-radius:50px / 25px; background-color:#EE5D20; }

In this post I will describe how to use border-radius CSS style to draw a circle in your web page. Most important part of the technique is understanding this new border-radius style and what it does.

border-radius syntax

border-radius: top-left top-right bottom-right bottom-left

These values represent radius of the oval or ellipse that will be be used to draw rounded corner at specified location of the box. I will discuss this syntax of border-radius in more details in subsequent post(s). For now it is sufficient to know that these values are radius of the corner.

Draw circle

A circle is a special case of an oval or ellipse where size of major-axis is equal to minor axis. This means if I take a square and set the radius of corners to half the length of a side of square, it becomes a circle. This is exactly how you will draw the circle. The following style is used to draw a circle.

.circleDiv { height:100px; width:100px; border: 2px solid #005; border-radius:50px; background-color:#EE5D20; }

Key points of this technique are:

• DIV height and width are to be same
• box-radius value should be half the size of div

In this post I will discuss use of box-shadow, a very cool feature of CSS3. As web designers and developers we all spend lot of time trying to create some pleasing effects with boxes and shadows around them. In the older browsers we were limited to creating shadow effects around boxes by using images. For that matter lot of time we end up using images to draw boxes as well. With CSS3, lot of these tedious tasks are handled by latest browsers.

box-shaodw is a very powerful CSS style that can be used to generate some very interesting effects. First lets see general sytanx of this property.

.myStyle{
[box-shadow: xoffset, yoffset, blur radius, spread distance, color, inset | none]
}

In nutshell, box-shadow property allows you to draw a box or shape around a box based on the parameters you specify. You can control rendering of shadow by specifying six parameters. Here is the fun part. You are not limited to only one shadow box. You can specify multiple shadow boxes around your main box. You just need to separat each set by a comma (,). The parameters for this CSS style are very self explanatory. But at times it may require some explanation and I will try to provide you with that. Instead of providing some boring details, lets look at some examples of this CSS style and how it affects rendering of shadow'

	.myBoxShadows { height:120px; width:120px; background-color: #0000f1; box-shadow:0 0 15px #ff00f1; }	This translates to ... Draw a shadow box at an offset of 0px from upper left corner of box. The shadow box will have a blur radius of 15px and draw the shadow in color #ff00f1. Value of blur radius contols how blurred the shadow is going to be. If you set the value of blur radius to 0, the shadow box will be drawn with sharp edges.
	.myBoxShadows { height:120px; width:120px; background-color: #0000f1; box-shadow:0 0 15px 15px #ff00f1; }	This translates to ... Draw a shadow box at an offset of 0px from upper left corner of box. The shadow box will have a blur radius of 15px and draw the shadow in color #ff00f1. Also when shadow box is drawn spread it by a distance of 15px. You can see that shadow box has more width as compared to first case where we did not specify spread distance at all.
	.myBoxShadows { height:120px; width:120px; background-color: #0000f1; box-shadow:0 0 15px 15px #ff00f1 inset; }	This translates to ... Draw a shadow box at an offset of 0px from upper left corner of box. The shadow box will have a blur radius of 15px and draw the shadow in color #ff00f1. Also when shadow box is drawn spread it by a distance of 15px. In this case since inset value has been set, this means that shadow box is going to drawn inwards and not outwards. Browser will first render the main box and then render shadow box on top of it.
	.myBoxShadows { height:120px; width:120px; background-color: #0000f1; box-shadow:15px 15px 0 0 #ff00f1; }	This translates to ... Draw a shadow box at an offset of 15px from upper left corner of box. Since I did not specify any blur radius, you can see that shadow box has very sharp edges. It is like drawing a second box under main box but at a specified x and y offet.
	.myBoxShadows { height:120px; width:120px; background-color: #0000f1; box-shadow:15px 15px 0 0 #ff00f1 inset; }	This translates to ... Draw a shadow box at an offset of 15px from upper left corner of box. Since I did not specify any blur radius, you can see that shadow box has very sharp edges. It is like drawing a second box under main box but at a specified x and y offet. In this case inset value has been set, so the shadow box is drawn inside.
	.myBoxShadows { height:120px; width:120px; background-color: #0000f1; box-shadow:15px 15px 15px 0 #ff00f1; }	This translates to ... Draw a shadow box at an offset of 15px from upper left corner of box. Also use a blur radius of 15px. You can see from the image that shadow box is blurred this time.
	.myBoxShadows { height:120px; width:120px; background-color: #0000f1; box-shadow:15px 15px 0 0 #ff00f1, 8px 8px 0 0 #0fff10; }	This translates to ... Draw a shadow box at an offset of 15px from upper left corner of box with color #ff00f1. Draw a second shadow box at an offset of 8px from upper left corner but with color #0fff10. Here you can see use of two sets of values for specifying shadow box.

As you can see that box-shadow CSS style provides you with enough parameters to create some intresting effects on your web pages. You can see all these styles in action on home page of this site as well.

When developing web pages, choice of colors is big part of skinning in style sheet files. A lot of time instead of using HEX values for RGB, we end up using named colors like blue, green etc. Some time we end up picking a color name that may not be standard and when page is viewed in a different browser, it looks completely different. CSS specification has defined 17 standard named colors. So when using named colors, if you pick one of the following there is more chance of your site looking the same across different browsers.

• aqua
• black
• blue
• fuchsia
• gray
• green
• lime
• maroon
• navy
• olive
• orange
• purple
• red
• silver
• teal
• white
• yellow