CSS Tab

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:

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:

PreviousHTML Tab NextJavaScript Tab

Last updated 1 year ago