Servoy supports a subset of the CSS3 style properties:
Specifying colors
When specifying color values, there are three ways to specify the color:
For possible values, see: http://www.w3schools.com/css/css_colornames.asp. Servoy does not support CSS system colors
Property | Values | Examples | Comment |
---|---|---|---|
text |
|||
color | color: green; color: #00ff00; color: rgb(0,255,0); |
||
text-align | left, right, center, justify | text-align: left; | horizontal text alignment |
vertical-align | baseline, sub, super, top, text-top, middle, bottom, text-bottom | vertical-align: top; | vertical text alignment |
font |
|||
font | font: bold 10pt Verdana; | Shorthand notation: specifies the entire font styling | |
font-family | font family names, comma separated | font-family: Verdana, Arial, "Century Schoolbook" | Add multiple font families in case one is not available. Font family names containing spaces must be enclosed in quotes |
font-style | normal, italic, oblique | font-style: italic; | |
font-variant | normal, small-caps | font-variant: small-caps; | |
font-weight | normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 | font-weight: bold; | |
font-size | pt, px, percentage, length, smaller, larger, small, x-small, xx-small, medium, large, x-large, xx-large | font-size: 12px; | |
background |
|||
background-color | background-color: red; background-color: #ff0000; background-color: rgb(255,0,0); |
||
background-image | background-image: url(media:///myImage.png); | ||
border |
|||
border | [border-width] border-style [border-color] | border: 1px solid black; | Shorthand notation: sets the entire border styling |
border-width | px, thin, medium, thick | border-width: 1px; border-width: 1px 2px 3px 4px; |
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) |
border-top-width | border-top-width: 1px; | ||
border-right-width | border-right-width: 2px; | ||
border-bottom-width | border-bottom-width: 3px; | ||
border-left-width | border-left-width: 4px; | ||
border-color | border-color: red; border-color: red green blue yellow; |
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) |
|
border-top-color | border-top-color: red; | ||
border-right-color | border-right-color: green; | ||
border-bottom-color | border-bottom-color: blue; | ||
border-left-color | border-left-color: yellow; | ||
border-style | none, solid, double, groove, ridge, inset, outset | border-style: solid; border-style: solid double none inset; |
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) |
border-top-style | border-top-style: solid; | ||
border-right-style | border-right-style: double; | ||
border-bottom-style | border-bottom-style: none; | ||
border-left-style | border-left-style: inset; | ||
margin |
|||
margin | px, auto | margin: 1px; margin: 1px 2px 3px 4px; |
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. |
margin-top | margin-top: 1px; | ||
margin-right | margin-right: 2px; | ||
margin-bottom | margin-bottom: 3px; | ||
margin-left | margin-left: 4px; | ||