# Style and Appearance

## Content



Accordion provides various options to style the appearance of all its elements so that you can present the control as per the requirement of your application and change the look and feel of the application you are creating.

### Styling Accordion

You can style the UI of the Accordion control using [Styles](/componentone/docs/win/online-accordion/) property in [C1Accordion](/componentone/docs/win/online-accordion/) class. This property accesses the Accordion styles allowing you to set the border color, border thickness, background color, and more of Accordion.

![WinForms Accordion styling](https://cdn.mescius.io/document-site-files/images/a9d1222b-0ddf-4c55-8888-49748b62a8c3/images/accordion-styling-only.png)

The following code snippet shows how to apply styles in the Accordion control. In this example, [ShowBorder](/componentone/docs/win/online-accordion/) property of the [AccordionStyle](/componentone/docs/win/online-accordion/) class is used to display borders, and the [BorderColor](/componentone/docs/win/online-accordion/) and [BackColor](/componentone/docs/win/online-accordion/) properties of the [BaseItemStyle](/componentone/docs/win/online-accordion/) class are used to set to style the Accordion control.

```csharp
//styling accordion
//setting bordercolor of accordion
c1Accordion1.Styles.Common.Default.BorderColor = Color.RosyBrown;
//setting border thickness
c1Accordion1.Styles.Common.ShowBorder = true;
//setting backcolor of accordion
c1Accordion1.Styles.Common.Default.BackColor = Color.OldLace;
```

### Styling Pages

Accordion lets you style the Accordion pages and page header, and change the header text alignment. You can change the background color of the Accordion Page using the **BackColor** property and set the page margin using the [Margins](/componentone/docs/win/online-accordion/) property of the [AccordionPageStyle](/componentone/docs/win/online-accordion/) class. You can also style the different header states of the Accordion Page, such as the default state and hot state (when the cursor is over the control) using the [AccordionPageHeaderStyle](/componentone/docs/win/online-accordion/) class. Further, you can also set the alignment of header text using the [HorizontalAlignment](/componentone/docs/win/online-accordion/) property.

![WinForms Accordion Page Styling](https://cdn.mescius.io/document-site-files/images/a9d1222b-0ddf-4c55-8888-49748b62a8c3/images/accordion-page-styling-only.png)

The following code snippet shows how to style the Accordion page and its header.

```csharp
//styling pages
//setting headertext alignment of all pages
c1Accordion1.Styles.Pages.Header.HorizontalAlignment = C1.Framework.Alignment.Near; //header alignment
//setting backcolor and forecolor of Default header for all pages
c1Accordion1.Styles.Pages.Header.Default.BackColor = Color.RosyBrown;
c1Accordion1.Styles.Pages.Header.Default.ForeColor = Color.OldLace;
//setting backcolor and forecolor of hot header for all pages
c1Accordion1.Styles.Pages.Header.Hot.BackColor = Color.LightSlateGray;
c1Accordion1.Styles.Pages.Header.Hot.ForeColor = Color.White;
//setting pages margin
c1Accordion1.Styles.Pages.Margins = new C1.Framework.Thickness(2);
//setting pages default backcolor
c1Accordion1.Styles.Pages.Default.BackColor = Color.Beige;
```

### Styling Active Pages

Accordion lets you style an active page or the currently selected page in the Accordion control. You can set the background color of the active page headers in both the default and hot (when the cursor is over the active page) states using the [ActiveAccordionPageStyle](/componentone/docs/win/online-accordion/) and [ActiveAccordionPageHeaderStyle](/componentone/docs/win/online-accordion/) classes.

![WinForms Accordion Active Page Styling](https://cdn.mescius.io/document-site-files/images/a9d1222b-0ddf-4c55-8888-49748b62a8c3/images/active-page.gif)

The following code snippet shows how to style an active page.

```csharp
//styling ActivePage
// setting backcolor of the default header of the active page
c1Accordion1.Styles.ActivePage.Header.Default.BackColor = Color.RosyBrown;
// setting backcolor of the hot header of the active page
c1Accordion1.Styles.ActivePage.Header.Hot.BackColor = Color.OldLace;
```