<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. Unlike normal CSS, style priority is based on order, where lower rules overwrite higher rules. Most properties are not inherited through elements. Since version 6.3.0, the only properties that are inherited are font, lineLimit, minimumScaleFactor, shadowColor, shadowOffset, shadowRadius, textColor, textOpacity, and alignText . Inherited properties have the lowest priority. If an inherited property has an invalid value, it is ignored.

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. If it is invalid, it will be ignored. 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 supports.

*

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 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. For example, this is a valid selector:

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

}