Skip to main content
All docs
V22.1

CSS Styles

  • 21 minutes to read

DevExpress WinForms controls that support HTML and CSS-based UI design allow you to use a CSS-inspired technique to customize the control’s look and feel. CSS (Cascading Style Sheets) allows you to specify how visual controls look when the HTML UI is rendered.

The simple HTML markup below defines two headers and text.

<h2>Chapter 1</h2>
Lorem ipsum
<h2>Chapter 2</h2>
dolor sit amet

When you assign this HTML template to the HtmlContentControl (from the HtmlContentControl.HtmlTemplate.Template property), the default UI rendering is as follows:

CSS styles example - h2 without styles

You can now use CSS to specify how the contents of all h2 tags should appear.

h2 {
    font-size: 14px;
    color: indigo;
    background-color: lavender;
}

Assign this CSS code to the HtmlContentControl.HtmlTemplate.Styles property to get the following output:

CSS styles example - h2 with styles

CSS Syntax

CSS defines style rules. Each rule consists of a selector and a declaration block, and has the following syntax:

CSS syntax

  • Selector—Identifies an HTML element you want to style.
  • Declaration—Consists of one or more style-property : value pairs, which are to be applied to target elements. See the CSS Properties section for a list of supported style properties.

CSS Selectors

A CSS Selector allows you to refer to an element you want to style.

Simple Selectors

Tag Selector

Selects elements by an HTML tag.

tag {
    css declaration;
}

The following example selects div elements:

div {
    background-color: lightGray;
    width: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
}

Class Selector

Selects elements that belong to the specified class. Use a period (.) character followed by the class name to specify a class selector.

.element-class {
    css declaration;
}

The following HTML markup defines a div element that belongs to the text-align-left class:

<div class="text-align-left">Text</div>

The CSS code below addresses this element by its class:

.text-align-left {
    text-decoration: line-through;
    text-align: left;
}

Id Selector

Selects an element with the specified unique identifier (id). Use a hash (#) character, followed by the element’s id, to specify an id selector.

#element-id {
    css declaration;
}

The following HTML code defines p elements that have different ids:

<p id="p-tools">Tools</p>
<p id="p-windows">Windows</p>

The CSS code below only addresses one p element:

#p-tools { font-size: 20px; }

Grouping Selector

Selects two or more elements. Separate individual selectors with a comma (,) to specify a grouping selector:

selector1, selector2, selector3 {
    css declaration;
}

selector1, selector2, and selector3 are individual selectors (tag, class, and id specifiers).

The following CSS code selects h2, h3, and h4 elements:

h2, h3, h4 { color: indigo; }

State Selectors

State selectors allow you to refer to elements that have a specific state.

Focused State

Use the following syntax to select focused elements:

selector:focus {
    css declaration;
}

The selector is an individual selector (tag, class, or id specifier).

The following CSS code applies styles to elements of the “button” class when they are focused:

.button:focus {
    background-color: black;
}

The styles specified by the :focus selector are applied to a focusable element when it receives focus. Focusable elements are as follows:

  • An embedded editor. Use the input tag to embed editors in the HTML-based UI.
  • An HTML element that has the tabindex attribute specified.

A focusable element receives focus on a mouse click. You can also use the TAB/SHIFT+TAB key to navigate between focusable HTML elements.

If a user clicks a non-focusable element, the current control recursively searches for the item’s focusable parent and then focuses it.

Pressed State

Use the following syntax to select pressed elements:

selector:active {
    css declaration;
}

The selector here and in sections below is an individual selector (tag, class, or id specifier).

The following CSS code applies styles to elements of the “button” class when they are pressed:

.button:active {
    background-color: green;
}

Hovered State

Use the following syntax to select hovered elements:

selector:hover {
    css declaration;
}

The following code applies styles to elements of the “button” class when they are hovered over with the mouse:

.button:hover {
    border-radius: 4px;
    background-color: yellow;
}

