--- schema_version: "1" id: 3769b3cde66bfb5b5bbb80491e8750c71b4ef63584edeacf6e25e364720725a1 title: Style Pane Properties collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/siteforce_style_tab_properties.md canonical_url: https://help.salesforce.com/s/articleView?id=platform.siteforce_style_tab_properties.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: 9f7a9ba5539152fa4d96a5ca5b537b0a2e5c82b8e7e18edd4e46ed89b60e8e89 description: The Style pane is a visual CSS editor that lets you modify style properties, such as the background color, font size, and border style, as you work with pages and page elements. products: - Salesforce Platform - Security release: "264" --- # Style Pane Properties The Style pane is a visual CSS editor that lets you modify style properties, such as the background color, font size, and border style, as you work with pages and page elements. ### Required Editions
Available in: Salesforce Classic

Available for purchase in: Enterprise, Performance, and Unlimited Editions

Available (with limitations) in: Developer Edition

## The Background Section
Property Description
Background Color Sets the element's background color. Click the color box and use the color picker to select a color, or enter a specific hexadecimal code in the text box. You can also choose from a list of colors in the Background Color dropdown list.
Background Image Adds a background image to the element. Click URL and enter the image URL, or click Add to select an imported image.
Background Repeat

Tiles the element's background image.

  • No repeat ensures that only one copy of the image appears.
  • Repeat X repeats the image horizontally.
  • Repeat Y repeats the image vertically.
  • Repeat tiles the image both horizontally and vertically.
Position

Specifies the position of the element's background image.

  • To set the horizontal position of the background image, enter a value in the X text box and select a unit of measurement. Alternatively, select Left or Right in the dropdown list.
  • To set the vertical position of the background image, enter a value in the Y text box and select a unit of measurement. Alternatively, select Top or Bottom in the dropdown list.
Cursor Sets the cursor type, such as crosshair or pointer.
## The Font & Color Section
Property Description
Font Sets the font family of the selected element.
Color Sets the font color. Click the color box and use the color picker to select a color, or enter a specific hexadecimal code in the text box. You can also choose from a list of colors in the Color dropdown list.
Size

Sets the font size. Enter a value in the Size text box and select a unit of measurement such as em, point, or %. Alternatively, select a predefined value such as XX-Small. Select Inherit to use the same font size as the parent element (for example, the page or panel).

Use relative sizes such as em or a percentage to enable your end users to resize the font size in their Web browsers.
Style

Formats the element's font style.

  • Bold makes the font bold.
  • Bold and italic makes the font bold and italic.
  • Italic makes the font italic.
  • None removes existing styles.
Font Variant Specifies whether to render the font as small capitals.
Line Height Modifies the amount of space between lines of text. Enter a value in the text box and select a unit of measurement such as pixels, percentage, or em. Select Inherit to use the same line height as the parent page element.
Text Decoration

Applies decorative effects to the element's text. For example, you could remove the underline that usually appears under hyperlinks, which is a standard CSS rule that's built in to most Web browsers.

  • Underline underlines the text.
  • Strikethrough applies strikethrough formatting.
  • Overline displays a line over the text.
  • None removes existing text decoration.
Align

Aligns the text of the selected element.

  • Align left aligns the text to the left.
  • Align right aligns the text to the right.
  • Center centers the text.
  • Justify aligns the text with both the left and right margins.
Case

Changes the capitalization of the element's text.

  • Initial caps capitalizes the first character of each word.
  • Uppercase capitalizes all characters.
  • Lowercase lowercases all characters.
  • None removes existing capitalization formatting.
Text Indent Indents the first line of text of the selected page element. Enter a value in the text box and select a unit of measurement. Select Inherit to use the same indentation as the parent page element.
White Space Controls how white spaces such as spaces, tabs, and hard returns are handled inside an element.
## The Layout Section
Property Description
Positioning

Positions page elements outside the normal flow of the document. Usually, elements on a page are rendered in Web browsers in the order they appear in the document. Block elements such as p tags and div tags appear one beneath the other, whereas inline elements such as em, strong, and span tags are rendered next to text or each other.

  • Absolute positions the content using the settings in the Top, Bottom, Left, and Right text boxes.
  • Relative renders the page element in the normal layout flow, but moves the element relative to its normal position depending on the values in the Top, Bottom, Left, and Right text boxes. For example, if you set an element's left position to 20 pixels, the page element is positioned 20 pixels further to the left.
