# Style Element

## Content

The following table lists the attributes of the style element.

| **Attribute** | **API Reference** | **Type** | **Comment** |
| --------- | ------------- | ---- | ------- |
| backColor | `style.backColor` | `string` |  |
| backgroundImage | `style.backgroundImage` | `string` |  |
| backgroundImageLayout | `spread.backgroundImageLayout(value)` | `GC.Spread.Sheets.ImageLayout` |  |
| border | `style.borderLeft, borderTop, borderRight, borderBottom` | `string` | Setting the border attribute sets borderLeft, borderTop, borderRight, and borderBottom at the same time |
| borderBottom | `style.borderBottom` | `string` |  |
| borderLeft | `style.borderLeft` | `string` |  |
| borderRight | `style.borderRight` | `string` |  |
| borderTop | `style.borderTop` | `string` |  |
| font | `style.font` | `string` |  |
| foreColor | `style.foreColor` | `string` |  |
| formatter | `style.formatter` | `string` |  |
| hAlign | `style.hAlign` | `GC.Spread.Sheets.HorizontalAlign` |  |
| locked | `style.locked` | `boolean` |  |
| shrinkToFit | `style.shrinkToFit` | `boolean` |  |
| textIndent | `style.textIndent` | `number` |  |
| themeFont | `style.themeFont` | `string` |  |
| vAlign | `style.vAlign` | `GC.Spread.Sheets.VerticalAlign` |  |
| wordWrap | `style.wordWrap` | `boolean` |  |

The following table lists the child elements of the style element.

| **Child Element** | **API Reference** | **Count** | **Type** | **Comments** |
| ------------- | ------------- | ----- | ---- | -------- |
| dateValidator | `style.validator` | `1` | `dateValidator` |  |
| formulaValidator | `style.validator` | `1` | `formulaValidator` |  |
| formulaListValidator | `style.validator` | `1` | `formulaListValidator` |  |
| listValidator | `style.validator` | `1` | `listValidator` |  |
| numberValidator | `style.validator` | `1` | `numberValidator` |  |
| textLengthValidator | `style.validator` | `1` | `textLengthValidator` |  |
| ButtonCellType | `style.cellType` | `1` | `GC.Spread.Sheets.CellTypes.Button` | If you add more then one cell type to a style, the last cell type overrides the previous cell types |
| CheckBoxCellType | `style.cellType` | `1` | `GC.Spread.Sheets.CellTypes.CheckBox` | If you add more then one cell type to a style, the last cell type overrides the previous cell types |
| ComboBoxCellType | `style.cellType` | `1` | `GC.Spread.Sheets.CellTypes.ComboBox` | If you add more then one cell type to a style, the last cell type overrides the previous cell types |
| HyperLinkCellType | `style.cellType` | `1` | `GC.Spread.Sheets.CellTypes.HyperLink` | If you add more then one cell type to a style, the last cell type overrides the previous cell types |
| TextCellType | `style.cellType` | `1` | `GC.Spread.Sheets.CellTypes.Text` | If you add more then one cell type to a style, the last cell type overrides the previous cell types |

The following example uses a style element.

```HTML
<gc-spread-sheets id="ss" style="width:100%;height:500px;border:1px solid gray">
    <worksheets>
        <worksheet>
            <columns>
                <column>
                    <default-style formatter="#,##0.00">
                        <number-validator comparisonoperator="GreaterThan" value1="0"></number-validator>
                    </default-style>
                </column>
                <column>
                    <default-style>
                        <list-validator list="Japan,Germany,UK,Italy,US"></list-validator>
                    </default-style>
                </column>
                <column>
                    <default-style>
                        <button-cell-type text="click me"></button-cell-type>
                    </default-style>
                </column>
            </columns>
        </worksheet>
    </worksheets>
</gc-spread-sheets>
```