<stylesheet>

The <stylesheet> tag can be used within a <static> element to specify CSS to apply when the QuickApp is rendered to a static HTML target.

Description

The <stylesheet> element can either take a url_ attribute that specifies a link to an external CSS stylesheet or can include a <code language_="css"> tag that explicitly specifies CSS styles. For more information, see <code>.

Syntax

<dynamic>
  <render>
    <static>
      <stylesheet url_="[EXTERNAL_CSS_STYLESHEET]"/>
    </static>
  </render>
</dynamic>

Alternate syntax

<dynamic>
  <render>
    <static>
      <stylesheet>
        <code language_="css">
          [CSS_CODE]
        </code>
      </stylesheet>
    </static>
  </render>
</dynamic>

Attributes

url_
Specifies the URL to an external CSS stylesheet to apply when the QuickApp is rendered to a static HTML target.

Example

The following example demonstrates how a <code> block form can be included within a <stylesheet> element to specify CSS to style the QuickApp when it is rendered to a static HTML target. In this example, a text widget is used to display HTML text using the <html> block form. That HTML text will be styled based on the CSS specified in the <stylesheet> element.

<dynamic>
  <render>
    <static>
      <stylesheet>
        <code language_="css"><![CDATA[ 
            h3 {
                font-size:24px;
                color:#F26F21;
            }

            p {
                font-family: verdana;
                font-size: 20px;
            }

            a {
                color:#C8102E;
            }
        ]]>
        </code>
      </stylesheet>
    </static>
  </render>
  <layout arrange_="v">
    <widget class_="text">
      <html>
        <div>
          <h3>1010data
          </h3>
          <br/>
          <p>
            1010data offers the only fully-scalable, self-services 
            insights platform for data management, analysis and 
            application building.
          </p>
          <br/>
          <a target="_blank" href="https://www.1010data.com">
            Click here to learn more
          </a>
        </div>
      </html>
    </widget>
  </layout>
</dynamic>