Display

Overrides a page element's default layout behavior. For example, you can hide page elements, make block elements render inline, or make inline elements render as blocks.

  • None hides the page element.
  • Block displays the page element as a block-level page element, with a line break before and after the element.
  • Inline, which is the default setting, displays the page element as an inline page element without a line break before or after the element.
  • Inline-block renders the page element as an inline rectangle, but with content that behaves as if it's inside a block element.
Position

When used in conjunction with the Absolute or Relative positioning options, these four properties place page elements outside the normal flow of the document. Enter a value in the text boxes as appropriate and select a unit of measurement in the respective dropdown lists.

  • Top sets how far the top edge of an element is above or below the top edge of the parent element.
  • Bottom determines how far the bottom edge of an element is above or below the bottom edge of the parent element.
  • Right sets how far the top edge of an element is to the right or left of the right edge of the parent element.
  • Left defines how far the left edge of an element is to the right or left of the left edge of the parent element.
Z-index

Specifies the order in which elements overlap each other when they must be rendered in the same space. An element with a greater z-index value covers an element with a lower value. The default value is 0.

Click Increase and Decrease to increase and decrease the z-index, or enter a value in the text box.
Float

Floats a page element to the left or right so that subsequent elements—text for example—wrap around the floating page element.

  • Float left floats the page element to the left.
  • Float right floats the page element to the right.
  • None removes an existing float setting.
Clear

Specifies whether the selected page element allows floating page elements beside it.

  • Clear left moves the page element below any floating page element on its left.
  • Clear right moves the page element below any floating page element on its right.
  • Clear both moves the page element below floating page elements on either side.
  • None removes existing float settings.
Visibility

Specifies whether the selected page element is visible.

  • Visible is the default value.
  • Hidden hides the page element and renders an invisible rectangle in its place.
  • Collapse is used to hide table elements. (For other page elements, it has the same result as hidden.)

    Invisible page elements still occupy the same space in the page's layout.
Overflow

Specifies whether the content of a page element is clipped when it overflows its area.

  • Visible doesn’t clip the content.
  • Hidden clips the content.
  • Scroll clips the content, but provides scroll bars so that users can view the remaining content.
  • Auto is dependent on the browser, but displays a scroll bar to view the rest of the content.
## The Dimensions Section | Property | Description | | --- | --- | | Width | Sets the width of the selected page element. Enter a value in the Width text box and select a unit of measurement. Select Inherit to use the width of the parent page element. | | Height | Sets the height of the selected page element. Enter a value in the Height text box and select a unit of measurement. Select Inherit to use the height of the parent page element. | | Margins | Sets the width of the page element's margin, which is the space between its border and outer edge. Set the margins for all four sides by entering a value in the All text box, or add margins to the top, right, bottom, or left sides as required. | | Padding | Sets the width of the page element's padding, which is the space between its content and border. Set the padding for all four sides by entering a value in the All text box, or add padding to the top, right, bottom, or left sides as required. | ## The Borders Section | Property | Description | | --- | --- | | Type | Specifies whether to set border properties for each side separately or for all four sides. | | Style | Sets the border's style such as dashed, dotted, or double. | | Color | Sets the border's color. Click the color box and use the color picker to select a color, or enter a specific hexadecimal code in the text box. You can also choose from a list of colors in the Color dropdown list. | | Thickness | Specifies the border's thickness. Enter a value in the Thickness text box and select a unit of measurement. Alternatively, select Thin, Medium, or Thick. | ## The Tables Section
Property Description
Border Collapse

When designing tables:

  • Collapse uses a common border between cells
  • Separate gives each cell its own border
Horizontal Spacing Sets the horizontal distance that separates cell borders. Enter a value in the text box and select a unit of measurement. This value is used only if Border Collapse is set to Separate.
Vertical Spacing Sets the vertical spacing that separates cell borders. Enter a value in the text box and select a unit of measurement. This value is only used if Border Collapse is set to Separate.
#### See Also - [Use the Style Pane](https://help.salesforce.com/s/articleView?id=platform.siteforce_style_tab_using.htm&release=264.0.0&type=5 "The Style pane is a visual CSS editor that lets you modify style properties, such as the background color, font size, and border style, as you work with pages and page elements. If you're using CSS classes or IDs to style your pages, you can modify or create style items directly from the Style pane, rather than opening the style sheet.")