Child pages
  • Supported CSS style properties
Skip to end of metadata
Go to start of metadata

Servoy supports a subset of the CSS3 style properties:

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

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;
  • No labels