<style>

About The Style Tag

<widget>
  <style>
    text {
      text-color: red;
    }
  </style>
  <text>Hello, World!</text>
</widget>

The <style> element defines default styles for tags.

Inner Text

The inner text in the <style> tag is a simple css syntax, but not exactly the same as css. Properties are not inherited through elements.

The css consists of rules with the selector followed by curly brackets.

selector {
}

Within the curly brackets are declarations. Each declaration is made up of a property and value with a colon between, and a semicolon between each declaration. The final declaration has an optional semicolon at the end.

selector {
  property: value;
  property: value;
}

The valid properties for declarations include all of the attributes for all tags in camelCase or kebab-case excluding class, src and space. The value must be the valid value of the given attribute/property. The value cannot have line breaks (\n) within itself. The value for boolean attributes must be true.

text {
  text-color: red;
  minimumScaleFactor: 50%;
  align-text: center;
}

Supported Selectors

The <style> tag does not support all the selectors that normal css does. These are the selectors that it does support.

*

Selects all elements.

.class

Selects all elements with the given class after the .. Class names must only contain word and hyphen characters.

tag

Selects all elements with the given tag name.

,

Splits selectors to allow multiple selectors to have the exact same declarations.

>

Selects all elements of the direct child of the first parameter and filling the criteria of the second.

More

Selectors can all be combined together. For example, this is a valid selector:

tag.class.class2 > * > .class3, .class4 {

}

The styles are cascading, meaning that the colour for <text> elements will be green in the following example.

text {
  text-color: red;
}
* {
  text-color: green;
}