style

Contains a CSS style definition that can be applied to this element's parent field element by application user interfaces. Currently, it is used to style the content of rich text fields (basic fields where mime-type is set to application/xhtml+xml) in Content Studio. It is not used by any other application, and has no effect if specified as the child of any other kind of element.

Syntax

<style>
    text
  </style>

Examples

This example sets different colors for the HTML headings h1 and h2.

<ui:style>
    h1 {color:red;}
    h2 {color:green;}
    </ui:style>

This example sets default fonts and font size for the the whole field, and adds overrides for the HTML headings h1 to h4. Note that body here refers to the HTML body element, not the name of the content item field being styled - it will work on any rich text field.
Note that Content Studio will only actually use fonts that are either available in the operating system or supplied by Java.
```
<ui:style>
    body {
      font-family: "Monaco";
      font-size: 16px;
    }
    h1, h2, h3, h4 {
      font-family: "Georgia", sans-serif;
    }
    </ui:style>
```

This example adds paragraph numbering to p elements.

<ui:style>
    p {
        margin: 0; padding: 0;
        line-height: 1.6;
        max-width: 20cm;
        counter-increment: paragraph 1;
      }
    p+p {
        text-indent: 30px
      }
    p:before{
        float: right;
        margin-right: -2.5em;
        content: "#" counter(paragraph);
        color: #444;
        font-size: 0.8em;
      }
    p+p:before{
        margin-right: 0;
      }
    </ui:style>

This example prepends the text "VIDEO:" before video links and wraps the link in [] parentheses. Related elements are marked up in Content Studio as either img or a elements, so in order to make them easy to target with CSS, they are also assigned class attributes. These class attributes are formed by appending the content type name with escenic- So this example will style related items with the content-type video.
```
<ui:style>
    a.escenic-video:before {
      content: "VIDEO: [";
    }
    a.escenic-video:after {
      content: "]";
    }
    </ui:style>
```