# 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 |
| ---------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
|
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.
```html
This is a h1 header
This is a paragraph
```
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:
```html
This is a h1 header
This is a paragraph
```
* Place the following code on the CSS tab:
```css
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:
