using-css.md

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.

  Tip

  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.

Info

Not every element supports every style — especially interactive elements.

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 */
  }

Info

Only hover, focus, and lang pseudo-classes are supported.

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;
  }