We use cookies to personalize content and to analyze our traffic. Please decide if you are willing to accept cookies from our website.
Add Style to Your UI with CSS | Developer Portal : ThingWorx

Project Concept

This project will introduce using CSS to create a customized, consistent look and feel for your IoT application.

Following the steps in this guide, you will create a custom CSS class definitions and bind these classes to Mashup features.

We will teach you how to present a professional-looking user interface and ensure consistency of style treatments within your application by implementing Cascading Style Sheets (CSS) in Mashups.

Project Info

Type Quickstart
Level Intermediate
Est. Time 30 Minutes
Published October 17, 2018
Author Allen Smith

You'll learn how to

    • Create custom CSS classes using the integrated CSS editor
    • Bind CSS classes to a Mashup and to individual Widgets
    • Use Media queries to dynamically apply styling
Register to Start Project

Things used in this project


This guide requires a connection to the ThingWorx Foundation.

It assumes that you are utilizing the 120-day downloaded trial. Directions for the hosted 30-day instance might be different.

Software components:
Previous knowledge:


  • Step 1: Custom CSS Benefits
  • Step 2: Access Sample Files
  • Step 3: Create CSS Rule Block
  • Step 4: Apply Custom Class to Mashup
  • Step 5: Apply Custom Class to Widget
  • Step 6: Bind Custom Class
  • Step 7: Use Media Queries
  • Step 8: Troubleshooting
  • Step 9: Next Steps