Disabled State

Use the following syntax to select disabled elements:

selector:disabled {
    css declaration;
}

The following code applies styles to elements of the “button” class when they are disabled:

.button:disabled {
    opacity: 0.25;
    background-color: #00000000;
}

Use the following syntax to select elements that are non-visited hyperlinks:

selector:link {
    css declaration;
}

The following code applies styles to the a elements whose links were not visited:

a:link {
    color: blue;
}

Use the following syntax to select elements that are visited hyperlinks:

selector:visited {
    css declaration;
}

The following code applies styles to the a elements whose links were visited:

a:visited {
    color: red;
}

Relation Selectors

Descendant

Use the following syntax to select elements that are placed within other elements:

element1 element2 {
    css declaration;
}

The descendant selector locates element2 elements inside element1 elements.

The following example selects all p elements inside div elements:

div p {
    background-color: red;
}

Child

Use the following syntax to select children of a specific element:

parent-element > child-element {
    css declaration;
}

The following example selects all p elements that are children of div elements:

div > p {
    background-color: red;
}

Adjacent Sibling

Use the following syntax to select a sibling element that is immediately after another element:

immediate-sibling1 + immediate-sibling2 {
    css declaration;
}

The following example selects a p element placed immediately after its div sibling:

div + p {
    background-color: red;
}

Subsequent Sibling

Use the following syntax to select a sibling element that is after another element (not necessarily immediately).

sibling1 ~ sibling2 {
    css declaration;
}

The following example selects a p element that is a subsequent sibling of a div element (not necessarily immediately):

div ~ p {
    background-color: red;
}

CSS Properties

This section describes style properties supported for HTML-based UI design.

Text & Font

font CSS Property

A shorthand property for font-style, font-variant, font-weight, font-size/line-height, and font-family.

a {
  font: 15px Arial, sans-serif;
}

Run Demo

Default value

-

Inherited by children

Yes

Syntax

font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;

More information

font-family CSS Property

A prioritized list of one or more font family names and/or generic family names for the selected element.

a {
  font-family: "Times New Roman", Times, serif;
}

Run Demo

Default value

-

Inherited by children

Yes

Syntax

font-family: family-name|generic-family|initial|inherit;

More information

font-size CSS Property

The size of a font.

a {
  font-size: 10px;
}

Run Demo

Default value

medium

Inherited by children

Yes

Syntax

font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;

More information

font-style CSS Property

The font style for text.

a {
  font-style: italic;
}

Run Demo

Default value

normal

Inherited by children

Yes

Syntax

font-style: normal|italic|oblique|initial|inherit;

More information

font-weight CSS Property

Specifies the thickness of characters in text.

#p1 {
  font-weight: bold;
}

Run Demo

Default value

normal

Inherited by children

Yes

Syntax

font-weight: normal|bold|bolder|lighter|value|initial|inherit;

More information

overflow CSS Property

Specifies an element’s behavior when its content overflows the element’s box.

div {
  overflow: hidden;
}

Run Demo

Default value

visible

Inherited by children

No

Syntax

overflow: visible|hidden|initial|inherit;

Limitations

The ‘scroll’ and ‘auto’ values are not supported.

More information

overflow-wrap CSS Property

Specifies whether the element should insert line breaks within otherwise unbreakable strings to prevent these strings from flowing over control borders.

CSS Overflow Wrap

.text2 {
    overflow-wrap: anywhere;
}

Run Demo

Default value

normal

Inherited by children

Yes

Syntax

overflow-wrap: normal|break-word|anywhere|initial|inherit;

More information

text-align CSS Property

The horizontal alignment of text.

div {
  text-align: center;
}

Run Demo

Default value

left if direction is ltr, and right if direction is rtl

Inherited by children

Yes

Syntax

text-align: left|right|center|justify|initial|inherit;

More information

text-decoration CSS Property

