> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction to Custom Styles

> Compares the features available across editions (Free plan, Basic edition, Professional edition, Dedicated edition), with a focus on custom page style capabilities. Explains CSS layout properties such as padding, margin, and border in detail.

| **Feature**        | **Free plan** | **Basic edition** | **Professional edition** | **Dedicated edition** |
| ------------------ | ------------- | ----------------- | ------------------------ | --------------------- |
| Custom page styles | Not supported | Not supported     | Supported                | Supported             |

## 1. Overview

Only the **Rich text display**, **Layout container**, and **Group component** currently support style settings. Use them to arrange form components for a more polished appearance.

## 2. Feature Details

### 2.1 Source Code Editing

When certain CSS styles cannot be configured through the settings panel, use source code editing to write CSS code and define custom styles.

Source code editing stays fully in sync with the settings panel on the right. Changes take effect immediately, and edits on either side are mirrored on the other.

Reference: How to modify the style and size of the Single-line text component

### 2.2 Default States

| **Attribute** | **Description**                                                 |
| ------------- | --------------------------------------------------------------- |
| :active       | Applies styles to the element when it is activated.             |
| :focus        | Applies styles to the element when it has keyboard input focus. |
| :hover        | Applies styles to the element when the mouse hovers over it.    |

### 2.3 Layout

#### 2.3.2 CSS Padding Properties

