As a SiteSpinner user, you do not have much need to use CSS. But when you do, it would be nice to reduce the amount of typing required to use it. Presented here are shortcut coding rules that can be applied to several CSS style properties.
General Notes Every size or width attribute requires an entry of a number plus a unit code: px for pixels, em for ems, pt for point, % for percentage. When specifying a size or width attribute of zero, you can omit the units code except when the unit is a percentage (%). In this case you must still specify 0%.
In the following examples, a CSS property is shown with its possible shortcut parameters. Not all properties need to be entered. If a parameter is omitted, the browser’s CSS processor will substitute the built-in default value for the missing parameter. In the following code tables, the default parameter value is indicated by being enclosed by square brackets ( [ ] ).
Font font: weight size/line-height family;
where can be weight [normal], bold, bolder, lighter, or a value between 100-900 size number+unit, [inherit], xx-small, x-small, line-height normal, number+unit, or [inherit] family name, "name more-names", or [inherit]
Example:
font: bold 11px/16px verdana, sans-serif;
Border border-top: width style color width style color width style color width style color width style color
where can be width number+unit [3px] style none, hidden, [solid], double, groove, ridge, inset, outset, dotted, or dashed color color-name [black], #hex-value, RGB(r,g,b)
Example:
border: solid 1px blue;
Color CSS color attributes are often written using hex color notation. When using colors where the red, green and blue values are repeating digits, the 6-digit hex value can be shortened to just 3 digits, where each single digit represents the repeated digit. For example, red is represented as #FF0000. The corresponding short cut notation is #F00. Green would be #0F0; blue is #00F; white is #FFF and black is #000.
Note: Since SiteSpinner tools display color values in decimal R,G,B values, you can also enter this instead of the hex code values. The notation to use is RGB (red,green,blue). For example, red would be RGB(255,0,0).
Margins & Padding margin: top right bottom left;
where can be top number+unit [0] right number+unit [0] bottom number+unit [0] left number+unit [0]
Margin and padding values can be provided as above using all 4 values or by a combination of values with fewer parameters.
# of params meaning 3 top (right&left) bottom 2 (top&bottom) (right&left) 1 (top&right&bottom&left)
Examples:
margin: 0 3px 0 3px;
Background background: color image repeat position attachment ;
where can be color color-name [transparent], #hex-value, RGB(r,g,b) image [none] or url(URL path to image) repeat [repeat], no-repeat, repeat-x, repeat-y position X-coord+unit Y-coord+unit, ([top], bottom, or center) ([left], center, or right) attachment scroll or fixed
Example:
background: darkgray url(image.gif) no-repeat 20px 100px fixed;
List Style list-style: type position image;
where can be type none, [disc], square, circle, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-latin, upper-latin, et al. position inside or outside image [none] or url(URL path to image))
Example:
list-style: square inside url(image.gif);
Note: If the specified image parameter cannot be loaded, the square type will be used in its place.
Contact the LowTechGeezer
VM User's Forum
Bruceee's Sandpit
Webmaster's Corner
Other Useful Sites