Supported Styles

In order to customize the style of your user interface, you can use CSS style rules. For example, you can indicate that a DIV should have a red border with single pixel thickness by applying the style border: 1px solid red;. Styles can be applied in numerous ways.

• Styles can be applied by using JavaScript by changing properties on the style dictionary.

  someElement.style.backgroundColor="red";
  

• Styles can be applied using stylesheets. Stylesheets apply rules based on selectors — these are used to control which elements receive which styles. Styles can be imported using various methods (such as webpack), but they can also be added using a STYLE tag.

  When using innerHTML, you can define styles using the STYLE tag:

  <style>
     #button {
         border: 1px solid red;
     }
  </style>
  <div id="button">Hello</div>
  

There are several categories of styles, and each HTML element supports only certain styles. Some styles can be applied to just about every element, while other elements only have limited styling support.

See the available styles for more information on what is supported.

Supported Selectors

XD understands the following CSS selectors:

• id

    #anId {
        /* style */
    }
  

• class

    .aClass {
        /* style */
    }
  

• tag

    div {
        /* style */
    }
  

• asterisk (universal selector)

    * {
        /* style */
    }
  

• Descendant selector

    div > p {
        /* style */
    }
  

• Group of selectors

    .aClass, #anID {
        /* style */
    }
  

• Child selector

    div p {
        /* style */
    }
  

• Sibling selector

    div + p {
        /* style */
    }
  

• Attribute selector

    input[type=text] {
        /* style */
    }
  

• Pseudo classes

    div:hover {
        /* style */
    }
  

Supported Functions

Following CSS functions can be used:

• var()

    :root {
        –main-bg-color: pink;
    }
  
    body {
        background-color: var(–main-bg-color);
    }
  

• calc()

    input {
        padding: 2px;
        display: block;
        width: calc(100% - 1em);
    }
  
    #formbox {
        width: calc(100% / 6);
        border: 1px solid black;
        padding: 4px;
    }