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 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 | RGB Specification Integer | RGB Specification Percentage |
---|---|---|---|
Maroon | #800000 | RGB(128,0,0) | RGB(50%,0%,0%) |
Red | #FF0000 | RGB(255,0,0) | RGB(100%,0%,0%) |
Orange | #FFA500 | RGB(255,165,0) | RGB(100%,65%,0%) |
Yellow | #FFFF00 | RGB(255,255,0) | RGB(100%,100%,0%) |
Olive | #808000 | RGB(128,128,0) | RGB(50%,50%,0%) |
Purple | #800080 | RGB(128,0,128) | RGB(50%,0%,50%) |
Fuchsia | #FF00FF | RGB(255,0,255) | RGB(100%,0%,100%) |
White | #FFFFFF | RGB(255,255,255) | RGB(100%,100%,100%) |
Lime | #00FF00 | RGB(0,255,0) | RGB(0%,100%,0%) |
Green | #008000 | RGB(0,128,0) | RGB(0%,50%,0%) |
Navy | #000080 | RGB(0,0,128) | RGB(0%,0%,50%) |
Blue | #0000FF | RGB(0,0,255) | RGB(0%,0%,100%) |
Aqua | #00FFFF | RGB(0,255,255) | RGB(0%,100%,100%) |
Teal | #008080 | RGB(0,128,128) | RGB(0%,50%,50%) |
Black | #000000 | RGB(0,0,0) | RGB(0%,0%,0%) |
Silver | #C0C0C0 | RGB(192,192,192) | RGB(75%,75%,75%) |
Gray | #808080 | RGB(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.
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:
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 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'
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:
Absolute units are:
Border color properties specify the border colors of a box. The value of the border color has two meanings:
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'
The Border style properties specify the style of a box's border lines. The border style may take one of the following 10 values:
|
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'
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 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'
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 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:
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.
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).
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.
The 'display' property specifies how text will be displayed. The possible display values are:
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.
The 'font' property is a shorthand property for setting, except the following:
'font family'
'font-style'
'font-variant'
'font-weight'
'font-size'
Specify a prioritized list of font family names and/or generic family names.
Specify either normal or italic face (within the specified font family).
Specify either normal or small-caps of variant (within the specified font family). Font variant is not supported in XLSX report templates.
Specifies the weight of the font. The following values are defined:
Specify the font size. Possible values include xx-small, x-small, small, medium, large, xx-large, and the integer number from 1 to 7.
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.
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.
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.
The 'text transform' property controls capitalization effects of an element's text. Possible values of the 'text transform' property include:
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.
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:
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.
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.
The 'text decoration' property describes decorations that are added to text. The possible values of the text decoration property are as follows:
Report Wizard does not currently support the overline text decoration. |
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.
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:
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.