On this page

Background

The shorthand property for the background property is 'background', which is used for setting an individual background style. Such attribute can be used in RTF, ODT, and DOCX report templates.

Color Specification

Color attributes such as background-color, can be specified by either a keyword or a numerical RGB specification (hexadecimal, integer, and percentage value). The list of Color Keywords and Corresponding RGB Specification is displayed in the table below.

Color 

RGB
Specification
Hexadecimal
Code 

RGB
Specification
Integer 
RGB
Specification
Percentage 
Maroon #800000RGB(128,0,0) RGB(50%,0%,0%) 
Red #FF0000RGB(255,0,0)RGB(100%,0%,0%) 
Orange#FFA500RGB(255,165,0) RGB(100%,65%,0%)
Yellow#FFFF00RGB(255,255,0)RGB(100%,100%,0%)
Olive#808000RGB(128,128,0)RGB(50%,50%,0%)
Purple#800080RGB(128,0,128)RGB(50%,0%,50%)
Fuchsia#FF00FFRGB(255,0,255)RGB(100%,0%,100%)
White#FFFFFFRGB(255,255,255)RGB(100%,100%,100%)
Lime#00FF00RGB(0,255,0)RGB(0%,100%,0%)
Green#008000RGB(0,128,0)RGB(0%,50%,0%)
Navy#000080RGB(0,0,128) RGB(0%,0%,50%)
Blue#0000FFRGB(0,0,255)RGB(0%,0%,100%)
Aqua#00FFFFRGB(0,255,255)RGB(0%,100%,100%)
Teal#008080RGB(0,128,128)RGB(0%,50%,50%)
Black #000000 RGB(0,0,0) RGB(0%,0%,0%)
Silver#C0C0C0RGB(192,192,192)RGB(75%,75%,75%)
Gray#808080RGB(128,128,128)RGB(50%,50%,50%)

