CSS support in the Rich Text Box

A list of CSS styles that are supported by the Rich Text Box.

CSS styles need to be contained in the HTML document using a <style> element. References to external CSS files (for example, using <link> tags) are not supported.

CSS selectors

Table 1. Supported CSS selectors
Name Example Description
.class .intro Selects all elements with class="intro".
#id #firstname

Selects all elements with class="firstname"

* * Selects all elements.
element p Selects all p elements.
element, element div, p Selects all div and p elements.
element element div p Selects all p elements inside <div> elements.
element > element div > p Selects all p elements where the parent is a <div> element.
element + element div + p Selects all p elements placed immediately after <div> elements.
element1~element2 p ~ ul Selects all <ul> elements preceded by a <p> element.
[attribute] [target]

Selects all elements with a target attribute.

[attribute=value] [target=_blank]

Selects all elements with target = "_blank".

[attribute~=value] [title~=flower]

Selects all elements with a title attribute containing the word "flower".

[attribute|=value] [lang|=en]

Selects all elements with a lang attribute value starting with "en".

[attribute^=value] a[href^="https"]

Selects all <a> elements whose href attribute value begins with "https".

[attribute$=value] a[href$=".pdf"]

Selects all <a> elements whose href attribute value end with ".pdf".

[attribute*=value] a[href*="w3schools"]

Selects all <a> elements whose href attribute value contains the substring "w3schools".

:first-child p:first-child Selects all <p> elements that are the first child of their parents.

CSS properties

Table 2. Supported CSS properties
Name Values Description
font-family Font Name

A font name as listed by the fontinfo script.

font-size smaller|xx-small|x-small|small|medium|larger|large|x-large|xx-large|‎Length

"Smaller" and "larger" set the font to a smaller or larger size than the parent element.

"Length" defines the font size in units such as px or cm. See Supported length values.

font-style normal|italic|oblique

Oblique is rendered as italic.

font-weight normal|bold
color Color

See Supported color values.

width auto|Length

Auto is the default value, the width is computed.

Length: Defines the width in units such as px or cm. See Supported length values.

height auto|Length

Auto is the default value, the height is computed.

Length: Defines the height in units such as px or cm. See Supported length values.

margin auto|Length

Sets the margins for an element.

  • Auto is the default value, the margin is computed.
  • Length: Defines the margin in units such as px or cm. See Supported length values.
margin-top, margin-right, margin-bottom, margin-left auto|Length

Sets the top, right, bottom, or left margin for an element.

  • Auto is the default value, the margin is computed.
  • Length: Defines the margin in units such as px or cm. See Supported length values.
padding auto|Length

Sets the padding for an element.

  • Auto is the default value, the padding is computed.
  • Length: Defines the padding in units such as px or cm. See Supported length values.
padding-top, padding-right, padding-bottom, padding-left auto|Length

Sets the top, right, bottom, or left padding for an element.

  • Auto is the default value, the padding is computed.
  • Length: Defines the padding in units such as px or cm. See Supported length values.
border-width auto|Length

Sets the width of all borders.

  • Auto is the default value, the border width is computed.
  • Length: Defines the border width in units such as px or cm. See Supported length values.
border-top-width, border-right-width, border-bottom-width, border-left-width auto|Length

Sets the width for the top, right, bottom, or left border.

  • Auto is the default value, the border width is computed.
  • Length: Defines the border width in units such as px or cm. See Supported length values.
border-color Color

Sets the color of all borders.

See Supported color values.

border-top-color, border-right-color, border-bottom-color, border-left-color Color

Sets the color of the top, right, bottom, or left border.

See Supported color values.

border-style none|solid|dotted|dashed|groove|ridge|inset|outset|double

Sets the style for all borders.

border-top-style, border-right-style, border-bottom-style, and border-left-style none|solid|dotted|dashed|groove|ridge|inset|outset|double

Sets the style for the top, right, bottom, or left border.

text-decoration-line none|underline|line-though

Defines the text decoration. The visual effect is identical to the ins and del elements.

text-align left|right|center|justified

Defines the text alignment on paragraphs (<p> and <div>) elements. The default is "left".

line-height normal|number|%|‎Length Defines the line height on paragraphs (p and div) elements.
  • normal: A normal line height. This is the default.
  • number: A number that is multiplied by the current font size to set the line height.
  • %: A line height as percentage of the current font size.
  • Length: A fixed line height. See Supported length values.
white-space normal|nowrap|pre|pre-line|pre-wrap
  • normal: The default. Sequences of whitespace collapse into a single whitespace. Text wraps when necessary.
  • nowrap: Sequences of whitespace collapse into a single whitespace. Text never wraps to the next line, but continues until a <br> tag is encountered.
  • pre: Whitespace is preserved. Text only wraps on line breaks. Acts like the <pre> tag in HTML
  • pre-line: Sequences of whitespace collapse into a single whitespace. Text wraps when necessary, and on line breaks.

Supported length values

When length units are expressed, a whitespace cannot appear between the number and the unit: for example, "10px" not "10 px". If the value is 0, the unit can be omitted.

Absolute length units are fixed:

  • cm: centimeters
  • mm: millimeters
  • in: inches (1in = 96px = 2.54cm)
  • px: pixels (1px = 1/96th of 1in)
  • pt: points (1pt = 1/72 of 1in)
  • pc: picas (1pc = 12 pt)

Relative length units are dependent on other values:

  • em: Relative to the font-size of the element. For example, 2em means 2 times the size of the current font.
  • ex: Relative to the x-height (height of a lowercase ‘x’) of the current font.
  • ch: Relative to width of the "0" (zero).
  • %: Relative to the parent element.

Supported color values

Colors in CSS can be specified as:
  • Hexadecimal. For example, the #0000ff value is rendered as blue.
  • RGB. For example, the rgb(255,0,0) value is rendered as red.
  • RGBA. For example, the rgba(255, 0, 0, 0.3) value is rendered as red with opacity.
  • HSL. For example, the hsl(120, 100%, 50%) value is rendered as green.
  • HSLA. For example, the hsla(120, 100%, 50%, 0.3) value is rendered as green with opacity.
  • Cross-browser color names, as defined in the HTML and CSS color specification.