Skip to main content
Version: 8.1

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 in pixels (px) or points (pt). If you enter just a number, Perspective assumes the value is in pixels.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: Transforms all characters to uppercase.
  • Overline: Transforms the first character of each word to uppercase.
  • 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 Size
    New in 8.1.28
    Sets 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