Hello. I just joined. Don't have any questions yet, but I'm using Kobweb for my company's website.

# kobweb

[Ryan Scott]

Hello. I just joined. Don't have any questions yet, but I'm using Kobweb for my company's website.

[Ryan Scott]

In any case, I've got most of the site working and am now trying to figure out how to properly style markdown for a blog section.

[Ryan Scott]

It looks like I can only style the root composable and none of the classes, ids, etc specifically inside the generated HTML.

[Ryan Scott]

For example, I can make the text behave the way I want it to, but the style ends up getting applied to h1 and p exactly the same.

[Ryan Scott]

Is there a guide for how to do this?

[Ryan Scott]

Rather--to be more specific, I want to apply a style that has definitions for all selectors to properly style each element that will result from rendering a markdown file.

[Ryan Scott]

For example:

---
title: KobWeb Site
author: Ryan
---

# KobWeb Site
This is a test

I want to style the h1 and the p independently.

[Ryan Scott]

Nevermind--I played with it for a bit and figured it out.

[Ryan Scott]

The trick was to add cssRule("<selector>") { /* create modifier */ } entries for the selectors I wanted inside of the single CssRule I created.

[David Herman]

Sorry I didn't see this until now! Glad you figured it out. cssRule is indeed a powerful way to do whatever you want that Kobweb doesn't directly support. You can also style things globally using an @InitSilk block.

cssRule examples can be found in the kobweb create app example project: https://github.com/varabyte/kobweb-templates/blob/0e3f5ecebfa7f9b1c07c5fb295c2a036[…]/default/site/src/site/components/layouts/MarkdownLayout.kt.ftl

Here's an @InitSilk block example from my blog site bitspittle.dev: https://github.com/bitspittle/bitspittle.dev/blob/main/site/src/jsMain/kotlin/dev/bitspittle/site/AppStyles.kt#L39