---
title: "Style Reference"
description: "Learn more about the style user interface used in Perspective"
---

# Style Reference

> Learn more about the style user interface used in Perspective

The following tables describe the style user interface for style properties in Perspective. These styles are based on Cascading Style Sheets (CSS), a style sheet language used for describing the presentation of a document or webpage. For an overview on using styles in Perspective, see also [Styles](ignition-modules\perspective\styles\styles.md) and [Style Classes](ignition-modules\perspective\styles\style-classes\style-classes.md).

:::note
Examples on this page are provided for demonstrative purposes. However CSS documentation is easy to obtain on the internet. For more information on the properties listed below, check out [MDN's CSS Reference documentation](https://developer.mozilla.org/docs/Web/CSS/Reference). 
:::

## Text Menu

![](https://www.docs.inductiveautomation.com/assets/images/text-menu-ef008989e60049d187b0c759e42d0fe1.png)

|Property Name|Description|Example|Output|
|:---|:---|:---|:---|
|Font Family|Specifies the font for the component. Examples of a Font Family are Times, Courier, Arial, Monospace, etc.|fontFamily: Monospace| Hello world|
|Size|Specifies the size of the font. All [CSS length units](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units#lengths) are available and can be applied by specifying the unit after the number. If you enter just a number, Perspective assumes the value is in pixels (px).|fontSize: 26px| Hello world|
|Color|Specifies the color of the text. You can set the color with a HEX, RGB, or HSL value. See also [Color Selector Reference](appendix\reference-pages\color-selector-reference\color-selector-reference.mdx).|color: #FF0000| Hello world|
|Weight|Sets how thick or thin characters in the text are displayed.  normal - the default  bold - thick characters lighter - thin characters bolder - thicker characters  100 to 900 - Define a weight outside of those specified above, with 100 being thin and 900 being thick. 400 is the same as normal, 700 is the same as bold. |fontWeight: Bold fontSize: 26px| Hello world|
|Italic|Checkbox to indicate if the font style should be italic. |fontStyle: italic| Hello world|
|Line Height|Specifies the height of a line. Can be specified as one of the following: normal - A normal line height. This is the default  number - A number that will be multiplied with the current font-size to set the line height length - A fixed line height in px, pt, cm, etc. percentage - A line height in percent of the current font size.  100 to 900 - Define a weight outside of those specified above, with 100 being thin and 900 being thick. 400 is the same as normal, 700 is the same as bold.|lineHeight: normal| Hello world|
|Letter Spacing|Increases or decreases the space between characters. The default is 0.|letterSpacing: 12px| Hello world|
|Word Spacing|Increases or decreases the white space between words. The default is normal.|wordSpacing: 24px|  Hello world|

### Alignment 

|Property Name|Description|Example|Output|
|:---|:---|:---|:---|
|Text Align| The horizontal alignment of text in a component. start - Aligns text to the left.end - Aligns text to the right.left - Align text to the left.right - Aligns text to the right.center - Centers the text.justify - Stretches the text so the text has equal width on each side.justify-all - Stretches the text so the text has equal width on each side.|textAlign: right|  Hello world |
|Text Indent|The indentation of the first line in a text-block. The default value is 0.|textIndent: 24px|Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla, mi nec ultrices auctor, metus ante|
|White Space| The horizontal alignment of text in a component. **normal** - Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is the default.**nowrap** - Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a `br` tag is encountered.**pre** - Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the `pre` tag in HTML. **pre-wrap** - Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks.   **pre-line** - Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks.|whiteSpace: pre|Whitespace    is    preserved |

### Text Options

|Property Name|Description|Example|Output|
|:---|:---|:---|:---|
|Transform|Capitalization setting for the text. ![](style-reference-imgs/capitalize-icon.png) Capitalize: Transforms the first character of each word to uppercase.![](style-reference-imgs/uppercase-icon.png) UpperCase: Transforms all characters to uppercase.![](style-reference-imgs/lowercase-icon.png) Lowercase: Transforms the first character of each word to lowercase.|textTransform:capitlizetextTransform:uppercasetextTransform:lower|Hello WorldHELLO WORLDhello world|
|Decoration|Text decoration setting.![](style-reference-imgs/underline-icon.png) Underline: Horizontal line under text.![](style-reference-imgs/strikethru-icon.png) Line-Through: Horizontal line through the middle of the text.![](style-reference-imgs/overline-icon.png) Overline: Horizontal line above the text.|textDecoration:underlinetextDecoration:line-throughtextDecoration:overline|Hello WorldHello WorldHello World|
|Break-word|Allows unbreakable words to be broken.|wordWrap: break-word|The word is: Incomprehensibilities|
|Shadow|Adds shadow to text. Shadow is set in pixels. **Color** - Color for the shadow. You can set the color with a HEX, RGB, or HSL value. See also [Color Selector Reference](appendix\reference-pages\color-selector-reference\color-selector-reference.mdx).**x-offset** - Offset distance on x axis, in pixels**y-offset** - Offset distance on y axis, in pixels**blur-radius** - The blur-radius. The default value is 0. |textShadow: #ff0000 6px 6px 2px|Hello World|
|Overflow wrap|Allows the browser to break a line of text inside a component into multiple lines in an otherwise unbreakable place, thus avoiding a long string of text causing layout problems due to overflow.**normal** - Breaks lines according to normal line breaking rules. Words or unbroken strings will not break, even if they overflow the container. This is the default.**break-word** - Words or strings of characters that are too large to fit inside their component will break in an arbitrary place to force a line break. A hyphen character will not be inserted, even if the hyphen property is used. Unlike word-break, this property will only create a break in cases where a whole word could not be placed without overflowing|overflow wrap: break-word|This example uses normal: IncomprehensibilitiesThis example uses break-word: Incomprehensibilities|
|Text overflow|Specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped or it can display an ellipsis (...). Note that this property doesn't force overflow to occur. You'll typically need to use other properties, such as overflow and white-space. See the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow) for more details. **clip** - The text is clipped and not accessible. This is the default.**ellipsis** - Render an ellipsis ("...") to represent the clipped text.|textOverflow: cliptextOverflow: ellipsis|This example uses clip: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla, mi nec ultrices auctor, metus anteThis example uses ellilpsis: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla, mi nec ultrices auctor, metus ante|

## Background Menu

![](style-reference-imgs/background-menu.png)

|Property Name|Description|Example|
|:---|:---|:---|
|Background Color|Sets the background color of a component. The background of a component is the total size of the component, including padding and border (but not the margin). You can set the color with a HEX, RGB, or HSL value. See also [Color Selector Reference](appendix\reference-pages\color-selector-reference\color-selector-reference.mdx).|backgroundColor: #D5D5D5|
|Background Image|Sets one or more background images for a component. By default, a background-image is placed at the top-left corner of a component, and repeated both vertically and horizontally.This setting also has options for setting a linear or radial gradient as the background image. For more information, see the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image).|backgroundImage: url("http://example/hostedFile.png")|
|Background Position|Sets the starting position of a background image. By default, a background-image is placed at the top-left corner of a component, and repeated both vertically and horizontally.  Values can be provided in explicit sizes, percentages, or keywords (e.g., top, left, etc). For more information, see the [MDN documentation for background-position](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position). |backgroundPosition: 100px 100px|

### Advanced

|Property Name|Description|Example|
|:---|:---|:---|
|Background Clip|Defines how far the background (color or image) should extend within a component. (Be sure to set up the border, padding, background properties, and add some content before configuring the background-clip, otherwise you will not see any changes when you add a value for the backgroundClip. Options are: **border-box** - Default value. The background extends behind the border.**padding-box** - The background extends to the inside edge of the border.**content-box** - The background extends to the edge of the content box. See the [MDN documentation for background-clip](https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip) for more information.|backgroundClip: content-box|
|Background Repeat|Sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally.Options are: **repeat** - The background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default.**repeat x** - The background image is repeated only horizontally.**repeat y** - The background image is repeated only vertically.**no-repeat** - The background-image is not repeated. The image will only be shown once. See the [MDN documentation for background-repeat](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat) to learn more.|backgroundRepeat: repeat|
|Background Attachment|Specifies whether a background image scrolls with the rest of the page, or is fixed.Options are:**scroll** - The background image will scroll with the page. This is the default.**fixed** - The background image will not scroll with the page.**local** - The background image will scroll with the component's contents. See the [MDN documentation for background-attachment](https://developer.mozilla.org/docs/Web/CSS/background-attachment) to learn more.|backgroundAttachment: fixed|
|Background Size| Sets the size of the components background image. [MDN documentation for background-size](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) to learn more.|backgroundClip: content-box|
|Box Shadow|Attaches one or more shadows to a component. No shadow is the default. See the [MDN documentation for box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow).|boxShadow: 5px 10px #D3D3D3|

## Margin and Padding

![](style-reference-imgs/margine-and-padding.jpg)

|Property Name|Description|Example|Output|
|--|--|--|:-------:|
|Padding Top/Left/Bottom/Right|Padding is the space inside of a component, between the border and the content of the component.This property sets the padding for each of the four sides inside of a component.|paddingBottom: 2 paddingLeft: 30paddingRight: 13paddingTop: 13| ![](style-reference-imgs/padding.png)|
|Margin Top/Left/Bottom/Right|Margin is the space outside of a component.This property sets the padding for each of the four sides surrounding a component.|marginBottom:10px marginLeft:10pxmarginRight: 10px marginTop: 10px |![](style-reference-imgs/margin.png)|

## Border 

![](style-reference-imgs/border-menu.png)

|Property Name|Description|Example|Output|
|:---|:---|:---|:---|
|Border Unlink Sides / Link Sides|The first item on the Border menu is the Border Unlink sides ![](style-reference-imgs/unlink-sides-icon.png) icon. When you click this icon, the four border sides of the component are "unlinked," and the Border Styles settings can be applied individually to each side.  When the **Link Sides** ![](style-reference-imgs/link-sides-icon.png) icon is selected, then the Border Styles settings will apply to all four borders equally.| | |
|Border Style|Sets the style for an component's four borders. For an example of each style, see the [Border Style Options Table](#border-style-options) below. |borderStyle: dotted| Hello World|
|Border Width|Sets the width of the border.If the **Unlink sides** ![](style-reference-imgs/unlink-sides-icon.png) icon is selected, you can set separate border widths for the top, left, bottom, and right sides.| borderWidth: 7pxborderStyle: solid|Hello World
|Border Color|Specifies the color of the border. You can set the color with a HEX, RGB, or HSL value. See also [Color Selector Reference](appendix\reference-pages\color-selector-reference\color-selector-reference.mdx). If the Unlink sides ![](style-reference-imgs/unlink-sides-icon.png) icon is selected, you can set separate border colors for the top, left, bottom, and right sides.|borderColor: #AC00ACborderStyle: solid|Hello World|
|Border Radius|Defines the radius of the component's corners allowing rounded borders.|borderRadius: 10pxborderStyle: solid|Hello World|
|Border Radii Top/Left/Bottom/Right|Sets the radius for each of the component's corners: Border top left radius, Border top right radius, Border bottom left radius, Border bottom right radius.|borderTopLeftRadius: 10pxborderBottomRightRadius: 10pxborderStyle: solid|Hello World|
|Outline Style|Specifies the style of an outline. For an example of each style, see the [Border Style Options Table](#outline-style) below. |outlineStyle: dotted| Hello World|

### Border Style Options 
|Style|Description|
|:---|:---|
|none|Specifies no border. This is default.|
|solid|Specifies a solid border.|
|dashed|Specifies a dashed border.|
|dotted|Specifies a dotted border.|
|double|Specifies a double border.|
|groove|Specifies a 3D grooved border. The effect depends on the border-color value.|
|ridge|Specifies a 3D ridged border. The effect depends on the border-color value.|
|inset|Specifies a 3D inset border. The effect depends on the border-color value.|
|outset|Specifies a 3D outset border. The effect depends on the border-color value.|
|hidden|The same as "none", except in border conflict resolution for table elements.|

### Outline Style

| Style  | Description                                                                    |
| ------ | ------------------------------------------------------------------------------ |
| none   | Specifies no outline. This is default.                                         |
| solid  | Specifies a solid outline.                                                     |
| dashed | Specifies a dashed outline.                                                    |
| dotted | Specifies a dotted outline.                                                    |
| double | Specifies a double outliner.                                                   |
| groove | Specifies a 3D grooved outline. The effect depends on the outline-color value. |
| ridge  | Specifies a 3D ridged outline. The effect depends on the outline-color value.  |
| inset  | Specifies a 3D inset outline. The effect depends on the outline-color value.   |
| outset | Specifies a 3D outset outline. The effect depends on the outline-color value.  |
| hidden | Specifies a hidden outline.                                                    |

## Shape Menu

![](style-reference-imgs/shape-menu.png)

|Style|Description|
|:---|:---|
|Fill|Sets a color for the fill of an SVG shape.|
|Stroke|Sets a color for the stroke. The stroke is a border around SVG shapes. Specifies the color of the text. You can set the color with a HEX, RGB, or HSL value. See also [Color Selector Reference](appendix\reference-pages\color-selector-reference\color-selector-reference.mdx).|
|Stroke width|Sets the width of the stroke, in pixels.|

## Misc Menu

![](style-reference-imgs/misc-menu.png)

|Property Name|Description|Example|Output|
|:---|:---|:---|:---|
|Opacity|Describes the transparency level for a component, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent. Opacity applies to text, border, and outline properties.	|opacity: 0.4|Hello World|
|Cursor|Specifies the mouse cursor to be displayed when pointing over a component. For a full list of options, see the [MDN documentation](https://developer.mozilla.org/docs/Web/CSS/cursor). |cursor:pointer |![](style-reference-imgs/point.png)| 
|Overflow|Specifies what should happen if content overflows a component's box: whether to clip content or add scrollbars when a component's content is too big to fit in a specified area. For an description of each value, see the [Overflow Property Table](#overflow-property-table).| overflow:scroll|Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla, mi nec ultrices auctor, metus ante|
|Overflow X|Specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level component, when it overflows at the left and right edges. For an description of each value, see the [Overflow Property Table](#overflow-property-table).| N/A| N/A|
|Overflow Y|Specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level component, when it overflows at the top and bottom edges. For an description of each value, see the [Overflow Property Table](#overflow-property-table).| N/A| N/A|

### Overflow Property Table

Below is an expaination of the various values for overflow properties. Additional details can be found in the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow). 

|Value|Description|Example|
|:---|:---|:---|
|visible|The overflow renders outside the component's box. It is not clipped. This is the default.|Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla, mi nec ultrices auctor, metus ante|
|hidden|The overflow is clipped, and the rest of the content will be invisible.|Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla, mi nec ultrices auctor, metus ante|
|scroll|The overflow is clipped, but a scrollbar is added to see the rest of the content.|Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla, mi nec ultrices auctor, metus ante|
|auto|If overflow is clipped, a scrollbar will be added to see the rest of the content.|Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla, mi nec ultrices auctor, metus ante|