A shorthand property for text-decoration-line, text-decoration-color, and text-decoration-style.

h3 {
  text-decoration: underline;
}

Run Demo

Default value

none currentcolor solid

Inherited by children

No

Syntax

text-decoration: text-decoration-line text-decoration-color text-decoration-style|initial|inherit;

More information

text-decoration-color CSS Property

The color of the text-decoration (underlines, overlines, linethroughs).

h1 {
  text-decoration: underline;
  text-decoration-color: green;
}

Default value

-

Inherited by children

No

Syntax

text-decoration-color: color|initial|inherit;

More information

text-decoration-line CSS Property

The kind of text decoration to use (for example, underline, overline, line-through).

.a1 {
  text-decoration-line: overline;
}

Default value

-

Inherited by children

No

Syntax

text-decoration-line: none|underline|overline|line-through|initial|inherit;

More information

text-overflow CSS Property

Specifies how hidden overflow content is displayed to users.

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Run Demo

Default value

clip

Inherited by children

No

Syntax

text-overflow: clip|ellipsis|initial|inherit;

Limitations

The ‘string’ value is not supported.

More information

Borders

border CSS Property

A shorthand property for: border-width, border-style, and border-color.

h1 {
  border: 5px solid green;
}

Run Demo

Default value

medium none color

Inherited by children

No

Syntax

border: border-width border-style border-color|initial|inherit;

More information

border-bottom CSS Property

A shorthand property for border-bottom-width, border-bottom-style, and border-bottom-color.

h2 {
  border-bottom: 4px dotted red;
}

Default value

medium none color

Inherited by children

No

Syntax

border-bottom: border-width border-style border-color|initial|inherit;

More information

border-bottom-color CSS Property

The color of an element’s bottom border.

div {border-bottom-color: red;}

Default value

-

Inherited by children

No

Syntax

border-bottom-color: color|transparent|initial|inherit;

More information

border-bottom-left-radius CSS Property

The radius of the bottom-left corner.

p {
  border: 2px solid red;
  border-bottom-left-radius: 10px;
}

Default value

0

Inherited by children

No

Syntax

border-bottom-left-radius: length|% [length|%]|initial|inherit;

More information

border-bottom-right-radius CSS Property

The radius of the bottom-right corner.

p {
  border: 2px solid red;
  border-bottom-right-radius: 10px;
}

Default value

0

Inherited by children

No

Syntax

border-bottom-right-radius: length|% |initial|inherit;

More information

border-bottom-style CSS Property

The style of an element’s bottom border.

div {border-bottom-style: dashed;}

Default value

-

Inherited by children

No

Syntax

border-bottom-style: none|solid|initial|inherit;

More information

border-bottom-width CSS Property

The width of an element’s bottom border.

div {border-bottom-width: thin;}

Default value

medium

Inherited by children

No

Syntax

border-bottom-width: medium|thin|thick|length|initial|inherit;

More information

border-color CSS Property

The color of an element’s borders.

p {border-color: red;}

Run Demo

Default value

-

Inherited by children

No

Syntax

border-color: color|transparent|initial|inherit;

More information

border-left CSS Property

A shorthand property for border-left-width, border-left-style, and border-left-color.

h1 {
  border-left: 3px dotted blue;
}

Default value

medium none color

Inherited by children

No

Syntax

border-left: border-width border-style border-color|initial|inherit;

More information

border-left-color CSS Property

The color of an element’s left border.

div {border-left-color: red;}

Default value

-

Inherited by children

No

Syntax

border-left-color: color|transparent|initial|inherit;

More information

border-left-style CSS Property

The style of an element’s left border.

div {border-left-style: dashed;}

Default value

-

Inherited by children

No

Syntax

border-left-style: none|solid|initial|inherit;

More information

border-left-width CSS Property

The width of an element’s left border.

div {border-left-width: thin;}

Default value

medium

Inherited by children

No

Syntax

