# Type safe CSS Properties

Every KVision component has a full range of properties based on CSS specification. Most of them are 100% type-safe - based on enumeration values, dedicated classes and functions. You can of course use custom CSS stylesheets and assign predefined classes to your components (as explained in the [Theming](https://kvision.gitbook.io/kvision-guide/kvision-8.x/themes#adding-a-custom-css-file-to-your-application) chapter), but KVision gives you a choice. With CSS properties you can style any component's size, position, margins, paddings, borders, colors, backgrounds, text and fonts with pure Kotlin code.

Most of the CSS properties are defined in the `io.kvision.core.StyledComponent` class.

An example of setting CSS properties for a DIV element.

```kotlin
div("A label with custom CSS styling") {
    margin = 10.px
    padding = 20.px
    fontFamily = "Times New Roman"
    fontSize = 32.px
    fontStyle = FontStyle.OBLIQUE
    fontWeight = FontWeight.BOLDER
    fontVariant = FontVariant.SMALLCAPS
    textDecoration = TextDecoration(TextDecorationLine.UNDERLINE, TextDecorationStyle.DOTTED, Color.name(Col.RED))
}
```

## CSS units

KVision supports all CSS units as an extension properties on `Number` type. So you can specify dimensions, sizes, position and thickness with such example notations: `50.px`, `12.pt`, `2.em`, `90.perc`, `100.vh`, `1.49.em` etc.

## Colors

There are two ways to specify colors. You can use hexadecimal `Int` literals or predefined color names with two extension functions for the `Color` class. To specify the "color" property, you can also use convenient setters: `colorHex` and `colorName`.

```kotlin
div {
    color = Color.hex(0x0000ff)
    color = Color.name(Col.BLUE)
    colorHex = 0x0000ff
    colorName = Col.BLUE
}
```

## CSS helper classes

To specify borders, backgrounds, text decorations and text shadows you use the dedicated classes.

```kotlin
div {
    border = Border(1.px, BorderStyle.SOLID, Color.name(Col.BLACK))
    background = Background(
        0xcccccc, require("img/kotlin.png"), 50.perc, 50.perc, size = BgSize.CONTAIN,
        repeat = BgRepeat.NOREPEAT, attachment = BgAttach.FIXED)
    textDecoration = TextDecoration(TextDecorationLine.UNDERLINE, 
        TextDecorationStyle.DOTTED, Color.name(Col.RED))
    textShadow = TextShadow(2.px, 2.px, blurRadius = 1.px, color = Color.name(Col.BLACK))
}
```

## Style objects

When the CSS properties are set directly on the component, the corresponding style attributes are inlined in the generated HTML code. Sometimes it's better to define a CSS class, which can be reused by other components. In KVision you can do this using the `Style` class. By instantiating the `Style` object you create a CSS class definition. This definition can be assigned to any component with the `addCssStyle` method.

```kotlin
val myStyle = Style {
    border = Border(1.px, BorderStyle.SOLID, Color.name(Col.GRAY))
    width = 200.px
    height = 200.px
    margin = 10.px
}
div {
    addCssStyle(myStyle)
}
div {
    addCssStyle(myStyle)
}
```

By default the class name is generated by KVision, but you can use your own with the `Style` class constructor parameter.

```kotlin
val myStyle = Style(".rectangle") {
    width = 200.px
    height = 100.px
}
```

Style objects can be nested to create CSS subclasses.

```kotlin
val boxStyle = Style {
    border = Border(1.px, BorderStyle.SOLID, Color.name(Col.GRAY))
    width = 200.px
    height = 200.px

    style("h1") {
        colorName = Col.BLUE
    }
}

div {
    addCssStyle(boxStyle)
    h1 {
        +"Header"
    }
}
```

## Global Styles

You can declare global styles as a val on any class that is referenced by your application; for example:

```
    val bodyStyle = style("body") {
        margin = 0.px
        padding = 0.px
        background = Background(color = Color.hex(APP_BACKGROUND))
        fontFamily = "Lato"
        overflow = Overflow.HIDDEN
    }
```

If you prefer, you can keep these isolated in their own file:

```

class App {
    val styles = GlobalStyles
}

// own file
object GlobalStyles {

    val bodyStyle = style("body") {
        // ...
    }
}
```

{% hint style="info" %}
Note: `Style` objects are currently not designed to work with multiple `Root` containers.
{% endhint %}

## Pseudo Class Support

The `Style` class as a pClass property which will set the style [pseudoclass](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes).

For example:

```
    div {    
        addCssStyle(style(pClass = HOVER) {
            color = Color.name(YELLOWGREEN)
        })
    }     
```