Create CSS class with kotlinx.html DSL

Question

I'm using Kotlin to Javascript plugin and kotlinx.html library to build sample app:

fun main(args: Array<String>) {
    window.onload = {
        document.body!!.append.div {
            a("#", classes = "red") {
                +"Link"
            }
        }
    }
}

And I want to paint a link with "red" CSS class to red color.
Now I'm using unsage + raw to do it:

document.head!!.append.style {
    unsafe {
        raw(".red { background: #f00; }")
    }
}

How to create CSS class with kotlinx.html DSL? I didn't find any docs related to css DSL.

Answer 1

You cannot use the HTML DSL for creating CSS. There are two possible ways for using css in your HTML.

1) You create CSS files independently and then use the classes as you proposed. 2) Inline the CSS if this is feasible for your app.

h1("h1Class") {
    style = "background-color:red"
    +"My header1"
}

This results in:

<h1 class="h1Class" style="background-color:red">My header1</h1>