border-left-width: medium|thin|thick|length|initial|inherit;

More information

border-radius CSS Property

The radius of an element’s corners.

.myrect {
  border: 2px solid red;
  border-radius: 25px;
}

Run Demo

Default value

0

Inherited by children

No

Syntax

border-radius: 1-4 length|% |initial|inherit;

More information

border-right CSS Property

A shorthand property for border-right-width, border-right-style, and border-right-color.

h2 {
  border-right: 4px dotted red;
}

Default value

medium none color

Inherited by children

No

Syntax

border-right: border-width border-style border-color|initial|inherit;

More information

border-right-color CSS Property

The color of an element’s right border.

div {border-right-color: red;}

Default value

-

Inherited by children

No

Syntax

border-right-color: color|transparent|initial|inherit;

More information

border-right-style CSS Property

The style of an element’s right border.

div {border-right-style: dashed;}

Default value

-

Inherited by children

No

Syntax

border-right-style: none|solid|initial|inherit;

More information

border-right-width CSS Property

The width of an element’s right border.

div {border-right-width: thin;}

Default value

medium

Inherited by children

No

Syntax

border-right-width: medium|thin|thick|length|initial|inherit;

More information

border-style CSS Property

The style of an element’s borders.

h1 {border-style: dotted;}

Run Demo

Default value

-

Inherited by children

No

Syntax

border-style: none|solid|initial|inherit;

More information

border-top CSS Property

A shorthand property for border-top-width, border-top-style, and border-top-color.

h2 {
  border-top: 4px dotted red;
}

Default value

medium none color

Inherited by children

No

Syntax

border-top: border-width border-style border-color|initial|inherit;

More information

border-top-color CSS Property

The color of an element’s top border.

div {border-top-color: red;}

Default value

-

Inherited by children

No

Syntax

border-top-color: color|transparent|initial|inherit;

More information

border-top-left-radius CSS Property

The radius of the top-left corner.

.myclass {
  border: 2px solid green;
  border-top-left-radius: 5px;
}

Default value

0

Inherited by children

No

Syntax

border-top-left-radius: length|% |initial|inherit;

More information

border-top-right-radius CSS Property

The radius of the top-right corner.

.myclass {
  border: 2px solid green;
  border-top-right-radius: 5px;
}

Default value

0

Inherited by children

No

Syntax

border-top-right-radius: length|% |initial|inherit;

More information

border-top-style CSS Property

The style of an element’s top border.

div {border-top-style: dashed;}

Default value

-

Inherited by children

No

Syntax

border-top-style: none|solid|initial|inherit;

More information

border-top-width CSS Property

The width of an element’s top border.

div {border-top-width: thick;}

Default value

medium

Inherited by children

No

Syntax

border-top-width: medium|thin|thick|length|initial|inherit;

More information

border-width CSS Property

The width of an element’s borders.

div {border-width: thick;}

Run Demo

Default value

medium

Inherited by children

No

Syntax

border-width: medium|thin|thick|length|initial|inherit;

More information

Margins & Padding

margin CSS Property

A shorthand property for margin-top, margin-right, margin-bottom, and margin-left.

p {
  margin: 7px;
}

Run Demo

Default value

0

Inherited by children

No

Syntax

margin: length|initial|inherit;

Limitations

The ‘auto’ value is not supported.

More information

margin-bottom CSS Property

An element’s bottom margin.

p {
  margin-bottom: 10px;
}

Run Demo

Default value

0

Inherited by children

No

Syntax

margin-bottom: length|initial|inherit;

Limitations

The ‘auto’ value is not supported.

More information

margin-left CSS Property

An element’s left margin.

p {
  margin-left: 10px;
}

Run Demo

Default value

0

Inherited by children

No

Syntax

margin-left: length|initial|inherit;

Limitations

The ‘auto’ value is not supported.

More information

margin-right CSS Property

An element’s right margin.

p {
  margin-right: 10px;
}