The format of an RGB specification value in form of the hexadecimal notation is a '#' immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted to the six-digit form (#rrggbb) by replicating digits. For example, #FB0 is converted to #FFBB00.

For example:

<p style = “background-color:#FB0”>
<p style = “background-color:#FFBB00”>

The RGB specification Integer and Percentage form is "rgb" followed by RGB values in the same format in brackets. You cannot use both integer and percentage at the same time. In the case that an RGB value is more than a maximum value (255 or 100%) or less than a minimum (0 or 0%), the value will be set to the maximum or minimum value instead, for example:

<p style = "background-color:rgb(-100,500,0)">

<p style = "background-color:rgb(0,255,0)">

<p style = "background-colr:rgb(-100%,200%,0%)">

<p style = "background-colr:rgb(0%,100%,0%)">

The color used in all of the above examples is lime.

Supported Tags

The ‘background-color’ property can be used in the following tags:

b, i, u, h1, h2, h3, h4, h5, h6, tt, code, samp, kbd, pre, big, small, strike, s, em, cite, dfn, var, strong, font, a, dl, dt, dd, ul, ol, li, table, tr, td, th, p, div, span, sup, and sub. 

For example:

Sample of Background Style

Border

The shorthand property for the border property is 'border', which is used for setting the same width, color, and style of all four borders on four sides of a box. Border can be used in RTF, ODT, and DOCX report templates.

Border Width

Border width properties specify the width of border areas. The value of the border property is length. The border width properties that can be used with a longhand property are as follows:

  • 'border-top-width'
  • 'border-right-width'
  • 'border-bottom-width'
  • 'border-left-width'

Length Specification

The format of a length value is a real number immediately followed by a unit identifier. There are two types of length units: relative and absolute. Relative length units specify a length relative to another length property of the displaying device.

Relative units are:

    • px 
      pixels, relative to the displaying device.

Absolute units are:

    • in 
      inches, 1 inch is equal to 2.54 centimeters.
    • cm
      centimeters.
    • mm
      millimeters.
    • pt
      points - the points used by CSS 2.1 are equal to 1/72nd of an inch.
    • pc
      picas - 1 pica is equal to 12 points.

Border Color

Border color properties specify the border colors of a box. The value of the border color has two meanings:

  • Color
    Specifies a border color. See Color Specification for more details on color.
  • Transparent
    Referred to as a transparent border.

The border color properties that can be used with a longhand property are as follows:

  • 'border-top-color'
  • 'border-right-color'
  • 'border-bottom-color'
  • 'border-left-color'

Border Style

The Border style properties specify the style of a box's border lines. The border style may take one of the following 10 values:

  1. none
    This value will create no border because the computed border width is zero.
  2. hidden
    The same as 'none'.
  3. dotted
    This value will create a dotted border.
  4. dashed
    This value will create a dashed border.
  5. solid
    This value will create a single line segment border.
  6. double
    This value will create a two solid line border.
  7. groove
    This value will create a border that looks as though it were carved into the rendering surface.
  8. ridge
    The opposite of 'groove'. This value will create a border that looks as though it were coming out of the rendering surface.
  9. inset
    This value will create a border that looks as though it were embedded in the rendering surface.
  10. outset
    The opposite of 'inset'. This value will create a border that looks as though it were coming out of the rendering surface.
     
  • The supported border values for ODF documents are none, hidden, solid, and double.
  • The supported border values for RTF documents are none, hidden,dotted, dashed, solid, and double.
  • The supported border values for DOCX documents are none, hidden,dotted, dashed, solid, double, outset, and inset (groove and ridge will be rendered as solid).

The border style properties that can be used with a longhand property are as follows:

  • 'border-top-style'
  • 'border-right-style'
  • 'border-bottom-style'
  • 'border-left-style'

Supported Tags

Border properties can be used in the following tags:

h1, h2, h3, h4, h5, h6, td, th, p, and div.

For example, if you want to have a red border, type the following line of code, see the figure below.

Border Style Example

The result of using the above example will be as shown in the figure below.

Red Border Output

Margin

Margin properties specify the width of margin area within a box. The 'margin' property is a shorthand property for setting the margin of all four sides while the other margin properties only set their respective side. The value of the margin property is length (See Length Specification for more details). Margin can be used in RTF, ODT, ODP, DOCX and PPTX report templates.

The margin properties that can be used with a longhand property are as follows:

  • 'margin-top'
  • 'margin-right'
  • 'margin-bottom'
  • 'margin-left'

Supported Tags

The supported tags for margins are as follows:

h1, h2, h3, h4, h5, h6, table (supported only in RTF, ODT, and DOCX), p, and div.

For example, if you want to set a specific margin width for your cells, type the lines of code as shown in the figure below.

Margin Style Example

The result of using the above example will be as indicated in the figure below.

Margin Style Outputs

Padding

Padding properties specify the width of padding area within a box. The 'padding' property is a shorthand property for setting the padding for all four sides while the other padding properties only set their respective side. The value of the padding property is length (See Length Specification for more details) adding can be used in RTF, ODT and DOCX report templates.

The padding properties that can be used with a longhand property are as follows:

  • 'padding-top'
  • 'padding-right'
  • 'padding-bottom'
  • 'padding-left'

Supported Tags

The supported tags for padding are as follows:

h1, h2, h3, h4, h5, h6, td, th, p, and div.
  • The supported border values of table tags for RTF documents are margin-left and margin-right.for more details.
  • The supported border values of table tags for DOCX documents are margin-left and margin-right.
  • The supported border values of all tags for PPTX documents are margin-left, margin-top and margin-bottom.

For example, if you want to create specific padding styles for your cells, type the lines of code shown in the figure below.

Padding Style Example

The result of using the above example will be as shown in the figure below.

The Padding Style Outputs

Color

The 'color' property specifies the foreground color of an element's text contents. Only color values are allowed in this property (See Color Specification for more details on color).

Supported Tags

The supported tags for colors are as follows:

b, i, u, h1, h2, h3, h4, h5, h6, tt, code, samp, kbd, pre, big, small, strike, s, em, cite, dfn, var, strong, font, a, dl, dt, dd, ul, ol, li, table, tr, td, th, p, div, span, sup, and sub.

For example, if you want to have a green text color, type the lines of code indicated in figure.

Color Style Example

The result of using the above example will be as shown in the figure below.

Color Style Outputs

Display

The 'display' property specifies how text will be displayed. The possible display values are:

  • block: This value will make an element appear in the output report.
  • none: This value will make an element disappear from the output report.

Supported Tags

The supported tags for the display property are:

br, b, i, u, h1, h2, h3, h4, h5, h6, tt, code, samp, kbd, pre, big, small, strike, s, em, cite, dfn, var, strong, font, a, dl, dt, dd, ul, ol, li (supported only in RTF, DOCX, and PPTX), table, tr, p, div, span, sup, and sub.

For example, if you want to display an element but do not want to display the other(s), type the lines of code as shown in the figure below.

Display Style Example

The result of using the above example will be as indicated below.

Display Style Output

Font

The 'font' property is a shorthand property for setting, except the following:

  • 'font family'
  • 'font-style'
  • 'font-variant'
  • 'font-weight'
  • 'font-size'

Font Family

Specify a prioritized list of font family names and/or generic family names.

Font Style

Specify either normal or italic face (within the specified font family).

Font Variant

Specify either normal or small-caps of variant (within the specified font family). Font variant is not supported in XLSX report templates.

Font Weight

Specifies the weight of the font. The following values are defined:

  • normal, lighter, 100, 200, 300, and 400 will be rendered as ‘normal’.
  • bold, bolder, 500, 600, 700, 800, and 900 will be rendered as ‘bold’.

Font size

Specify the font size. Possible values include xx-small, x-small, small, medium, large, xx-large, and the integer number from 1 to 7.

Supported Tags

The supported tags for the font property are as follows:

b, i, u, h1, h2, h3, h4, h5, h6, tt, code, samp, kbd, pre, big, small, strike, s, em, cite, dfn, var, strong, font, a, dl, dt, dd, ul, ol, li, table, tr, td, th, p, div, span, sup, and sub.

For example, if you want to have bold fonts in small caps, type the lines of code as displayed in the figure below.

Font Style Example

The result of using the above example will be as indicated in the figure below.

Font Style Output

Text Align

The 'text align' property describes how inline content of a block is aligned. Possible values of the text align property include: left, right, center and justify. The ‘text align’ property can be used in RTF, ODT, ODP, DOCX, and PPTX report templates.

Supported Tags

The supported tags for the text align property are as follows:

table, tr, td, th, p, and div.

For example, if you want to align your paragraph to the left, center, and right, type the lines of code as shown in the Figure below.

Text-align Style Example

The result of using the above example will be as displayed in the figure below.

Text-align Outputs

Text Transform

The 'text transform' property controls capitalization effects of an element's text. Possible values of the 'text transform' property include:

  1. capitalize
    This will write the first character in an uppercase letter. Other characters will not be affected.
  2. uppercase
    This will write each word in upper case letters.
  3. lowercase
    This will write each word in lower case letters.
  4. none
    This will not create any capitalization effects.

Supported Tags

The supported tags for the text transform property are as follows:

b, i, u, h1, h2, h3, h4, h5, h6, tt, code, samp, kbd, pre, big, small, strike, s, em, cite, dfn, var, strong, font, a, dl, dt, dd, ul, ol, li, table, tr, td, th, p, div, span, sup, and sub.

For example, if you want to make all letters in a paragraph become uppercases, type the line of code displayed in the figure below.

Text-transform Style Example

The result of using the above example will be as shown in the figure below.

Text-transform Style Output

White-Space

The 'white-space' property affects the vertical position of white-space inside a lined box. White-space can be used in RTF, ODT, DOCX and PPTX report templates. Possible values of the 'white-space' property include:

  1. normal 
    To collapse sequences of white-space and break lines as necessary to fill line boxes.
  2. pre
    To prevent from collapsing sequences of white-space. Lines are only broken at newlines in the source or at occurrences of "\A" in the generated content. Report Wizard will render this value as the <pre> tag.
  3. nowrap
    To collapse white-space as for 'normal' but suppressing line breaks within text.
  4. pre-wrap
    To prevent user agents from collapsing sequences of white-space. Lines are broken at newlines in the source, at occurrences of "\A" in the generated content, and as necessary to fill line boxes. This value will not be rendered as pre.
  5. pre-line
    To direct user agents to collapse sequences of white-space. Lines are broken at newlines in the source, at occurrences of "\A" in the generated content, and as necessary to fill line boxes. This value will not be rendered as pre.

Supported Tags

The supported tags for the 'white-space' property are as follows:

b, i, u, h1, h2, h3, h4, h5, h6, tt, code, samp, kbd, pre, big, small, strike, s, em, cite, dfn, var, strong, font, a, table, tr, td, th, p, div, span, sup, and sub.

For example, if you want to preserve some white-space, type these lines of code as shown in the figure below.

White-space Style Example

The result of using the above example will be as indicated in the figure below.

White-space Style Outputs

Width

The 'width' property specifies the contents width of each box generated by a block-level. The value of the width property is length (See Length Specification for more details). Width can be used in RTF, ODT, and DOCX report templates.

The supported tag for the width property includes table.

For example, if you want to have a specific table width, type the lines of code as described in the figure below.

Width Style Example

The result of using the above example will be as shown in the figure below.

Width Style Outputs

Text Decoration

The 'text decoration' property describes decorations that are added to text. The possible values of the text decoration property are as follows:

  • none
    To produce no text decoration.
  • underline
    To underline each line of text.
  • overline
    To add a line above each line of text. 
  • line-through
    To add a line that strikes through each line of text.
  • blink
    To add the blinking effect to text (being visible and invisible alternatively). The blink text decoration supports only the ODT report template.
     

Report Wizard does not currently support the overline text decoration.

Supported Tags

The supported tags for the text decoration property are:

b, i, u, h1, h2, h3, h4, h5, h6, tt, code, samp, kbd, pre, big, small, strike, s, em, cite, dfn, var, strong, font, a, dl, dt, dd, ul, ol, li, table, tr, td, th, p, div, span, sup, and sub.

For example, if you want to create a line-through text, type the line of code as displayed in the figure below.

Text-decoration Style Example

The result of using the above example will be as indicated in the figure below.

Text-decoration Style Output

Vertical Align

The 'vertical align' property affects the vertical position of an element inside a lined box. This property can be used in RTF, ODT and DOCX report templates. Possible values of the vertical align property include:

  • baseline
    This value will align the baseline of a box with the baseline of the parent box. Leave the vertical alignment to be default when you encounter this value.
  • middle
    This value will align the vertical midpoint of a box.
  • top
    This value will align the top of the aligned sub-tree with the top of a line box.
  • bottom
    This value will align the bottom of the aligned sub-tree with the bottom of a line box.

The supported tags for the vertical align property are: table, tr, td, and th, for example, see figure below:

Vertical-align Style Example

The result of using the above example will be as shown in the figure below.

Vertical-Align Style Output