Servoy 6.0.x Documentation
Child pages
  • Supported CSS style properties

Versions Compared

Old Version 3

changes.mady.by.user Paul Bakker

Saved on

compared with

New Version 4

changes.mady.by.user Paul Bakker

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migration of unmigrated content due to installation of a new plugin

...

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:

colors

HTML Table
classservoy sSummery
Colgroup Tag
Column
width120px

Column

Column

Column

Table Row (tr)
styleheight: 30px;
Table Head (th)
Property
Table Head (th)
Values
Table Head (th)
Examples
Table Head (th)
Comment
Table Row (tr)
Table Cell (td)
colspan3
text
Table Row (tr)
Table Cell (td)
color
Table Cell (td)

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

Table Row (tr)
Table Cell (td)
text-align
{td}{td}
Table Cell (td)
left,
right,
center,
justify
{td}{td}
Table Cell (td)
text-align:
left;
{td}{td}horizontal text alignment{td}{tr} {tr}{td}
Table Cell (td)
horizontal text alignment
Table Row (tr)
Table Cell (td)
vertical-align
{td}{td}
Table Cell (td)
baseline,
sub,
super,
top,
text-top,
middle,
bottom,
text-bottom
{td}{td}
Table Cell (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:
Table Cell (td)
vertical text alignment
Table Row (tr)
Table Cell (td)
colspan3
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)
colspan3
background
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)
}{td}{tr}{td}

Table Cell (td)
background-image
{
Table Cell (td)
}{td}{td}{td}

Table Cell (td)
background-image:
url(media:///myImage.png);
{td}{td}{td}{tr} {tr}{td:colspan=3}h6.border{td}{tr} {tr}{td}border{td}{td}\
Table Cell (td)

Table Row (tr)

Table Cell (td)
colspan3
border
Table Row (tr)

Table Cell (td)
border
Table Cell (td)
[border-width
\
]
border-style
\
[border-color
\
]
{td}{td}
Table Cell (td)
border:
1px
solid
black;
{td}{td}Shorthand
Table Cell (td)
Shorthand notation:
sets
the
entire
border
styling
{td}{tr} {tr}{td}
Table Row (tr)

Table Cell (td)
border-width
{td}{td}
Table Cell (td)
px,
thin,
medium,
thick
{td}{td}
Table Cell (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}
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)
}{td}{td}{td}

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

Table Row (tr)

Table Cell (td)
border-right-width
{
Table Cell (td)
}{td}{td}{td}

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

Table Row (tr)

Table Cell (td)
border-bottom-width
{
Table Cell (td)
}{td}{td}{td}

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

Table Row (tr)

Table Cell (td)
border-left-width
{
Table Cell (td)
}{td}{td}{td}

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

Table Row (tr)

Table Cell (td)
border-color
{
Table Cell (td)
}{td}{td}{td}

Table Cell (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}
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)
}{td}{td}{td}

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

Table Row (tr)

Table Cell (td)
border-right-color
{
Table Cell (td)
}{td}{td}{td}

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

Table Row (tr)

Table Cell (td)
border-bottom-color
{
Table Cell (td)
}{td}{td}{td}

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

Table Row (tr)

Table Cell (td)
border-left-color
{
Table Cell (td)
}{td}{td}{td}

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

Table Row (tr)

Table Cell (td)
border-style
{td}{td}
Table Cell (td)
none,
solid,
double,
groove,
ridge,
inset,
outset
{td}{td}
Table Cell (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}
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)
}{td}{td}{td}

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

Table Row (tr)

Table Cell (td)
border-right-style
{
Table Cell (td)
}{td}{td}{td}

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

Table Row (tr)

Table Cell (td)
border-bottom-style
{
Table Cell (td)
}{td}{td}{td}

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

Table Row (tr)

Table Cell (td)
border-left-style
{
Table Cell (td)
}{td}{td}{td}

Table Cell (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}
Table Cell (td)

Table Row (tr)

Table Cell (td)
colspan3
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)

Table Row (tr)