Run Demo

Default value

0

Inherited by children

No

Syntax

margin-right: length|initial|inherit;

Limitations

The ‘auto’ value is not supported.

More information

margin-top CSS Property

An element’s top margin.

p {
  margin-top: 10px;
}

Run Demo

Default value

0

Inherited by children

No

Syntax

margin-top: length|initial|inherit;

Limitations

The ‘auto’ value is not supported.

More information

padding CSS Property

A shorthand property for padding-top, padding-right, padding-bottom, and padding-left.

p {
  padding: 10px;
}

Run Demo

Default value

0

Inherited by children

No

Syntax

padding: length|initial|inherit;

More information

padding-bottom CSS Property

An element’s bottom padding.

p {
  padding-bottom: 10px;
}

Run Demo

Default value

0

Inherited by children

No

Syntax

padding-bottom: length|initial|inherit;

More information

padding-left CSS Property

An element’s left padding.

p {
  padding-left: 10px;
}

Run Demo

Default value

0

Inherited by children

No

Syntax

padding-left: length|initial|inherit;

More information

padding-right CSS Property

An element’s right padding.

p {
  padding-right: 10px;
}

Run Demo

Default value

0

Inherited by children

No

Syntax

padding-right: length|initial|inherit;

More information

padding-top CSS Property

An element’s top padding.

p {
  padding-top: 10px;
}

Run Demo

Default value

0

Inherited by children

No

Syntax

padding-top: length|initial|inherit;

More information

Colors

background-color CSS Property

An element’s background color.

h1 {background-color: yellow;}

Run Demo

Default value

transparent

Inherited by children

No

Syntax

background-color: color|transparent|initial|inherit;

More information

color CSS Property

The text color.

h1 {
  color: blue;
}

Run Demo

Default value

-

Inherited by children

Yes

Syntax

color: color|initial|inherit;

More information

Background Image

background-image CSS Property

An element’s background image.

div {
  background-image: url('icon');
}

Demo

Default value

none

Inherited by children

No

Syntax

background-image: image-name-from-HtmlImages-Collection|initial|inherit;

More information

background-position CSS Property

The initial position for each background image.

div {
  background-image: url('icon');
  background-position: left 10px top, bottom right;
}

Demo

Default value

0% 0%

Inherited by children

No

Syntax

background-position: top|bottom|left|right|center|width height|image1-width image1-height, center|initial|inherit;

More information

background-size CSS Property

The size of the element’s background image. The image can be left to its natural size, stretched, or constrained to fit the available space.

div {
  background-image: url('icon');
  background-size: auto 6px;
}

Demo

Default value

auto auto

Inherited by children

No

Syntax

background-size: cover|contain|50%|12px|50% 12px|6px, auto, contain|initial|inherit;

More information

background-repeat CSS Property

Sets whether background images are repeated along the horizontal axis, vertical axis, or not repeated at all.

div {
  background-image: url('icon');
  background-repeat: space repeat;
}

Demo

Default value

repeat

Inherited by children

No

Syntax

background-size: repeat-x|repeat-y|repeat|space|round|no-repeat|round space|initial|inherit;

More information

Layout & Alignment

align-content CSS Property

Aligns a flex container’s lines within it. This property is in effect when the flexbox has two or more lines.

div {
  width: 100px;
  height: 400px;
  border: 1px solid red;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

Run Demo

Default value

stretch

Inherited by children

No

Syntax

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

More information

align-items CSS Property

The default alignment for items inside a flexible container.

div {
  display: flex;
  align-items: center;
}

Run Demo

Default value

stretch

Inherited by children

No

Syntax

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

More information

align-self CSS Property

The alignment for the current element inside a flexible container.

#myDiv {
  align-self: center;
}

Run Demo

Default value

auto

Inherited by children

No

Syntax

align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

More information

display CSS Property

