Page History

Servoy supports a subset of the CSS3 style properties:

{note:title=Specifying colors}When specifying color values, there are three ways to specify the color:
- color value: red;
- hexadecimal value: #ff0000;
- rgb value: rgb(255,0,0);

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

{table:class=servoy sSummery}
{colgroup}
{column:width=120px}{column}
{column}{column}
{column}{column}
{column}{column}
{colgroup}
{tr:style=height: 30px;}
{th}Property{th}
{th}Values{th}
{th}Examples{th}
{th}Comment{th}
{tr}

{tr}{td:colspan=3}h6.text{td}{tr}
{tr}{td}color{td}{td}{td}{td}color: green;\\color: #00ff00;\\color: rgb(0,255,0);{td}{td}{td}{tr}
{tr}{td}text-align{td}{td}left, right, center, justify{td}{td}text-align: left;{td}{td}horizontal text alignment{td}{tr}
{tr}{td}vertical-align{td}{td}baseline, sub, super, top, text-top, middle, bottom, text-bottom{td}{td}vertical-align: top;{td}{td}vertical text alignment{td}{tr}

{tr}{td:colspan=3}h6.font{td}{tr}
{tr}{td}font{td}{td}{td}{td}font: bold 10pt Verdana;{td}{td}Shorthand notation: specifies the entire font styling{td}{tr}
{tr}{td}font-family{td}{td}font family names, comma separated{td}{td}font-family: Verdana, Arial, "Century Schoolbook"{td}{td}Add multiple font families in case one is not available. Font family names containing spaces must be enclosed in quotes{td}{tr}
{tr}{td}font-style{td}{td}normal, italic, oblique{td}{td} font-style: italic;{td}{td}{td}{tr}
{tr}{td}font-variant{td}{td}normal, small-caps{td}{td} font-variant: small-caps;{td}{td}{td}{tr}
{tr}{td}font-weight{td}{td}normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900{td}{td} font-weight: bold;{td}{td}{td}{tr}
{tr}{td}font-size{td}{td}pt, px, percentage, length, smaller, larger, small, x-small, xx-small, medium, large, x-large, xx-large{td}{td} font-size: 12px;{td}{td}{td}{tr}

{tr}{td:colspan=3}h6.background{td}{tr}
{tr}{td}background-color{td}{td}{td}{td}background-color: red;\\background-color: #ff0000;\\background-color: rgb(255,0,0);{td}{td}{tr}{td}background-image{td}{td}{td}{td}background-image: url(media:///myImage.png);{td}{td}{td}{tr}

{tr}{td:colspan=3}h6.border{td}{tr}
{tr}{td}border{td}{td}\[border-width\] border-style \[border-color\]{td}{td}border: 1px solid black;{td}{td}Shorthand notation: sets the entire border styling{td}{tr}
{tr}{td}border-width{td}{td}px, thin, medium, thick{td}{td}border-width: 1px;\\border-width: 1px 2px 3px 4px;{td}{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){td}{tr}
{tr}{td}border-top-width{td}{td}{td}{td}border-top-width: 1px;{td}{td}{td}{tr}
{tr}{td}border-right-width{td}{td}{td}{td}border-right-width: 2px;{td}{td}{td}{tr}
{tr}{td}border-bottom-width{td}{td}{td}{td}border-bottom-width: 3px;{td}{td}{td}{tr}
{tr}{td}border-left-width{td}{td}{td}{td}border-left-width: 4px;{td}{td}{td}{tr}

{tr}{td}border-color{td}{td}{td}{td}border-color: red;\\border-color: red green blue yellow;{td}{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){td}{tr}
{tr}{td}border-top-color{td}{td}{td}{td}border-top-color: red;{td}{td}{td}{tr}
{tr}{td}border-right-color{td}{td}{td}{td}border-right-color: green;{td}{td}{td}{tr}
{tr}{td}border-bottom-color{td}{td}{td}{td}border-bottom-color: blue;{td}{td}{td}{tr}
{tr}{td}border-left-color{td}{td}{td}{td}border-left-color: yellow;{td}{td}{td}{tr}

{tr}{td}border-style{td}{td}none, solid, double, groove, ridge, inset, outset{td}{td}border-style: solid;\\border-style: solid double none inset;{td}{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){td}{tr}
{tr}{td}border-top-style{td}{td}{td}{td}border-top-style: solid;{td}{td}{td}{tr}
{tr}{td}border-right-style{td}{td}{td}{td}border-right-style: double;{td}{td}{td}{tr}
{tr}{td}border-bottom-style{td}{td}{td}{td}border-bottom-style: none;{td}{td}{td}{tr}
{tr}{td}border-left-style{td}{td}{td}{td}border-left-style: inset;{td}{td}{td}{tr}

{tr}{td:colspan=3}h6.margin{td}{tr}
{tr}{td}margin{td}{td}px, auto{td}{td}margin: 1px;\\margin: 1px 2px 3px 4px;{td}{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.{td}{tr}
{tr}{td}margin-top{td}{td}{td}{td}margin-top: 1px;{td}{td}{td}{tr}
{tr}{td}margin-right{td}{td}{td}{td}margin-right: 2px;{td}{td}{td}{tr}
{tr}{td}margin-bottom{td}{td}{td}{td}margin-bottom: 3px;{td}{td}{td}{tr}
{tr}{td}margin-left{td}{td}{td}{td}margin-left: 4px;{td}{td}{td}{tr}
{table}