| **Property**                                                              | **Description**                                                                         |
| ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
| [padding](http://www.w3school.com.cn/cssref/pr_padding.asp)               | Shorthand property. Sets all padding properties for an element in a single declaration. |
| [padding-bottom](http://www.w3school.com.cn/cssref/pr_padding-bottom.asp) | Sets the bottom padding of an element.                                                  |
| [padding-left](http://www.w3school.com.cn/cssref/pr_padding-left.asp)     | Sets the left padding of an element.                                                    |
| [padding-right](http://www.w3school.com.cn/cssref/pr_padding-right.asp)   | Sets the right padding of an element.                                                   |
| [padding-top](http://www.w3school.com.cn/cssref/pr_padding-top.asp)       | Sets the top padding of an element.                                                     |

#### 2.3.3 CSS Margin Properties

| **Property**                                                            | **Description**                                                         |
| ----------------------------------------------------------------------- | ----------------------------------------------------------------------- |
| [margin](http://www.w3school.com.cn/cssref/pr_margin.asp)               | Shorthand property. Sets all margin properties in a single declaration. |
| [margin-bottom](http://www.w3school.com.cn/cssref/pr_margin-bottom.asp) | Sets the bottom margin of an element.                                   |
| [margin-left](http://www.w3school.com.cn/cssref/pr_margin-left.asp)     | Sets the left margin of an element.                                     |
| [margin-right](http://www.w3school.com.cn/cssref/pr_margin-right.asp)   | Sets the right margin of an element.                                    |
| [margin-top](http://www.w3school.com.cn/cssref/pr_margin-top.asp)       | Sets the top margin of an element.                                      |

#### 2.3.4 CSS Border Properties

| **Property**                                                                        | **Description**                                                                                                                        |
| ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| [border](http://www.w3school.com.cn/cssref/pr_border.asp)                           | Shorthand property. Sets properties for all four borders in a single declaration.                                                      |
| [border-style](http://www.w3school.com.cn/cssref/pr_border-style.asp)               | Sets the style of all borders of an element, or the border style for each side individually.                                           |
| [border-width](http://www.w3school.com.cn/cssref/pr_border-width.asp)               | Shorthand property. Sets the width of all borders of an element, or the border width for each side individually.                       |
| [border-color](http://www.w3school.com.cn/cssref/pr_border-color.asp)               | Shorthand property. Sets the color of the visible portion of all borders of an element, or separate colors for each of the four sides. |
| [border-bottom](http://www.w3school.com.cn/cssref/pr_border-bottom.asp)             | Shorthand property. Sets all properties of the bottom border in a single declaration.                                                  |
| [border-bottom-color](http://www.w3school.com.cn/cssref/pr_border-bottom_color.asp) | Sets the color of the bottom border of an element.                                                                                     |
| [border-bottom-style](http://www.w3school.com.cn/cssref/pr_border-bottom_style.asp) | Sets the style of the bottom border of an element.                                                                                     |
| [border-bottom-width](http://www.w3school.com.cn/cssref/pr_border-bottom_width.asp) | Sets the width of the bottom border of an element.                                                                                     |
| [border-left](http://www.w3school.com.cn/cssref/pr_border-left.asp)                 | Shorthand property. Sets all properties of the left border in a single declaration.                                                    |
| [border-left-color](http://www.w3school.com.cn/cssref/pr_border-left_color.asp)     | Sets the color of the left border of an element.                                                                                       |
| [border-left-style](http://www.w3school.com.cn/cssref/pr_border-left_style.asp)     | Sets the style of the left border of an element.                                                                                       |
| [border-left-width](http://www.w3school.com.cn/cssref/pr_border-left_width.asp)     | Sets the width of the left border of an element.                                                                                       |
| [border-right](http://www.w3school.com.cn/cssref/pr_border-right.asp)               | Shorthand property. Sets all properties of the right border in a single declaration.                                                   |
| [border-right-color](http://www.w3school.com.cn/cssref/pr_border-right_color.asp)   | Sets the color of the right border of an element.                                                                                      |
| [border-right-style](http://www.w3school.com.cn/cssref/pr_border-right_style.asp)   | Sets the style of the right border of an element.                                                                                      |
| [border-right-width](http://www.w3school.com.cn/cssref/pr_border-right_width.asp)   | Sets the width of the right border of an element.                                                                                      |
| [border-top](http://www.w3school.com.cn/cssref/pr_border-top.asp)                   | Shorthand property. Sets all properties of the top border in a single declaration.                                                     |
| [border-top-color](http://www.w3school.com.cn/cssref/pr_border-top_color.asp)       | Sets the color of the top border of an element.                                                                                        |
| [border-top-style](http://www.w3school.com.cn/cssref/pr_border-top_style.asp)       | Sets the style of the top border of an element.                                                                                        |
| [border-top-width](http://www.w3school.com.cn/cssref/pr_border-top_width.asp)       | Sets the width of the top border of an element.                                                                                        |

### 2.4 Display

#### 2.4.1 Block

A block-level element always occupies a full line. It starts on a new line, and any element that follows must also start on a new line.

Its width (**width**), height (**height**), padding (**padding**), and margin (**margin**) are all controllable.

#### 2.4.2 Inline-Block

An inline-block element sits on the same line as adjacent inline elements.

Its width (**width**), height (**height**), padding (**padding**), and margin (**margin**) are all controllable.

#### 2.4.3 Inline

An inline element sits on the same line as adjacent inline elements.

Its width (**width**), height (**height**), top and bottom padding (**padding-top/padding-bottom**), and top and bottom margin (**margin-top/margin-bottom**) cannot be changed. Its size is determined by the Text or Image it contains.

#### 2.4.4 Flex (Non-Technical Users Are Advised to Use Column Layouts)

Flex layout is a simple, complete, and responsive way to build a wide range of page layouts.

An element that uses flex layout is called a flex container. By default, a container has two axes: a horizontal main axis and a vertical cross axis.

**Direction: row** — The main axis runs horizontally, starting from the left (default).

**Direction: column** — The main axis runs horizontally, starting from the right.

**Direction: row-reverse** — The main axis runs vertically, starting from the top.

**Direction: column-reverse** — The main axis runs vertically, starting from the bottom.

**Align: flex-start** — Aligns items to the start of the cross axis.

**Align: flex-end** — Aligns items to the end of the cross axis.

**Align: center** — Aligns items to the center of the cross axis.

**Align: baseline** — Aligns items along the baseline of the first line of text.

**Align: stretch** — Items with no set height, or with height set to auto, stretch to fill the full height of the container (default).

**Justify: flex-start** — Align Left (default).

**Justify: flex-end** — Align Right.

**Justify: center** — Center Align.

**Justify: space-between** — Aligns items to both ends with equal spacing between them.

**Justify: space-around** — Applies equal spacing on both sides of each item.

Note: For a detailed tutorial, see **Flex layout syntax tutorial**.

### 2.5 Text

**(1) Font**: The Font of the Text.

**(2) Weight**: The thickness of the Text.

**(3) Style**: The style of the Text (normal or Italic).

**(4) Color**: The color of the Text.

**(5) Size**: The size of the Text.

**(6) Line height**: The height of the line containing the Text.

**(7) Align**: The Text alignment (Align Left, Center Align, Align Right, or justify).

**(8) Decoration**: The Text decoration (normal, Underline, or Strikethrough).

### 2.6 Background

**(1) Fill color**: The Background color.

**(2) Image**: Use an Image as the Background.

### 2.7 Border

**(1) Line style**: The border line style (solid, dotted, or dashed).

**(2) Width**: The width of the border.

**(3) Color**: The color of the border.

**(4) Corner radius**: The size of the border corner radius.

### 2.8 Effects

**(1) Opacity**: The transparency of the element. The smaller the value, the more transparent it becomes.

**(2) Cursor**: The Cursor style shown when hovering over the element (pointer or hand).

### 2.9 Shadow

**(1) Color**: The color of the shadow.

**(2) X**: The horizontal offset of the shadow.

**(3) Y**: The vertical offset of the shadow.

**(4) Blur**: The blur distance of the shadow. A larger value produces a softer shadow edge.

**(5) Spread**: The spread radius of the shadow. A positive value expands the entire shadow, while a negative value shrinks it.

> If the Help document above does not resolve your issue, contact Xingfudemianhuatang.