Specifies whether an element is treated as a block or inline element. Specifies the layout used for the element’s children, such as flow layout, grid or flex.

.myclass {display: flex;}

Run Demo

Default value

-

Inherited by children

No

Syntax

display: inline|block|list-item|inline-block|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|none|initial|inherit;

More information

flex CSS Property

A shorthand property for flex-grow, flex-shrink, and flex-basis.

.flex-item {
  flex: auto;
}

Run Demo

Default value

0 1 auto

Inherited by children

No

Syntax

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

More information

flex-basis CSS Property

The initial length of a flexible item.

.item {
    display: flex;
    flex-basis: 150px;
    margin: 5px;
    background-color: lightblue;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
}

Run Demo

Default value

auto

Inherited by children

No

Syntax

flex-basis: number|auto|initial|inherit;

More information

flex-direction CSS Property

The direction of items in a flex container.

.container {
    display: flex;
    flex-direction: column;
    background-color: lightblue;
    justify-content: space-between;
    width: 150px;
    height: 200px;
    text-align: center;
    border-radius: 10px;
    padding: 10px;
}

Run Demo

Default value

row

Inherited by children

No

Syntax

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

More information

flex-grow CSS Property

Specifies how an item grows relative to other flexible items inside the same container.

.flexible {
    padding: 5px;
    flex-grow: 1;
    background-color: lightgreen;
}

Run Demo

Default value

0

Inherited by children

No

Syntax

flex-grow: number|initial|inherit;

More information

flex-shrink CSS Property

Specifies how an item shrinks relative to other flexible items inside the same container.

.fixedSize {
    padding: 5px;
    flex-shrink: 0;
    background-color: lightblue;
}

Run Demo

Default value

1

Inherited by children

No

Syntax

flex-shrink: number|initial|inherit;

More information

flex-wrap CSS Property

Specifies whether flexible items should wrap.

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: stretch;
    height: 200px;
}

Run Demo

Default value

nowrap

Inherited by children

No

Syntax

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

More information

justify-content CSS Property

Aligns the flexible container’s items when the items do not use all available space on the main-axis (horizontally).

.item {
    display: flex;
    flex-basis: 150px;
    margin: 5px;
    background-color: lightblue;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
}

Run Demo

Default value

flex-start

Inherited by children

No

Syntax

justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;

More information

object-fit CSS Property

Specifies how an img element is resized to fit its container.

img {
  width: 200px;
  height: 300px;
  object-fit: contain;
}

Default value

fill

Inherited by children

No

Syntax

object-fit: fill|contain|cover|none|scale-down|initial|inherit;

More information

order CSS Property

The order of a flexible item relative to other items within the same container.

.order {
    order: 1;
}

Default value

0

Inherited by children

No

Syntax

order: number|initial|inherit;

More information

white-space CSS Property

Specifies how white-space inside an element is handled.

p.c1 {
  white-space: nowrap;
}

Default value

normal

Inherited by children

Yes

Syntax

white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

More information

Size

height CSS Property

An element’s height.

b {
  height: 10px;
  border: 2px solid black;
}

Run Demo

Default value

auto

Inherited by children

No

Syntax

height: auto|length|initial|inherit;

More information

max-height CSS Property

An element’s maximum height.

.mydiv {
  max-height: 100px;
}

Default value

-

Inherited by children

No

Syntax

max-height: none|length|initial|inherit;

More information

max-width CSS Property

An element’s maximum width.

.mydiv {
  max-width: 100px;
}

Default value

-

Inherited by children

No

Syntax

max-width: none|length|initial|inherit;

More information

min-height CSS Property

An element’s minimum height.

.mydiv {
  min-height: 100px;
}

Default value

0

Inherited by children

No

Syntax

min-height: length|initial|inherit;

More information

min-width CSS Property

An element’s minimum width.

.mydiv {
  min-width: 100px;
}

Default value

0

Inherited by children

No

Syntax

min-width: length|initial|inherit;

