Attention! MapTool 1.6+ contains
frame5 and
dialog5 roll options, which support modern HTML 5, CSS, and Javascript.
MapTool 1.7+ additionally contains an
overlay roll option which allows HTML 5, CSS, and JavaScript user interfaces directly in the map view, and adds access to several
Whitelisted CDNs for easy inclusion of Bootstrap CSS, Google Fonts, and JS libraries such as jQuery.
ADVANCED
THIS IS AN ADVANCED ARTICLE
MapTool supports a subset of the CSS level 1 specification. These styles can be used in-line, and also as external styles within dialogs and frames. This is not meant to be an exhaustive reference, nor an introduction to CSS, this page is only a collection of which properties are supported and to what extent. If you are looking for an introduction to CSS, visit W3Schools CSS Tutorial
Also, note that some CSS attributes are modeled but not rendered, meaning that they can be used and will be recognized, they just won't have any effect on the rendered result. The list is available straight from the Java documentation: CSS Styles
Font Properties
font
Value: |
font-style, font-weight, font-size, font-family
|
Initial: |
none
|
Applies To: |
all elements
|
Inherited: |
yes
|
Relative Size: |
only font-size
|
Example: |
font: bold italic 12pt Arial, Helvetica, sans-serif;
|
font-family
Value: |
family-name, generic-name
|
Initial: |
system default
|
Applies To: |
all elements
|
Inherited: |
yes
|
Relative Size: |
N/A
|
Example: |
font-family: Arial, Helvetica, sans-serif;
|
font-size
Value: |
absolute-size, relative-size, length, percentage
|
Initial: |
medium
|
Applies To: |
all elements
|
Inherited: |
yes
|
Relative Size: |
relative to parent element's font-size
|
Example: |
|
font-style
Value: |
normal, italic, oblique
|
Initial: |
normal
|
Applies To: |
all elements
|
Inherited: |
yes
|
Relative Size: |
N/A
|
Example: |
|
font-weight
Value: |
normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
|
Initial: |
normal
|
Applies To: |
all elements
|
Inherited: |
yes
|
Relative Size: |
N/A
|
Example: |
|
Color and Background Properties
color
Value: |
color name, color code
|
Initial: |
element specific
|
Applies To: |
all elements
|
Inherited: |
yes
|
Relative Size: |
N/A
|
Example: |
|
background
Value: |
background-color, background-image, background-repeat, background-position
|
Initial: |
none
|
Applies To: |
all elements
|
Inherited: |
no
|
Relative Size: |
no
|
Example: |
background: #0000FF url(asset://de05e42d2eb43fe53a542db116da8083) no-repeat right top;
|
background-color
Value: |
color name, color code
|
Initial: |
transparent
|
Applies To: |
all elements
|
Inherited: |
no
|
Relative Size: |
N/A
|
Example: |
background-color: #0000FF;
|
background-image
Value: |
none, url
|
Initial: |
none
|
Applies To: |
all elements
|
Inherited: |
no
|
Relative Size: |
N/A
|
Example: |
background-image: url(asset://de05e42d2eb43fe53a542db116da8083);
|
background-repeat
Value: |
repeat, repeat-x, repeat-y, no-repeat
|
Initial: |
repeat
|
Applies To: |
all elements
|
Inherited: |
no
|
Relative Size: |
N/A
|
Example: |
background-repeat: no-repeat;
|
background-position
Value: |
top, center, bottom, left, center, right
|
Initial: |
top left
|
Applies To: |
block-level and replaced elements
|
Inherited: |
no
|
Relative Size: |
no
|
Example: |
background-position: bottom right;
|
Text Properties
text-align
Value: |
left, right, center
|
Initial: |
element specific
|
Applies To: |
block-level elements
|
Inherited: |
yes
|
Relative Size: |
N/A
|
Example: |
|
text-decoration
Value: |
none, underline, line-through
|
Initial: |
none
|
Applies To: |
all elements
|
Inherited: |
no
|
Relative Size: |
no
|
Example: |
text-decoration: line-through;
|
vertical-align
Value: |
baseline, sub, super
|
Initial: |
baseline
|
Applies To: |
inline elements
|
Inherited: |
no
|
Relative Size: |
no
|
Example: |
|
Box Properties
border-style
Value: |
none, inset, outset
|
Initial: |
none
|
Applies To: |
all elements
|
Inherited: |
no
|
Relative Size: |
N/A
|
Example: |
|
margin
Value: |
length, auto
|
Initial: |
none
|
Applies To: |
all elements
|
Inherited: |
no
|
Relative Size: |
no
|
Example: |
|
margin-top
Value: |
length, auto
|
Initial: |
0
|
Applies To: |
all elements
|
Inherited: |
no
|
Relative Size: |
no
|
Example: |
|
margin-right
Value: |
length, auto
|
Initial: |
0
|
Applies To: |
all elements
|
Inherited: |
no
|
Relative Size: |
no
|
Example: |
|
margin-bottom
Value: |
length, auto
|
Initial: |
0
|
Applies To: |
all elements
|
Inherited: |
no
|
Relative Size: |
no
|
Example: |
|
margin-left
Value: |
length, auto
|
Initial: |
0
|
Applies To: |
all elements
|
Inherited: |
no
|
Relative Size: |
no
|
Example: |
|
padding
Value: |
length
|
Initial: |
0
|
Applies To: |
all elements
|
Inherited: |
no
|
Relative Size: |
no
|
Example: |
|
padding-top
Value: |
length
|
Initial: |
0
|
Applies To: |
all elements
|
Inherited: |
no
|
Relative Size: |
no
|
Example: |
|
padding-right
Value: |
length
|
Initial: |
0
|
Applies To: |
all elements
|
Inherited: |
no
|
Relative Size: |
no
|
Example: |
|
padding-bottom
Value: |
length
|
Initial: |
0
|
Applies To: |
all elements
|
Inherited: |
no
|
Relative Size: |
no
|
Example: |
|
padding-left
Value: |
length
|
Initial: |
0
|
Applies To: |
all elements
|
Inherited: |
no
|
Relative Size: |
no
|
Example: |
|
Classification Properties
list-style-type
Value: |
none, disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha
|
Initial: |
disc
|
Applies To: |
list-item elements
|
Inherited: |
yes
|
Relative Size: |
N/A
|
Example: |
|
list-style-position
Value: |
inside, outside
|
Initial: |
outside
|
Applies To: |
list-item elements
|
Inherited: |
yes
|
Relative Size: |
N/A
|
Example: |
list-style-position: inside;
|