CSS tab

CSS (Cascading Style Sheets) defines styles that apply to HTML elements and customize how they appear in the browser.

Examples

CSS Element

Effect on the corresponding HTML element

body { background-color: lightblue; }

Sets the HTML body background color to lightblue

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

Sets h1 headings to use the color white and centers the text

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

Sets paragraphs to use the verdana font family and a font size of 20px

Advanced example

The following HTML + CSS file modifies the styles of the body, h1, and paragraph elements.

<!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 in the browser:

To achieve this on the HTML Canvas:

Add the following code to the HTML code editor tab:

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

Add the following code to 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 on a dashboard:

PreviousHTML tab NextJavaScript tab

Last updated 28 days ago

Was this helpful?