More information

width CSS Property

An element’s width.

.mydiv {
  width: 100px;
}

Run Demo

Default value

auto

Inherited by children

No

Syntax

width: auto|length|initial|inherit;

More information

Tables

border-spacing CSS Property

The distance between the borders of adjacent cells in a table.

.mytable1 {
  border-collapse: separate;
  border-spacing: 15px;
}

Default value

2px

Inherited by children

Yes

Syntax

border-spacing: length|initial|inherit;

More information

Visibility

opacity CSS Property

The opacity level for an element.

img {
  opacity: 0.5;
}

Default value

1

Inherited by children

No

Syntax

opacity: value|initial|inherit;

More information

visibility CSS Property

An element’s visibility.

b {
  visibility: hidden;
}

Default value

visible

Inherited by children

Yes

Syntax

visibility: visible|hidden|initial|inherit;

Limitations

The ‘collapse’ value is not supported.

More information

Specify Color Values

When you set CSS color properties (for example, color, backround-color, and border-color) you can specify color values by name, RGB, or HEX format. The HTML Template Editor’s IntelliSense feature allows you to see a list of supported color options when you press the CTRL+SPACE shortcut.

Html template editor - Color property - Intellisense

The following sub-sections contain more details on supported color value specifiers and color names.

Predefined HTML Colors

You can use color names defined in the standard Color structure to specify a color value. Sample values include: Azure, Coral, Black, Firebrick, Red, Violet, etc.

.container {
    color: Green;
}

System-dependent Colors

You can also use colors enumerated by the SystemColors type: ButtonText, Control, ControlText, Info, etc.

.container {
    background-color: Control;
}

Colors in RGB and RGBA Formats

A color value can be specified in RGB or RGBA formats as follows:

.container {
    color: rgb(100, 200, 50);
    background-color: rgba(10, 37, 178, 0.5);
}

The fourth parameter of the RGBA format specifies the alpha component (transparency) of a color — a value between 0 (fully transparent) and 1 (fully opaque).

Colors in Hex Format

Use the #value syntax to specify a color as a hexadecimal value. For example:

.container {
    color: #2a4211;
}

Skin-dependent Colors

These are special colors defined in DevExpress skins. When you use one of these colors in CSS markup, the actual color value is determined by the currently applied skin. The following image demonstrates a few skin colors painted in three skins:

Skin Colors In Different Skins

Use the @name notation to specify a skin color. To define the alpha component for a skin color, use the following syntax: @name/alpha, where alpha is a value between 0 (fully transparent) and 1 (fully opaque).

.container {
    color: @Success;
    background-color: @Warning;
    border-color: @Green/0.2;
}

Skin colors can be grouped into three logical categories:

  • SVG Icon Colors — The colors used in the DevExpress SVG images (see Image Gallery):

    Red, Green, Blue, Yellow, Black, White

    See the following topic for information on how to create custom SVG images that support these colors: How To: Draw and Use SVG Images.

  • Common Colors — Colors shared by all raster and vector skins. Supported color names include:

    Control, ControlText, Critical, Danger, DisabledControl, DisabledText, HideSelection, Highlight, HighlightAlternate, HighlightSearch, HighlightSearchText, HighlightText, HotTrackedColor, HotTrackedForeColor, Hyperlink, InactiveCaptionText, Info, Information, InfoText, Menu, MenuText, Primary, Question, QuestionFill, ReadOnly, Success, Warning, WarningFill, Window, WindowText

  • Skin-specific Colors — Colors that are available only within specific vector skins. No raster skin has these colors.

    You can access colors that are specific to individual vector skins (along with common colors) in the SVG Common Palette dialog in the WinForms Skin Editor tool.

    SVG Common Palette

    Different vector skins have different sets of colors. If you want to apply a skin-specific color in CSS markup, ensure that your app uses the vector skin that defines this color value. Otherwise, the skin color value is undefined.

See Also