Below you'll find a list of the different Data Types and a short description, an image of the editor for the type and an example of the use. All from vB 4.0.2.
Simple Types
String
Any textstring can be entered. Useful for odd css entities. Keep in mind that there is a phrase system also. Maybe a phrase would be more fitting for your application?
speak: {vb:stylevar your_string};
Numeric
Any textstring can be entered. No validation is build into the type so you are not limited to numbers. The only real benifit compared to the String type is that the title of the input box is Numeric instead of String, hinting to the user what should be entered. If you are going to use the value for a size I would use either the Dimension type or the Size type instead.
font-size: {vb:stylevar your_number}px;
[i]width: {vb:math {vb:stylevar single_width} * {vb:stylevar your_number}}px;
URL
Any textstring can be entered. No validation built into the type this time either. As with Numeric, the only real benifit compared to the String type is the title ("URL").
background-image: url({vb:stylevar your_url});
Path
Again, any textstring can be entered, so the title is the only benifit compared to the String type.
background-image: url(images/{vb:stylevar your_path}/image.png);
Color
This time, the type actually gives us something compared to the String type. This gives us a textfield and the little color-square you surely know by now. Either you enter the color in the textfield, or you click on the square and use the popup. Again there is no validation check that what you entered is a correct css color if you don't create your own using the Validation field.
color: {vb:stylevar your_color}; or
background-color: {vb:stylevar your_color}; or
border-color: {vb:stylevar your_color};
Image Path
As most of the other simple types, this only gives you a title.
background-image: url(images/{vb:stylevar your_path}/image.png);
Image
This doesn't even give you its own title, this just gave me a regular textfield labeled "String". (maybe a bug?)
background-image: url({vb:stylevar your_image}); or
background-image: {vb:stylevar your_image}; if you include the url() in your variable data
Font List
This gives you a textarea input box instead of the textfield, and its own title.
font-family:{vb:stylevar your_fontlist};
Size
This gives you a select box labeled units containing different css units (px, em, % etc) and a textbox labeled Size. As usual, the texbox isn't validated.
width:{vb:stylevar your_size};
font-size:{vb:stylevar your_size};
Complex Types
Background
Gives you the options availible to the css entity background. It seems no validation this time either. And writing a validation script would be tricky or maybe impossible (?)
background:{vb:styelvar your_background};
Font
Suitable for the font css entity. No validation.
font:{vb:stylevar your_font};
Text Decoration
For the text-decoration entity. Uses a collection of Yes/No radio buttons for each of the availible options. One a bit strange thing is that you can select None at the same time as all the other options, but if you do the none overrides the other so all is well

text-decoration:{vb:stylevar your_textdecoration};
Dimension
Obviously used for things with a width and a height. Two textfields and one Popup for units.
width:{vb:stylevar your_dimension.width};
height:{vb:stylevar your_dimension.height};
Border
For the border entity.
border:{vb:stylevar your_border};
Padding
For the padding entity. The "Use the 'top' value for all sides" option is useful.
padding:{vb:stylevar your_padding};
Margin
Really the same as the Padding type. Css-wise they are the same, so the only reason would be for the user to know what they are entering info for, but since there is no label in this version of vBulletin it is redundant this far. (but since it is set in the database it might show up in future versions of vBulletin, so you better stick to the right type)
margin:{vb:stylevar your_margin};