Supported CSS

Background

The shorthand property for the background property is 'background', which is used for setting an individual background style. Only the ‘background-color’ attribute is supported. 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.

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:

   
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 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.

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

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.

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

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.

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

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.
   

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.

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

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:

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