Skip to main content
Version: 8.3

Style Reference

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 and Style Classes.

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.

Text Menu​

Property NameDescriptionExampleOutput
Font FamilySpecifies the font for the component. Examples of a Font Family are Times, Courier, Arial, Monospace, etc.fontFamily: Monospace Hello world
SizeSpecifies the size of the font. All CSS length units 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
ColorSpecifies the color of the text. You can set the color with a HEX, RGB, or HSL value. See also Color Selector Reference.color: #FF0000 Hello world
WeightSets 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
ItalicCheckbox to indicate if the font style should be italic.fontStyle: italic Hello world
Line HeightSpecifies 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 SpacingIncreases or decreases the space between characters. The default is 0.letterSpacing: 12px Hello world
Word SpacingIncreases or decreases the white space between words. The default is normal.wordSpacing: 24px Hello world

Alignment​

Property NameDescriptionExampleOutput
Text AlignThe 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 IndentThe indentation of the first line in a text-block. The default value is 0.textIndent: 24pxLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla, mi nec ultrices auctor, metus ante
White SpaceThe 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: preWhitespace is preserved

Text Options​

Property NameDescriptionExampleOutput
TransformCapitalization setting for the text.
  • Capitalize: Transforms the first character of each word to uppercase.
  • UpperCase: Transforms all characters to uppercase.
  • Lowercase: Transforms the first character of each word to lowercase.
textTransform:capitlize

textTransform:uppercase

textTransform:lower
Hello World

HELLO WORLD

hello world
DecorationText decoration setting.
  • Underline: Horizontal line under text.
  • Line-Through: Horizontal line through the middle of the text.
  • Overline: Horizontal line above the text.
textDecoration:underline

textDecoration:line-through

textDecoration:overline
Hello World

Hello World

Hello World
Break-wordAllows unbreakable words to be broken.wordWrap: break-wordThe word is: Incomprehensibilities
ShadowAdds 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.
  • 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 2pxHello World
Overflow wrapAllows 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: Incomprehensibilities

This example uses break-word: Incomprehensibilities
Text overflowSpecifies 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 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: clip

textOverflow: ellipsis
This example uses clip: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla, mi nec ultrices auctor, metus ante

This example uses ellilpsis: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla, mi nec ultrices auctor, metus ante

Background Menu​

Property NameDescriptionExample
Background ColorSets 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.backgroundColor: #D5D5D5
Background ImageSets 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.
backgroundImage: url("http://example/hostedFile.png")
Background PositionSets 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.backgroundPosition: 100px 100px

Advanced​

Property NameDescriptionExample
Background ClipDefines 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 for more information.
backgroundClip: content-box
Background RepeatSets 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 to learn more.
backgroundRepeat: repeat
Background AttachmentSpecifies 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 to learn more.
backgroundAttachment: fixed
Background SizeSets the size of the components background image. MDN documentation for background-size to learn more.backgroundClip: content-box
Box ShadowAttaches one or more shadows to a component. No shadow is the default. See the MDN documentation for box-shadow.boxShadow: 5px 10px #D3D3D3

Margin and Padding​

Property NameDescriptionExampleOutput
Padding Top/Left/Bottom/RightPadding 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: 30
paddingRight: 13
paddingTop: 13
Margin Top/Left/Bottom/RightMargin is the space outside of a component.
This property sets the padding for each of the four sides surrounding a component.
marginBottom:10px
marginLeft:10px
marginRight: 10px
marginTop: 10px

Border​

Property NameDescriptionExampleOutput
Border Unlink Sides / Link SidesThe first item on the Border menu is the Border Unlink sides 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 icon is selected, then the Border Styles settings will apply to all four borders equally.
Border StyleSets the style for an component's four borders. For an example of each style, see the Border Style Options Table below.borderStyle: dottedHello World
Border WidthSets the width of the border.
If the Unlink sides icon is selected, you can set separate border widths for the top, left, bottom, and right sides.
borderWidth: 7px
borderStyle: solid
Hello World
Border ColorSpecifies the color of the border. You can set the color with a HEX, RGB, or HSL value. See also Color Selector Reference.
If the Unlink sides icon is selected, you can set separate border colors for the top, left, bottom, and right sides.
borderColor: #AC00AC
borderStyle: solid
Hello World
Border RadiusDefines the radius of the component's corners allowing rounded borders.borderRadius: 10px
borderStyle: solid
Hello World
Border Radii Top/Left/Bottom/RightSets 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: 10px
borderBottomRightRadius: 10px
borderStyle: solid
Hello World
Outline StyleSpecifies the style of an outline. For an example of each style, see the Border Style Options Table below.outlineStyle: dottedHello World

Border Style Options​

StyleDescription
noneSpecifies no border. This is default.
solidSpecifies a solid border.
dashedSpecifies a dashed border.
dottedSpecifies a dotted border.
doubleSpecifies a double border.
grooveSpecifies a 3D grooved border. The effect depends on the border-color value.
ridgeSpecifies a 3D ridged border. The effect depends on the border-color value.
insetSpecifies a 3D inset border. The effect depends on the border-color value.
outsetSpecifies a 3D outset border. The effect depends on the border-color value.
hiddenThe same as "none", except in border conflict resolution for table elements.

Outline Style​

StyleDescription
noneSpecifies no outline. This is default.
solidSpecifies a solid outline.
dashedSpecifies a dashed outline.
dottedSpecifies a dotted outline.
doubleSpecifies a double outliner.
grooveSpecifies a 3D grooved outline. The effect depends on the outline-color value.
ridgeSpecifies a 3D ridged outline. The effect depends on the outline-color value.
insetSpecifies a 3D inset outline. The effect depends on the outline-color value.
outsetSpecifies a 3D outset outline. The effect depends on the outline-color value.
hiddenSpecifies a hidden outline.

Shape Menu​

StyleDescription
FillSets a color for the fill of an SVG shape.
StrokeSets 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.
Stroke widthSets the width of the stroke, in pixels.

Misc Menu​

Property NameDescriptionExampleOutput
OpacityDescribes 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.4Hello World
CursorSpecifies the mouse cursor to be displayed when pointing over a component. For a full list of options, see the MDN documentation.cursor:pointer
OverflowSpecifies 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:scroll
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla, mi nec ultrices auctor, metus ante
Overflow XSpecifies 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.N/AN/A
Overflow YSpecifies 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.N/AN/A

Overflow Property Table​

Below is an expaination of the various values for overflow properties. Additional details can be found in the MDN documentation.

ValueDescriptionExample
visibleThe 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
hiddenThe 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
scrollThe 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
autoIf 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