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:

CSS Element Effect on the corresponding HTML element

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

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:

PreviousHTML Tab NextJavaScript Tab

Last updated 1 year ago