CSS support in 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 command.
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.