Page History

Servoy supports a subset of the CSS3 style properties:

Note

title	Specifying colors

When specifying color values, there are four ways to specify the color:

color value: red;
hexadecimal value: #ff0000;
rgb value: rgb(255,0,0);
rgba value: rgba(255,0,0,0.1)

For possible values, see: http://www.w3schools.com/css/css_colornames.asp. Servoy does not support CSS system colors

HTML Table

class	servoy sSummery

Colgroup Tag

Column

width	120px

Column

Column

Column

Table Row (tr)

style	height: 30px;

Table Head (th)
Property

Table Head (th)
Values

Table Head (th)
Examples

Table Head (th)
Comment

Table Row (tr)

Table Cell (td)

colspan	3

text

Table Row (tr)

Table Cell (td)
color

Table Cell (td)

Table Cell (td)
color: green; color: #00ff00; color: rgb(0,255,0);

Table Cell (td)

Table Row (tr)

Table Cell (td)
text-align

Table Cell (td)
left, right, center, justify

Table Cell (td)
text-align: left;

Table Cell (td)
horizontal text alignment

Table Row (tr)

Table Cell (td)
vertical-align

Table Cell (td)
baseline, sub, super, top, text-top, middle, bottom, text-bottom

Table Cell (td)
vertical-align: top;

Table Cell (td)
vertical text alignment

Table Row (tr)

Table Cell (td)

colspan	3

font

Table Row (tr)

Table Cell (td)
font

Table Cell (td)

Table Cell (td)
font: bold 10pt Verdana;

Table Cell (td)
Shorthand notation: specifies the entire font styling

Table Row (tr)

Table Cell (td)
font-family

Table Cell (td)
font family names, comma separated

Table Cell (td)
font-family: Verdana, Arial, "Century Schoolbook"

Table Cell (td)
Add multiple font families in case one is not available. Font family names containing spaces must be enclosed in quotes

Table Row (tr)

Table Cell (td)
font-style

Table Cell (td)
normal, italic, oblique

Table Cell (td)
font-style: italic;

Table Cell (td)

Table Row (tr)

Table Cell (td)
font-variant

Table Cell (td)
normal, small-caps

Table Cell (td)
font-variant: small-caps;

Table Cell (td)

Table Row (tr)

Table Cell (td)
font-weight

Table Cell (td)
normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900

Table Cell (td)
font-weight: bold;

Table Cell (td)

Table Row (tr)

Table Cell (td)
font-size

Table Cell (td)
pt, px, percentage, length, smaller, larger, small, x-small, xx-small, medium, large, x-large, xx-large

Table Cell (td)
font-size: 12px;

Table Cell (td)

Table Row (tr)

Table Cell (td)

colspan	3

background

Table Row (tr)

Table Cell (td)
background

Table Cell (td)

Table Cell (td)
background: #00ff00 url(media:///myImage.png) no-repeat fixed center;

Table Cell (td)
Shorthand notation: specifies the entire background styling

Table Row (tr)

Table Cell (td)
background-color

Table Cell (td)

Table Cell (td)
background-color: red; background-color: #ff0000; background-color: rgb(255,0,0);

Table Cell (td)

Table Cell (td)
background-image

Table Cell (td)
Can be an image from url or a linear gradient.

Table Cell (td)
background-image: url(media:///myImage.png); background-image:linear-gradient(top,#fefcea,#f1da36);

Table Cell (td)

Table Row (tr)

Table Cell (td)
background-repeat

Table Cell (td)
repeat, repeat-x, repeat-y, no-repeat

Table Cell (td)
background-repeat: no-repeat;

Table Cell (td)
Specifies repeating pattern of background image. Default value is repeat.

Table Cell (td)
background-position

Table Cell (td)

Table Cell (td)
background-position: left top; background-position: 100px 50px; background-position: 50%;

Table Cell (td)
Specifies background image position relative to its container. First value is horizontal position second one is vertical position. Supported values are using keywords, pixels or percentages.

Table Row (tr)

Table Cell (td)
background-size

Table Cell (td)

Table Cell (td)
background-size: 50%; 100% background-size: 100px 50px; background-size: cover;

Table Cell (td)
Specifies background image size relative to its container. First value is image height, second one is image width. Supported values are using keywords (cover and contain), pixels or percentages.

Table Cell (td)
background-attachment

Table Cell (td)
scroll,fixed

Table Cell (td)
background-attachment: fixed;

Table Cell (td)
Specifies how background image is attached to container.

Table Row (tr)

Table Cell (td)
opacity

Table Cell (td)
Numbers between 0 and 1.

Table Cell (td)
opacity: 0.5;

Table Cell (td)
Opacity level of an element. Default value is 1.

Table Row (tr)

Table Cell (td)

colspan	3

border

Table Row (tr)

Table Cell (td)
border

Table Cell (td)
[border-width] border-style [border-color]

Table Cell (td)
border: 1px solid black;

Table Cell (td)
Shorthand notation: sets the entire border styling

Table Row (tr)

Table Cell (td)
border-width

Table Cell (td)
px, thin, medium, thick

Table Cell (td)
border-width: 1px; border-width: 1px 2px 3px 4px;

Table Cell (td)
Sets all border widths top: 1st value right: 2nd value (fallback to first) bottom: 3rd value (fallback to 1st) left: 4th value, fallback to 2nd value, otherwise 1st value)

