CSS Styles
- 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.
<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 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.
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
tabindexattribute 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;
}
Selection
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.
Link
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;
}
Visited Link
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;
}
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 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;
}
Default value | - |
Inherited by children | Yes |
Syntax | font-family: family-name|generic-family|initial|inherit; |
font-size CSS Property
The 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 Property
The 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 Property
Specifies 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 Property
Specifies 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 Property
Specifies 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 Property
The horizontal alignment of text.
div {
text-align: center;
}
Default value | left if |
Inherited by children | Yes |
Syntax | text-align: left|right|center|justify|initial|inherit; |
text-decoration CSS Property
A 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 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; |
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; |
text-overflow CSS Property
Specifies 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. |
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.
.specs {
user-select: none;
}
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.
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 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; |
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; |
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; |
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; |
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; |
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; |
border-color CSS Property
The 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 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; |
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; |
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; |
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; |
border-radius CSS Property
The 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 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; |
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; |
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; |
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; |
border-style CSS Property
The style of an element’s borders.
h1 {border-style: dotted;}
Default value | - |
Inherited by children | No |
Syntax | border-style: none|solid|initial|inherit; |
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; |
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; |
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; |
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; |
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; |
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; |
border-width CSS Property
The 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 Property
Adds 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; |
Margins & Padding
margin CSS Property
A 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 Property
An 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 Property
An 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 Property
An 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 Property
An 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 Property
A 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 Property
An element’s bottom padding.
p {
padding-bottom: 10px;
}
Default value | 0 |
Inherited by children | No |
Syntax | padding-bottom: length|initial|inherit; |
padding-left CSS Property
An element’s left padding.
p {
padding-left: 10px;
}
Default value | 0 |
Inherited by children | No |
Syntax | padding-left: length|initial|inherit; |
padding-right CSS Property
An element’s right padding.
p {
padding-right: 10px;
}
Default value | 0 |
Inherited by children | No |
Syntax | padding-right: length|initial|inherit; |
padding-top CSS Property
An element’s top padding.
p {
padding-top: 10px;
}
Default value | 0 |
Inherited by children | No |
Syntax | padding-top: length|initial|inherit; |
Colors
background-color CSS Property
An element’s background color.
h1 {background-color: yellow;}
Default value | transparent |
Inherited by children | No |
Syntax | background-color: color|transparent|initial|inherit; |
color CSS Property
The text color.
h1 {
color: blue;
}
Default value | - |
Inherited by children | Yes |
Syntax | color: color|initial|inherit; |
Background Image
background-image CSS Property
An 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 Property
The 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 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;
}
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 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;
}
Default value | repeat |
Inherited by children | No |
Syntax | background-size: repeat-x|repeat-y|repeat|space|round|no-repeat|round space|initial|inherit; |
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;
}
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 Property
The 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 Property
The 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 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;}
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 Property
A 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 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;
}
Default value | auto |
Inherited by children | No |
Syntax | flex-basis: number|auto|initial|inherit; |
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;
}
Default value | row |
Inherited by children | No |
Syntax | flex-direction: row|row-reverse|column|column-reverse|initial|inherit; |
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;
}
Default value | 0 |
Inherited by children | No |
Syntax | flex-grow: number|initial|inherit; |
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;
}
Default value | 1 |
Inherited by children | No |
Syntax | flex-shrink: number|initial|inherit; |
flex-wrap CSS Property
Specifies 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 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;
}
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 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; |
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; |
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, andz-indexproperties 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, andleft. 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 Property
The z-order of a positioned element and its descendants or flex items. “Positioned” elements are elements whose position property is not static. 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 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; |
Size
height CSS Property
An 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 Property
An element’s maximum height.
.mydiv {
max-height: 100px;
}
Default value | - |
Inherited by children | No |
Syntax | max-height: none|length|initial|inherit; |
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; |
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; |
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; |
width CSS Property
An element’s width.
.mydiv {
width: 100px;
}
Default value | auto |
Inherited by children | No |
Syntax | width: auto|length|initial|inherit; |
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; |
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; |
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. |
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.
.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:
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):
Red,Green,Blue,Yellow,Black,WhiteSee 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,WindowTextSkin-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 Palettedialog 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.