windowsforms-403399-common-features-html-css-based-desktop-ui-css-styles.md
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:
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 defines style rules. Each rule consists of a selector and a declaration block, and has the following syntax:
A CSS Selector allows you to refer to an element you want to style.
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;
}
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;
}
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; }
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 allow you to refer to elements that have a specific 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:
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.
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;
}
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;
}
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;
}
You can use the ::selection syntax to set up style settings for selected content.
::selection {
background-color: @Warning;
}
.text::selection {
background-color: @Warning;
}
See also: Content Selection.
Use the following syntax to select elements that are non-visited hyperlinks:
selector:link {
css declaration;
}
The following code applies styles to a elements if their 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 a elements if their links were visited:
a:visited {
color: red;
}
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;
}
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;
}
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;
}
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;
}
This section describes style properties supported for HTML-based UI design.
font CSS PropertyA shorthand property for font-style, font-variant, font-weight, font-size/line-height, and font-family.
a {
font: 15px Arial, sans-serif;
}
|
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;
|
font-family CSS PropertyA 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;
}
|
Default value
|
| |
Inherited by children
|
Yes
| |
Syntax
|
font-family: family-name|generic-family|initial|inherit;
|
font-size CSS PropertyThe size of a font.
a {
font-size: 10px;
}
|
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;
|
font-style CSS PropertyThe font style for text.
a {
font-style: italic;
}
|
Default value
|
normal
| |
Inherited by children
|
Yes
| |
Syntax
|
font-style: normal|italic|oblique|initial|inherit;
|
font-weight CSS PropertySpecifies the thickness of characters in text.
#p1 {
font-weight: bold;
}
|
Default value
|
normal
| |
Inherited by children
|
Yes
| |
Syntax
|
font-weight: normal|bold|bolder|lighter|initial|inherit;
|
overflow CSS PropertySpecifies an element’s behavior when its content overflows the element’s box.
div {
overflow: hidden;
}
|
Default value
|
visible
| |
Inherited by children
|
No
| |
Syntax
|
overflow: visible|hidden|initial|inherit;
| |
Limitations
|
The ‘scroll’ and ‘auto’ values are not supported.
|
overflow-wrap CSS PropertySpecifies whether the element should insert line breaks within otherwise unbreakable strings to prevent these strings from flowing over control borders.
.text2 {
overflow-wrap: anywhere;
}
|
Default value
|
normal
| |
Inherited by children
|
Yes
| |
Syntax
|
overflow-wrap: normal|break-word|anywhere|initial|inherit;
|
text-align CSS PropertyThe horizontal alignment of text.
div {
text-align: center;
}
|
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;
|
text-decoration CSS PropertyA shorthand property for text-decoration-line, text-decoration-color, and text-decoration-style.
h3 {
text-decoration: underline;
}
|
Default value
|
none currentcolor solid
| |
Inherited by children
|
No
| |
Syntax
|
text-decoration: text-decoration-line text-decoration-color text-decoration-style|initial|inherit;
|
text-decoration-color CSS PropertyThe 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;
|
text-decoration-line CSS PropertyThe 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;
|
text-overflow CSS PropertySpecifies how hidden overflow content is displayed to users.
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
|
Default value
|
clip
| |
Inherited by children
|
No
| |
Syntax
|
text-overflow: clip|ellipsis|initial|inherit;
| |
Limitations
|
The ‘string’ value is not supported.
|
user-select CSS PropertyIf 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.
.specs {
user-select: none;
}
|
Default value
|
auto
| |
Inherited by children
|
No
| |
Syntax
|
user-select: auto|text|none;
|
border CSS PropertyA shorthand property for: border-width, border-style, and border-color.
h1 {
border: 5px solid green;
}
|
Default value
|
medium none color
| |
Inherited by children
|
No
| |
Syntax
|
border: border-width border-style border-color|initial|inherit;
|
border-bottom CSS PropertyA shorthand property for border-bottom-width, border-bottom-style, and border-bottom-color.
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;
|
border-bottom-color CSS PropertyThe 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;
|
border-bottom-left-radius CSS PropertyThe 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;
|
border-bottom-right-radius CSS PropertyThe 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;
|
border-bottom-style CSS PropertyThe 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;
|
border-bottom-width CSS PropertyThe 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;
|
border-color CSS PropertyThe color of an element’s borders.
p {border-color: red;}
|
Default value
|
| |
Inherited by children
|
No
| |
Syntax
|
border-color: color|transparent|initial|inherit;
|
border-left CSS PropertyA shorthand property for border-left-width, border-left-style, and border-left-color.
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;
|
border-left-color CSS PropertyThe 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;
|
border-left-style CSS PropertyThe 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;
|
border-left-width CSS PropertyThe 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;
|
border-radius CSS PropertyThe radius of an element’s corners.
.myrect {
border: 2px solid red;
border-radius: 25px;
}
|
Default value
|
0
| |
Inherited by children
|
No
| |
Syntax
|
border-radius: 1-4 length|initial|inherit;
|
border-right CSS PropertyA shorthand property for border-right-width, border-right-style, and border-right-color.
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;
|
border-right-color CSS PropertyThe 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;
|
border-right-style CSS PropertyThe 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;
|
border-right-width CSS PropertyThe 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;
|
border-style CSS PropertyThe style of an element’s borders.
h1 {border-style: solid;}
|
Default value
|
| |
Inherited by children
|
No
| |
Syntax
|
border-style: none|solid|initial|inherit;
|
border-top CSS PropertyA shorthand property for border-top-width, border-top-style, and border-top-color.
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;
|
border-top-color CSS PropertyThe 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;
|
border-top-left-radius CSS PropertyThe 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;
|
border-top-right-radius CSS PropertyThe 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;
|
border-top-style CSS PropertyThe 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;
|
border-top-width CSS PropertyThe 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;
|
border-width CSS PropertyThe width of an element’s borders.
div {border-width: thick;}
|
Default value
|
medium
| |
Inherited by children
|
No
| |
Syntax
|
border-width: medium|thin|thick|length|initial|inherit;
|
box-shadow CSS PropertyAdds shadow effects around an element’s frame.
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;
|
margin CSS PropertyA shorthand property for margin-top, margin-right, margin-bottom, and margin-left.
p {
margin: 7px;
}
|
Default value
|
0
| |
Inherited by children
|
No
| |
Syntax
|
margin: length|initial|inherit;
| |
Limitations
|
The ‘auto’ value is not supported.
|
margin-bottom CSS PropertyAn element’s bottom margin.
p {
margin-bottom: 10px;
}
|
Default value
|
0
| |
Inherited by children
|
No
| |
Syntax
|
margin-bottom: length|initial|inherit;
| |
Limitations
|
The ‘auto’ value is not supported.
|
margin-left CSS PropertyAn element’s left margin.
p {
margin-left: 10px;
}
|
Default value
|
0
| |
Inherited by children
|
No
| |
Syntax
|
margin-left: length|initial|inherit;
| |
Limitations
|
The ‘auto’ value is not supported.
|
margin-right CSS PropertyAn element’s right margin.
p {
margin-right: 10px;
}
|
Default value
|
0
| |
Inherited by children
|
No
| |
Syntax
|
margin-right: length|initial|inherit;
| |
Limitations
|
The ‘auto’ value is not supported.
|
margin-top CSS PropertyAn element’s top margin.
p {
margin-top: 10px;
}
|
Default value
|
0
| |
Inherited by children
|
No
| |
Syntax
|
margin-top: length|initial|inherit;
| |
Limitations
|
The ‘auto’ value is not supported.
|
padding CSS PropertyA shorthand property for padding-top, padding-right, padding-bottom, and padding-left.
p {
padding: 10px;
}
|
Default value
|
0
| |
Inherited by children
|
No
| |
Syntax
|
padding: length|initial|inherit;
|
padding-bottom CSS PropertyAn element’s bottom padding.
p {
padding-bottom: 10px;
}
|
Default value
|
0
| |
Inherited by children
|
No
| |
Syntax
|
padding-bottom: length|initial|inherit;
|
padding-left CSS PropertyAn element’s left padding.
p {
padding-left: 10px;
}
|
Default value
|
0
| |
Inherited by children
|
No
| |
Syntax
|
padding-left: length|initial|inherit;
|
padding-right CSS PropertyAn element’s right padding.
p {
padding-right: 10px;
}
|
Default value
|
0
| |
Inherited by children
|
No
| |
Syntax
|
padding-right: length|initial|inherit;
|
padding-top CSS PropertyAn element’s top padding.
p {
padding-top: 10px;
}
|
Default value
|
0
| |
Inherited by children
|
No
| |
Syntax
|
padding-top: length|initial|inherit;
|
background-color CSS PropertyAn element’s background color.
h1 {background-color: yellow;}
|
Default value
|
transparent
| |
Inherited by children
|
No
| |
Syntax
|
background-color: color|transparent|initial|inherit;
|
color CSS PropertyThe text color.
h1 {
color: blue;
}
|
Default value
|
| |
Inherited by children
|
Yes
| |
Syntax
|
color: color|initial|inherit;
|
background-image CSS PropertyAn element’s background image.
div {
background-image: url('icon');
}
|
Default value
|
none
| |
Inherited by children
|
No
| |
Syntax
|
background-image: image-name-from-HtmlImages-Collection|initial|inherit;
|
background-position CSS PropertyThe initial position for each background image.
div {
background-image: url('icon');
background-position: left 10px top, bottom right;
}
|
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;
|
background-size CSS PropertyThe 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;
}
|
Default value
|
auto auto
| |
Inherited by children
|
No
| |
Syntax
|
background-size: cover|contain|50%|12px|50% 12px|6px, auto, contain|initial|inherit;
|
background-repeat CSS PropertySets 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;
}
|
Default value
|
repeat
| |
Inherited by children
|
No
| |
Syntax
|
background-size: repeat-x|repeat-y|repeat|space|round|no-repeat|round space|initial|inherit;
|
align-content CSS PropertyAligns 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;
}
|
Default value
|
stretch
| |
Inherited by children
|
No
| |
Syntax
|
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
|
align-items CSS PropertyThe default alignment for items inside a flexible container.
div {
display: flex;
align-items: center;
}
|
Default value
|
stretch
| |
Inherited by children
|
No
| |
Syntax
|
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
|
align-self CSS PropertyThe alignment for the current element inside a flexible container.
#myDiv {
align-self: center;
}
|
Default value
|
auto
| |
Inherited by children
|
No
| |
Syntax
|
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
|
display CSS PropertySpecifies 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;}
|
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;
|
flex CSS PropertyA shorthand property for flex-grow, flex-shrink, and flex-basis.
.flex-item {
flex: auto;
}
|
Default value
|
0 1 auto
| |
Inherited by children
|
No
| |
Syntax
|
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
|
flex-basis CSS PropertyThe 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;
}
|
Default value
|
auto
| |
Inherited by children
|
No
| |
Syntax
|
flex-basis: number|auto|initial|inherit;
|
flex-direction CSS PropertyThe 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;
}
|
Default value
|
row
| |
Inherited by children
|
No
| |
Syntax
|
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
|
flex-grow CSS PropertySpecifies how an item grows relative to other flexible items inside the same container.
.flexible {
padding: 5px;
flex-grow: 1;
background-color: lightgreen;
}
|
Default value
|
0
| |
Inherited by children
|
No
| |
Syntax
|
flex-grow: number|initial|inherit;
|
flex-shrink CSS PropertySpecifies how an item shrinks relative to other flexible items inside the same container.
.fixedSize {
padding: 5px;
flex-shrink: 0;
background-color: lightblue;
}
|
Default value
|
1
| |
Inherited by children
|
No
| |
Syntax
|
flex-shrink: number|initial|inherit;
|
flex-wrap CSS PropertySpecifies whether flexible items should wrap.
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: stretch;
height: 200px;
}
|
Default value
|
nowrap
| |
Inherited by children
|
No
| |
Syntax
|
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
|
justify-content CSS PropertyAligns 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;
}
|
Default value
|
flex-start
| |
Inherited by children
|
No
| |
Syntax
|
justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;
|
object-fit CSS PropertySpecifies 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;
|
order CSS PropertyThe 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;
|
position CSS PropertySpecifies 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.
|
Default value
|
static
| |
Inherited by children
|
No
| |
Syntax
|
order: static|absolute|relative|fixed;
|
z-index CSS PropertyThe 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.
.block-top {
top: 30px;
left: 30px;
position: absolute;
z-index: 3;
}
.block-bottom {
top: 30px;
left: 30px;
position: absolute;
z-index: -1;
}
|
Default value
|
auto
| |
Inherited by children
|
No
| |
Syntax
|
order: number|auto;
|
white-space CSS PropertySpecifies 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;
|
height CSS PropertyAn element’s height.
b {
height: 10px;
border: 2px solid black;
}
|
Default value
|
auto
| |
Inherited by children
|
No
| |
Syntax
|
height: auto|length|initial|inherit;
|
max-height CSS PropertyAn element’s maximum height.
.mydiv {
max-height: 100px;
}
|
Default value
|
| |
Inherited by children
|
No
| |
Syntax
|
max-height: none|length|initial|inherit;
|
max-width CSS PropertyAn element’s maximum width.
.mydiv {
max-width: 100px;
}
|
Default value
|
| |
Inherited by children
|
No
| |
Syntax
|
max-width: none|length|initial|inherit;
|
min-height CSS PropertyAn element’s minimum height.
.mydiv {
min-height: 100px;
}
|
Default value
|
0
| |
Inherited by children
|
No
| |
Syntax
|
min-height: length|initial|inherit;
|
min-width CSS PropertyAn element’s minimum width.
.mydiv {
min-width: 100px;
}
|
Default value
|
0
| |
Inherited by children
|
No
| |
Syntax
|
min-width: length|initial|inherit;
|
width CSS PropertyAn element’s width.
.mydiv {
width: 100px;
}
|
Default value
|
auto
| |
Inherited by children
|
No
| |
Syntax
|
width: auto|length|initial|inherit;
|
border-spacing CSS PropertyThe 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;
|
opacity CSS PropertyThe opacity level for an element.
img {
opacity: 0.5;
}
|
Default value
|
1
| |
Inherited by children
|
No
| |
Syntax
|
opacity: value|initial|inherit;
|
visibility CSS PropertyAn 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.
|
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.
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;
}
You can also use colors enumerated by the SystemColors type: ButtonText, Control, ControlText, Info, etc.
.container {
background-color: Control;
}
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).
Use the #value syntax to specify a color as a hexadecimal value. For example:
.container {
color: #2a4211;
}
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".
.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):
Common Colors — Colors shared by all raster and vector skins. Supported color names include:
Skin-specific Colors — Colors that are available only within specific vector skins. No raster skin has these colors.
See Also