Table Row (tr)

Table Cell (td)
border-top-width

Table Cell (td)

Table Cell (td)
border-top-width: 1px;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-right-width

Table Cell (td)

Table Cell (td)
border-right-width: 2px;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-bottom-width

Table Cell (td)

Table Cell (td)
border-bottom-width: 3px;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-left-width

Table Cell (td)

Table Cell (td)
border-left-width: 4px;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-color

Table Cell (td)

Table Cell (td)
border-color: red; border-color: red green blue yellow;

Table Cell (td)
Sets all border colors: top: 1st value right: 2nd value (fallback to first) bottom: 3rd value (fallback to 1st) left: 4th value, fallback to 2nd value, otherwise 1st value)

Table Row (tr)

Table Cell (td)
border-top-color

Table Cell (td)

Table Cell (td)
border-top-color: red;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-right-color

Table Cell (td)

Table Cell (td)
border-right-color: green;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-bottom-color

Table Cell (td)

Table Cell (td)
border-bottom-color: blue;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-left-color

Table Cell (td)

Table Cell (td)
border-left-color: yellow;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-style

Table Cell (td)
none, solid, double, groove, ridge, inset, outset

Table Cell (td)
border-style: solid; border-style: solid double none inset;

Table Cell (td)
Sets all border styles: top: 1st value right: 2nd value (fallback to first) bottom: 3rd value (fallback to 1st) left: 4th value, fallback to 2nd value, otherwise 1st value)

Table Row (tr)

Table Cell (td)
border-top-style

Table Cell (td)

Table Cell (td)
border-top-style: solid;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-right-style

Table Cell (td)

Table Cell (td)
border-right-style: double;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-bottom-style

Table Cell (td)

Table Cell (td)
border-bottom-style: none;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-left-style

Table Cell (td)

Table Cell (td)
border-left-style: inset;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-radius

Table Cell (td)

Table Cell (td)
border-radius: 50px; border-radius: 50px 0px 0px 0px / 20px 0px 0px 0px; border-radius: 50px 0px 0px 0px

Table Cell (td)
Shorthand definition of border radius. The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. First set defines horizontal radii, second set vertical radii.

Table Row (tr)

Table Cell (td)
border-top-left-radius

Table Cell (td)

Table Cell (td)
border-top-left-radius: 50px 10px;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-top-right-radius

Table Cell (td)

Table Cell (td)
border-top-right-radius: 50px 10px;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-bottom-right-radius

Table Cell (td)

Table Cell (td)
border-bottom-right-radius: 50px 10px;

Table Cell (td)

Table Row (tr)

Table Cell (td)
border-bottom-left-radius

Table Cell (td)

Table Cell (td)
border-bottom-left-radius: 50px 10px;

Table Cell (td)

Table Row (tr)

Table Cell (td)

colspan	3

margin

Table Row (tr)

Table Cell (td)
margin

Table Cell (td)
px, auto

Table Cell (td)
margin: 1px; margin: 1px 2px 3px 4px;

Table Cell (td)
Sets all margin widths top: 1st value right: 2nd value (fallback to first) bottom: 3rd value (fallback to 1st) left: 4th value, fallback to 2nd value, otherwise 1st value). NOTE: the order for the Servoy margin property in the Designer is top, left, bottom, right.

Table Row (tr)

Table Cell (td)
margin-top

Table Cell (td)

Table Cell (td)
margin-top: 1px;

Table Cell (td)

Table Row (tr)

Table Cell (td)
margin-right

Table Cell (td)

Table Cell (td)
margin-right: 2px;

Table Cell (td)

Table Row (tr)

Table Cell (td)
margin-bottom

Table Cell (td)

Table Cell (td)
margin-bottom: 3px;

Table Cell (td)

Table Row (tr)

Table Cell (td)
margin-left

Table Cell (td)

Table Cell (td)
margin-left: 4px;

Table Cell (td)

Child pages

Versions Compared

Old Version 14

New Version Current

Key

text

font

background

border

margin