# Sizing and Styling Controls

Learn how to style Wijmo components using this tutorial

## Content

Wijmo controls rely on CSS for styling, appearance, and sizing.

Because of this, Wijmo controls don't have properties such as "width," "height," or "background." Styling and layout is handled using CSS. If you are used to .NET controls, including __WinForms__ and __XAML__, this may feel a little strange at first. But once you get used to CSS, you will find that it is very easy and extremely powerful. You can easily style all instances of a control type, or style a specific control, all with a few lines of extremely re-usable CSS.

## Sizing Controls
The size and position of the controls are determined by the hosting element, which follows the usual HTML/CSS rules. For example, the CSS rule below stipulates that elements with class "grid" should have their height calculated automatically to fit the grid content, up to a limit of 300 pixels:

```css
.grid {
    height: auto;
    max-height: 300px;
}
```

## Styling Controls
Control styling follows the same logic as sizing. Use CSS to override fonts, colors, margins, padding, and pretty much any visual aspect of any part of the controls.

```css
.grid {
    height: auto;
    max-height: 350px;
}
.grid .wj-header.wj-cell {
    background-color: #000;
    color: #fff;
    font-weight: bold;
    border-right: solid 1px #404040;
    border-bottom: solid 1px #404040;
}
.grid .wj-cell {
    border: none;
    background-color: #fff;
}
.grid .wj-alt:not(.wj-state-selected):not(.wj-state-multi-selected) {
    background-color: #fff;
}
.grid .wj-state-selected {
    background: #000;
    color: #fff;
}
.grid .wj-state-multi-selected {
    background: #222222;
    color: #fff;
}
```
The snippet above shows how you can modify the appearance of the __FlexGrid__ control using CSS. Try adding this any one of the __FlexGrid__ samples and you notice that the grid has a plain black and white look.


Some other quick tricks with CSS can be applied to the grid. To change the cell style of the grid, use the _"wj-cell"_ CSS class. The next example simply removes borders from cells and sets their background to white.

```css
.grid .wj-cell {
    border: none;
    background-color: #fff;
}
```

## Code-based Styling
Although the Wijmo controls rely on CSS for layout and sizing, there are a few situations where you may want to use code to get total control of some aspects of a control.

For example, the FlexGrid calculates the row heights based on the font being used to render the control. But you may want to override that CSS-based setting and specify the exact row heights yourself. You can do this by setting the following properties:

```javascript
// set the height of rows in the scrollable area
flex.rows.defaultSize = 34;
// set the height of rows in the column header area
flex.columnHeaders.rows.defaultSize = 40;
```