CSS Styles

• Jul 01, 2025
• 23 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.

HTML

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

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

CSS

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 Syntax

CSS defines style rules. Each rule consists of a selector and a declaration block, and has the following 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.

CSS

tag {
    css declaration;
}

The following example selects div elements:

CSS

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.

CSS

.element-class {
    css declaration;
}

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

HTML

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

The CSS code below addresses this element by its class:

CSS

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

CSS

#element-id {
    css declaration;
}

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

HTML

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

The CSS code below only addresses one p element:

CSS

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

Grouping Selector

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

CSS

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:

CSS

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:

CSS

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:

CSS

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

CSS

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:

CSS

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

Hovered State

Use the following syntax to select hovered elements:

CSS

selector:hover {
    css declaration;
}

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

CSS

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

Disabled State

Use the following syntax to select disabled elements:

CSS

selector:disabled {
    css declaration;
}

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

CSS

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

Selection

You can use the ::selection syntax to set up style settings for selected content.

CSS

::selection {
    background-color: @Warning;
}

.text::selection {
    background-color: @Warning;
}

See also: Content Selection.

Link

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

CSS

selector:link {
    css declaration;
}

The following code applies styles to a elements if their links were not visited:

CSS

a:link {
    color: blue;
}

Visited Link

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

CSS

selector:visited {
    css declaration;
}

The following code applies styles to a elements if their links were visited:

CSS

a:visited {
    color: red;
}

Relation Selectors

Descendant

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

CSS

element1 element2 {
    css declaration;
}

The descendant selector locates element2 elements inside element1 elements.

The following example selects all p elements inside div elements:

CSS

div p {
    background-color: red;
}

Child

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

CSS

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

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

CSS

div > p {
    background-color: red;
}

Adjacent Sibling

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

CSS

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

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

CSS

div + p {
    background-color: red;
}

Subsequent Sibling

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

CSS

sibling1 ~ sibling2 {
    css declaration;
}

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

CSS

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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

#p1 {
  font-weight: bold;
}

Run Demo

Default value	normal
Inherited by children	Yes
Syntax	font-weight: normal|bold|bolder|lighter|initial|inherit;

More information

overflow CSS Property

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

Sample CSS

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.

Sample CSS

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

Sample CSS

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.

Sample CSS

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

Sample CSS

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

Sample CSS

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

Sample CSS

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

Content Selection

user-select CSS Property

If a control has its AllowContentSelection property enabled (for example, HtmlContentControl.AllowContentSelection), utilize the user-select property to specify which elements should not allow users to copy their contents.

Sample CSS

.specs {
    user-select: none;
}

Run Demo

Default value	auto
Inherited by children	No
Syntax	user-select: auto|text|none;

Borders

border CSS Property

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

Sample CSS

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.

Sample CSS

h2 {
  border-bottom: 4px solid 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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

h1 {
  border-left: 3px solid 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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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

Sample CSS

h2 {
  border-right: 4px solid 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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

h1 {border-style: solid;}

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.

Sample CSS

h2 {
  border-top: 4px solid 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.

Sample CSS

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.

Sample CSS

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

Sample CSS

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

Sample CSS

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.

Sample CSS

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.

Sample CSS

div {border-width: thick;}

Run Demo

Default value	medium
Inherited by children	No
Syntax	border-width: medium|thin|thick|length|initial|inherit;

More information

box-shadow CSS Property

Adds shadow effects around an element’s frame.

Sample CSS

div {box-shadow: 10px 5px 5px @Red;}

Default value	none
Inherited by children	No
Syntax	box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;

More information

Margins & Padding

margin CSS Property

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

Sample CSS

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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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

Sample CSS

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

Sample CSS

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

Sample CSS

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

Sample CSS

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

Sample CSS

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

Sample CSS

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

Sample CSS

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

Sample CSS

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

Sample CSS

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.

Sample CSS

.order {
    order: 1;
}

Default value	0
Inherited by children	No
Syntax	order: number|initial|inherit;

More information

position CSS Property

Specifies how an element should interpret its top, bottom, left, right, and z-index properties.

static

The element is positioned according to the normal flow of the document. The top, bottom, left, right, and z-index properties are ignored.

relative

The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left.

absolute

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any. Otherwise, it is placed relative to the initial containing block.

fixed

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport. This mode is supported only in HtmlContentControl templates.

Run Demo

Default value	static
Inherited by children	No
Syntax	order: static|absolute|relative|fixed;

More information

z-index CSS Property

The z-order of a positioned element (the position property is not static) and its descendants or flex items. The z-index property accepts both positive and negative numbers. The auto value is equivalent to 0.

Sample CSS

.block-top {
    top: 30px;
    left: 30px;
    position: absolute;
    z-index: 3;
}
.block-bottom {
    top: 30px;
    left: 30px;
    position: absolute;
    z-index: -1;
}

Run Demo

Default value	auto
Inherited by children	No
Syntax	order: number|auto;

More information

white-space CSS Property

Specifies how white-space inside an element is handled.

Sample CSS

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.

Sample CSS

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.

Sample CSS

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

Sample CSS

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

Sample CSS

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

Sample CSS

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

Sample CSS

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

Sample CSS

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

Sample CSS

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.

Sample CSS

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.

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.

Sample CSS

.container {
    color: Green;
}

System-dependent Colors

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

Sample CSS

.container {
    background-color: Control;
}

Colors in RGB and RGBA Formats

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

Sample CSS

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

Sample CSS

.container {
    color: #2a4211;
}

Skin-dependent Colors

These are specific 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:

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). Use the following syntax to define composite color names (with spaces): @"Primary Background 0".

Sample CSS

.container {
    color: @Success;
    background-color: @"Primary Background 0";
    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.

  

  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.