Ubidots Developer Guides
Help CenterAPI ReferenceData APICommunity
  • Welcome to our Dev Guides
  • ⚡️ Getting Started
    • What is Ubidots?
    • Devices, Variables, and Dots
    • Technical FAQs
    • Business FAQs
  • 🧩Integration Guides
    • Industrial IoT
      • Advantech
      • Amplified Engineering
      • AWS
      • Azimut
      • Balena
      • Bivocom
      • CESVA
      • Controllino
      • Digital Communications Technologies (DCT)
      • Everactive
      • Golioth
      • Kepware
      • Kunbus
      • Monnit
      • MultiTech
      • NCD.io
      • Node-RED
      • Omicron IoT
      • Red Lion
      • Robustel
      • Senquip
      • Sielco
      • Siemens
      • Strega
      • vNode
      • WAGO
      • Weintek
      • YuDash
    • Cellular
      • Blues Wireless
      • Digi International
      • Hologram
      • Monogoto
      • Particle
      • Quectel
      • Soracom
    • LoRaWAN
      • AonChip
      • Chirpstack
      • Decentlab
      • Helium
      • ioThings
      • LORIOT
      • Milesight
      • MOKOSmart
      • RAKwireless
      • Sagemcom
      • Seeed Studio
      • Senet
      • The Things Industries
        • The Things Stack
        • The Things Network
    • Sigfox
      • Digital Matter
      • McThings
      • Sigfox
      • Suntech
      • Thinxtra
      • UnaBiz
    • Satellite
      • Swarm
    • Dev Kits
      • Adafruit
      • Advantech
      • AloriumTech
      • Arduino
      • Blues Wireless
      • DFRobot
      • Dragino
      • Electric Imp
      • Espressif Systems
      • McThings
      • Microchip Technology
      • Onion
      • Particle
      • Pycom
      • RAKwireless
      • Raspberry Pi
      • Seeed Studio
      • Sodaq
      • STMicroelectronics
      • Texas Instruments
      • Thinxtra
      • Verse Technology
    • Weather
      • Weather Plugins
      • Ambient Weather
    • Tools
      • Gambit Communications
      • PubNub
  • 📊Dashboards & Widgets
    • HTML Canvas
      • 3rd party packages
      • Preload Dashboard data
      • Built-in library
        • Properties
        • Methods
        • Listening events
        • API
      • Examples
        • Basics
        • Create an LCD screen with the HTML Canvas
        • Interacting with dashboard data
        • Change header's custom style
        • Adding real time using Socket.IO
        • Delete Variable data from a Device
        • Delete Variable data from Groups or Types of Devices
        • Navigation through Dashboard
        • Using a React library
      • Code editor
        • HTML Tab
        • CSS Tab
        • JavaScript Tab
    • Custom UI
      • Paragraph
      • Input combo
        • Text
        • Numeric
        • Numeric with buttons
        • Date
        • Time
        • Toggle
        • Dropdown
        • Multiple selection dropdown
      • Button
    • Custom Style
      • Dashboards
      • Widgets
    • Line chart
    • Pages
      • Getting started
      • Development
      • API
        • Page creation
        • Publish
  • 🤖UbiFunctions
    • Getting Started
      • Creating an UbiFunction
      • Coding an UbiFunction
      • Testing an UbiFunction
      • Authentication
      • Execution Time
      • Logs
    • Runtimes
      • Python
      • NodeJS
      • Custom Runtimes
    • Invocation
      • Time-based Trigger
      • HTTPS
      • MQTT Publish
      • Ubidots Event
    • Advanced
      • Account Token
      • Execution time
      • Raw Functions
      • CORS Policy
      • Async Execution
      • DaaS (Decoder as a Service)
      • Developing and Managing UbiFunctions with Ubidots CLI
    • Examples
    • Specs and Limits
    • Storage
      • File Storage API
      • Mutiple files
  • 🧩Plugins
    • What is a plugin?
    • Public vs. Private
    • Public plugins
      • Cron
      • Webhook
    • Private Plugins
      • Cron
      • Webhook
      • Widget
      • Device
    • Plugins development
      • Getting started
      • Cron
      • Webhook
      • Widget
      • Device
      • view.xml
      • view_widget.xml
    • Plugins deployment
      • Cron and Webhook
      • Widget
      • Device
    • Using the plugins
      • Cron and Webhook
      • Widget
      • Device
  • 📈SYNTHETIC VARIABLES
    • Getting started
      • Creating synthetic variables
      • Synthetic Variables' editor
    • Expressions
      • Mathematical
      • Date range
      • Rolling
      • Special functions
    • Specs and limits
    • Examples
      • Mathematical
      • Date range
      • Rolling
      • Special functions
  • ⌨️Developer tools
    • Javascript SDK
      • Overview
      • Getting started
      • Ubidots class
        • Get methods
        • Filter methods
        • Ubidots objects
          • Entity object
          • Paginator
      • Examples
    • CLI
      • Overview
      • Installing
      • Usage
      • SDK for UbiFunctions
  • 🏗️Apps
    • App builder
      • Custom sidebar
Powered by GitBook
On this page
  • Examples:
  • Advanced example:

Was this helpful?

Export as PDF
  1. Dashboards & Widgets
  2. HTML Canvas
  3. Code editor

CSS Tab

PreviousHTML TabNextJavaScript Tab

Last updated 2 years ago

Was this helpful?

CSS (Cascading Style Sheets) is used to define styles that can be applied to HTML elements in order to customize the way in which they are displayed in the web browser.

Examples:

CSS Element
Effect on the corresponding HTML element

body { background-color: lightblue; }

Sets the style for the HTML body to have a lightblue background color

h1 { color: white; text-align: center; }

Sets the style for the h1 headers to have their color white as well as to center the text

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

Set the style for the paragraphs to have their font family set to verdana and the font-size as 20px

Advanced example:

The following HTML + CSS file modifies the body, H1 header, and paragraph elements' style.

<!DOCTYPE html>
<html>
<head>
<style>
body {
   background-color: lightblue;
}
h1 {
   color: white;
   text-align: center;
}
p {
   font-family: verdana;
   font-size: 20px;
}
</style>
</head>
<body>
<h1> This is a h1 header </h1>
<p> This is a paragraph </p>
</body>
</html>

It Results in the following content being displayed in the browser:

To achieve this on the HTML Canvas, the following can be done:

  • Place the following code on the HTML code editor tab:

    <h1>This is a h1 header</h1>
    <p> This is a paragraph </p>

  • Place the following code on the CSS tab:

    body {
      background-color: lightblue;
    }
    
    h1 {
      color: white;
      text-align: center;
    }
    
    p {
      font-family: verdana;
      font-size: 20px;
    }

This is the resulting HTML Canvas Widget shown on a Dashboard:

📊