Warning:
This tutorial covers only Mobile Widgets versions.
Tiny Mobile Widgets don't support Style node..

Style Javascript library

This class is used to customize appearance of Prototypes by using CSS.
The following methods enables CSS parsing depending on the type of the data to be parsed.
For more information about CSS file selection and inclusion into VRML scene, see Style node.

int getInt (MFString classes, SFString attribute, int length):
Return an integer matching the given selector. The length parameter is used in case of relative value (depending on screen size).

float getFloat (MFString classes, SFString attribute, int length):
Return a float matching the given selector. The length parameter is used in case of relative value (depending on screen size).

String getString (MFString classes, SFString attribute):
Return a string matching the given selector.

bool getBool (MFString classes, SFString attribute):
Return a bool matching the given selector(classes.attributes).

void getFontStyle (MFString classes, SFNode fontStyle):
Set fontStyle found in the classes selector. The fontStyle node is constructed from the following CSS attributes :

font-family: one of "sherif", "sans", "typewriter", or any available bitmap font (see FontStyle). Default: "typewriter".
font-size: size of the font. System fonts only support 3 sizes (small < 10 < medium < 14 < big). Default: "12".
font-style: one of "bold", "italic", "bolditalic", "plain". Default: "plain".
font-filter: set to "true" to filter text when scaled. Default: "false".
horizontal-align: one of "left", "middle", "right". Default: "left".
vertical-align: one of "top", "middle", "bottom", "baseline". Default: "top".

void getColor (MFString classes, SFString attribute, SFColor field):
Set field to the corresponding color selected by selectors.

void getCoord (MFString classes, SFString attribute, SFVec2f field, int width, int height):
Set field to the corresponding 2D-coordinates selected by the selector. Width and Height parameters are used in case of relative coordinates.
Returns a (0, 0) SFVec2f if the selector is not found in the CSS.

The classes parameter of each method from Style API is the way to select the CSS node to be used.

Warning:
Style node enables to select the CSS file whereas classes parameter enables to select the CSS node into CSS file. As with the Style node, the most right CSS node declared into classes parameter is the most specialized. If informations are not found into it, it will be search into the CSS node declared one step left etc until the default CSS node placed at first position of classes String table.

Into CSS file:

Alert {
  size: 90% 37.5%;
  background-color: white;
  border-width: 2px; // border color will be the color of the Alert-Slider.background-color
  // Icon properties
  image-size: 15% 18%;
  image-position: 0% 8%;
  // Message properties
  text-size: 80% 16;
  text-position: 0% -8%;
  color: black;
  font-filter: true;
  vertical-align: MIDDLE;
  horizontal-align: MIDDLE;
}
Alert-Slider {
  background-color: black;
  margin-bottom: 8.75%;
}
Alert-Slider-title {
  background-color: black;
}

MenuBar {
  size: 100% 8.75%;
  background-color: gray;
  color: orange;
}
MenuBar-label {
  disabled-color: gray;
  color: black;
  margin-left: 4%;
  vertical-align: middle;
  font-style: bold;
  font-size: 14;
  font-filter: true;
}

Slider {
  background-color: white;
  margin-bottom: 8.75%;
}

Slider-title {
  background-color: #414141; # dark-gray
  color: white;
  height: 8.75%;
  margin-left: 4%;
  font-style: bold;
  vertical-align: middle;
  font-filter: true;
}

Into Alert.wrl file (an alert pop up):

PROTO Alert [
...
  field MFString sliderStyle ["Slider" "Alert-Slider"]
  field MFString sliderTitleStyle ["Slider-title" "Alert-Slider-title"]
  field MFString sliderImages ""
  field MFString menubarStyle "Menubar"
  field MFString menubarLabelStyle "Menubar-label"
...
] {
DEF SLIDER Slider {
    titleLabel IS title
    screenSize IS screenSize
    style IS sliderStyle
    titleStyle IS sliderTitleStyle
    images IS sliderImages
    textScale IS textScale
    content [ whatever...]
}
...
  DEF MENUBAR MenuBar {
        rightLabel IS rightLabel
        leftLabel IS leftLabel
        screenSize IS screenSize
        style IS menubarStyle
        labelStyle IS menubarLabelStyle
        images IS menuBarImages
        textScale IS textScale
      }

DEF SCRIPT Script {
...
   field MFString style "Alert"
   field MFString sliderStyle ["Slider" "Alert-Slider"]
   field MFString sliderTitleStyle ["Slider-title" "Alert-Slider-title"]

   function initialize () {
     Style.getColor (style, 'background-color', bgMat.emissiveColor);
     screenSize ();
   }

      function screenSize () {
        var h = screenSize.y;
        var w = screenSize.x;
        var min = w; if (h < w) min = h; // min (h, w)
        Style.getCoord (style, 'size', slider.size, w, h);
        // Create a black border by having a smaller white Rectangle
        // in front of the black Rectangle of the Slider's background
        var width = Style.getFloat (style, 'border-width', w) * 2;
        bgRec.size.x = slider.size.x - width;
        bgRec.size.y = slider.size.y - width;
        // Size and position of the icon and message
        Style.getCoord (style, 'image-position', iconTrs.translation, w, h);
        Style.getCoord (style, 'image-size', iconRec.size, min, min); // keep aspect ratio
        Style.getCoord (style, 'text-position', messageTrs.translation, w, h);
        Style.getCoord (style, 'text-size', messageTicker.size, w, h);
      }
 }
}

Into slider.wrl:

function initialize () {
  light = Style.getBool('Common', 'light');
  if(light == false) light = Style.getBool('Slider', 'light');

  if (light == false) titleBgTex.url[0] = images[0];
  Style.getColor (titleStyle, 'background-color', titleBgMat.emissiveColor);
  // Set content style
  Style.getColor (style, 'background-color', contentBgMat.emissiveColor);
  // Check sliderTrs orientation
  if (Style.getString (style, 'orientation') == 'horizontal') {
    vertical = false;
  }
}