Servoy supports a subset of the CSS3 style properties in Smart and Web Client:

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/colors/colors_names.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
 
background: #00ff00 url(media:///myImage.png) no-repeat fixed center;
Shorthand notation: specifies the entire background styling
background-color
 
background-color: red;
background-color: #ff0000;
background-color: rgb(255,0,0);
 
background-image
Can be an image from url or a linear gradient.
background-image: url(media:///myImage.png);
background-image:linear-gradient(top,#fefcea,#f1da36);
 
background-repeat
repeat, repeat-x, repeat-y, no-repeat
background-repeat: no-repeat;
Specifies repeating pattern of background image. Default value is repeat.
background-position
 
background-position: left top;
background-position: 100px 50px;
background-position: 50%;
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.
background-size
 
background-size: 50%; 100%
background-size: 100px 50px;
background-size: cover;
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.
background-attachment
scroll,fixed
background-attachment: fixed;
Specifies how background image is attached to container.
opacity
Numbers between 0 and 1.
opacity: 0.5;
Opacity level of an element. Default value is 1.
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;
 
border-radius
 
border-radius: 50px;
border-radius: 50px 0px 0px 0px / 20px 0px 0px 0px;
border-radius: 50px 0px 0px 0px
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.
border-top-left-radius
 
border-top-left-radius: 50px 10px;
 
border-top-right-radius
 
border-top-right-radius: 50px 10px;
 
border-bottom-right-radius
 
border-bottom-right-radius: 50px 10px;
 
border-bottom-left-radius
 
border-bottom-left-radius: 50px 10px;
 
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;