0
# CSS Styling
1

2
Type-safe CSS styling system with comprehensive property support, modern layout capabilities, and flexible units. Supports both inline styles and stylesheet classes with automatic scoping.
3

4
## Capabilities
5

6
### Style Application
7

8
Core functions for applying CSS styles to elements.
9

10
```kotlin { .api }
11
/**
12
 * Apply inline styles to an element (used within attrs blocks)
13
 * @param builder Style scope builder for CSS properties
14
 */
15
fun AttrsScope<*>.style(builder: StyleScope.() -> Unit)
16

17
/**
18
 * Mount CSS rules into the document
19
 * @param cssRules Pre-built CSS rule declarations
20
 */
21
@Composable
22
fun Style(cssRules: CSSRuleDeclarationList)
23

24
/**
25
 * Mount CSS rules with optional attributes
26
 * @param applyAttrs Optional attributes for the style element
27
 * @param rulesBuild CSS rules builder
28
 */
29
@Composable
30
fun Style(
31
    applyAttrs: (AttrsScope<HTMLStyleElement>.() -> Unit)? = null,
32
    rulesBuild: StyleSheetBuilder.() -> Unit
33
)
34
```
35

36
### StyleSheet System
37

38
Class-based CSS styling with automatic scoping and name generation.
39

40
```kotlin { .api }
41
/**
42
 * CSS stylesheet class for defining reusable styles
43
 * @param customPrefix Optional custom prefix for generated class names
44
 * @param rulesHolder Optional holder for CSS rules
45
 */
46
class StyleSheet(
47
    customPrefix: String? = null,
48
    rulesHolder: CSSRulesHolder? = null
49
) {
50
    /**
51
     * Define a CSS class with properties
52
     * @param builder Style scope for CSS properties
53
     * @return Generated CSS class name
54
     */
55
    fun style(builder: StyleScope.() -> Unit): String
56
    
57
    /**
58
     * Define CSS keyframes for animations
59
     * @param builder Keyframes builder
60
     * @return Generated keyframes name
61
     */
62
    fun keyframes(builder: CSSKeyframesRuleDeclaration.() -> Unit): String
63
}
64

65
/**
66
 * Interface for CSS rule collections
67
 */
68
interface CSSRulesHolder
69
```
70

71
### Display and Positioning
72

73
Properties for element display modes and positioning.
74

75
```kotlin { .api }
76
/**
77
 * Display mode property
78
 * @param value Display style (Block, Inline, Flex, Grid, None, etc.)
79
 */
80
fun StyleScope.display(value: DisplayStyle)
81

82
/**
83
 * Position type property
84
 * @param value Position type (Static, Relative, Absolute, Fixed, Sticky)
85
 */
86
fun StyleScope.position(value: Position)
87

88
/**
89
 * Position offset properties
90
 */
91
fun StyleScope.top(value: CSSNumeric)
92
fun StyleScope.bottom(value: CSSNumeric)
93
fun StyleScope.left(value: CSSNumeric)
94
fun StyleScope.right(value: CSSNumeric)
95

96
/**
97
 * Stacking order
98
 * @param value Z-index value
99
 */
100
fun StyleScope.zIndex(value: Int)
101

102
// Display style constants
103
enum class DisplayStyle {
104
    Block, Inline, InlineBlock, Flex, InlineFlex, Grid, InlineGrid, 
105
    Table, TableRow, TableCell, None, Contents, FlowRoot,
106
    ListItem, RunIn, Compact, Marker
107
}
108

109
// Position constants
110
enum class Position {
111
    Static, Relative, Absolute, Fixed, Sticky
112
}
113
```
114

115
### Box Model Properties
116

117
Dimensions, margins, padding, and borders.
118

119
```kotlin { .api }
120
/**
121
 * Width and height properties
122
 */
123
fun StyleScope.width(value: CSSNumeric)
124
fun StyleScope.height(value: CSSNumeric)
125
fun StyleScope.minWidth(value: CSSNumeric)
126
fun StyleScope.maxWidth(value: CSSNumeric)
127
fun StyleScope.minHeight(value: CSSNumeric)
128
fun StyleScope.maxHeight(value: CSSNumeric)
129

130
/**
131
 * Box sizing model
132
 * @param value BoxSizing mode (ContentBox, BorderBox)
133
 */
134
fun StyleScope.boxSizing(value: BoxSizing)
135

136
/**
137
 * Margin properties
138
 */
139
fun StyleScope.margin(value: CSSNumeric)
140
fun StyleScope.marginTop(value: CSSNumeric)
141
fun StyleScope.marginBottom(value: CSSNumeric)
142
fun StyleScope.marginLeft(value: CSSNumeric)
143
fun StyleScope.marginRight(value: CSSNumeric)
144
fun StyleScope.marginBlock(value: CSSNumeric)
145
fun StyleScope.marginInline(value: CSSNumeric)
146

147
/**
148
 * Padding properties
149
 */
150
fun StyleScope.padding(value: CSSNumeric)
151
fun StyleScope.paddingTop(value: CSSNumeric)
152
fun StyleScope.paddingBottom(value: CSSNumeric)
153
fun StyleScope.paddingLeft(value: CSSNumeric)
154
fun StyleScope.paddingRight(value: CSSNumeric)
155
fun StyleScope.paddingBlock(value: CSSNumeric)
156
fun StyleScope.paddingInline(value: CSSNumeric)
157

158
/**
159
 * Border properties
160
 */
161
fun StyleScope.border(
162
    width: CSSNumeric? = null,
163
    style: LineStyle? = null,
164
    color: CSSColorValue? = null
165
)
166
fun StyleScope.borderTop(width: CSSNumeric?, style: LineStyle?, color: CSSColorValue?)
167
fun StyleScope.borderBottom(width: CSSNumeric?, style: LineStyle?, color: CSSColorValue?)
168
fun StyleScope.borderLeft(width: CSSNumeric?, style: LineStyle?, color: CSSColorValue?)
169
fun StyleScope.borderRight(width: CSSNumeric?, style: LineStyle?, color: CSSColorValue?)
170

171
fun StyleScope.borderWidth(value: CSSNumeric)
172
fun StyleScope.borderStyle(value: LineStyle)
173
fun StyleScope.borderColor(value: CSSColorValue)
174
fun StyleScope.borderRadius(value: CSSNumeric)
175

176
// Box sizing constants
177
enum class BoxSizing { ContentBox, BorderBox }
178

179
// Line style constants  
180
enum class LineStyle { None, Solid, Dashed, Dotted, Double, Groove, Ridge, Inset, Outset }
181
```
182

183
### Flexbox Properties
184

185
Modern flexible layout system properties.
186

187
```kotlin { .api }
188
/**
189
 * Flex direction (main axis direction)
190
 * @param value FlexDirection (Row, Column, RowReverse, ColumnReverse)
191
 */
192
fun StyleScope.flexDirection(value: FlexDirection)
193

194
/**
195
 * Flex wrapping behavior
196
 * @param value FlexWrap (Wrap, Nowrap, WrapReverse)
197
 */
198
fun StyleScope.flexWrap(value: FlexWrap)
199

200
/**
201
 * Main axis alignment
202
 * @param value JustifyContent alignment
203
 */
204
fun StyleScope.justifyContent(value: JustifyContent)
205

206
/**
207
 * Cross axis alignment for items
208
 * @param value AlignItems alignment
209
 */
210
fun StyleScope.alignItems(value: AlignItems)
211

212
/**
213
 * Cross axis alignment for content lines
214
 * @param value AlignContent alignment
215
 */
216
fun StyleScope.alignContent(value: AlignContent)
217

218
/**
219
 * Individual item cross axis alignment
220
 * @param value AlignSelf alignment
221
 */
222
fun StyleScope.alignSelf(value: AlignSelf)
223

224
/**
225
 * Flex grow, shrink, and basis shorthand
226
 * @param value Flex value (number or auto)
227
 */
228
fun StyleScope.flex(value: CSSNumeric)
229

230
/**
231
 * Individual flex properties
232
 */
233
fun StyleScope.flexGrow(value: Number)
234
fun StyleScope.flexShrink(value: Number)
235
fun StyleScope.flexBasis(value: CSSNumeric)
236

237
/**
238
 * Gap between flex items
239
 */
240
fun StyleScope.gap(value: CSSNumeric)
241
fun StyleScope.rowGap(value: CSSNumeric)
242
fun StyleScope.columnGap(value: CSSNumeric)
243

244
// Flexbox constants
245
enum class FlexDirection { Row, Column, RowReverse, ColumnReverse }
246
enum class FlexWrap { Wrap, Nowrap, WrapReverse }
247
enum class JustifyContent { FlexStart, FlexEnd, Center, SpaceBetween, SpaceAround, SpaceEvenly }
248
enum class AlignItems { FlexStart, FlexEnd, Center, Baseline, Stretch }
249
enum class AlignContent { FlexStart, FlexEnd, Center, SpaceBetween, SpaceAround, SpaceEvenly, Stretch }
250
enum class AlignSelf { Auto, FlexStart, FlexEnd, Center, Baseline, Stretch }
251
```
252

253
### Grid Properties
254

255
CSS Grid layout system for complex layouts.
256

257
```kotlin { .api }
258
/**
259
 * Grid track definitions
260
 */
261
fun StyleScope.gridTemplateColumns(value: String)
262
fun StyleScope.gridTemplateRows(value: String)
263

264
/**
265
 * Named grid areas
266
 * @param value Grid area template string
267
 */
268
fun StyleScope.gridTemplateAreas(value: String)
269

270
/**
271
 * Grid item placement
272
 */
273
fun StyleScope.gridColumn(value: String)
274
fun StyleScope.gridRow(value: String)
275
fun StyleScope.gridColumnStart(value: String)
276
fun StyleScope.gridColumnEnd(value: String)
277
fun StyleScope.gridRowStart(value: String)
278
fun StyleScope.gridRowEnd(value: String)
279

280
/**
281
 * Named area placement
282
 * @param value Grid area name
283
 */
284
fun StyleScope.gridArea(value: String)
285

286
/**
287
 * Auto-placement algorithm
288
 * @param value GridAutoFlow direction
289
 */
290
fun StyleScope.gridAutoFlow(value: GridAutoFlow)
291

292
/**
293
 * Implicit track sizes
294
 */
295
fun StyleScope.gridAutoColumns(value: String)
296
fun StyleScope.gridAutoRows(value: String)
297

298
// Grid constants
299
enum class GridAutoFlow { Row, Column, RowDense, ColumnDense }
300
```
301

302
### Typography Properties
303

304
Text styling and typography properties.
305

306
```kotlin { .api }
307
/**
308
 * Font family stack
309
 * @param families Ordered list of font family names
310
 */
311
fun StyleScope.fontFamily(vararg families: String)
312

313
/**
314
 * Font size
315
 * @param value Font size value
316
 */
317
fun StyleScope.fontSize(value: CSSNumeric)
318

319
/**
320
 * Font weight
321
 * @param value Font weight (normal, bold, or 100-900)
322
 */
323
fun StyleScope.fontWeight(value: FontWeight)
324

325
/**
326
 * Font style
327
 * @param value FontStyle (Normal, Italic, Oblique)
328
 */
329
fun StyleScope.fontStyle(value: FontStyle)
330

331
/**
332
 * Line height
333
 * @param value Line height multiplier or absolute value
334
 */
335
fun StyleScope.lineHeight(value: CSSNumeric)
336

337
/**
338
 * Letter and word spacing
339
 */
340
fun StyleScope.letterSpacing(value: CSSNumeric)
341
fun StyleScope.wordSpacing(value: CSSNumeric)
342

343
/**
344
 * Text alignment
345
 * @param value TextAlign alignment
346
 */
347
fun StyleScope.textAlign(value: TextAlign)
348

349
/**
350
 * Text decoration (underline, etc.)
351
 * @param value Text decoration string
352
 */
353
fun StyleScope.textDecoration(value: String)
354

355
/**
356
 * Text case transformation  
357
 * @param value TextTransform case
358
 */
359
fun StyleScope.textTransform(value: TextTransform)
360

361
/**
362
 * Text overflow handling
363
 * @param value TextOverflow behavior
364
 */
365
fun StyleScope.textOverflow(value: TextOverflow)
366

367
/**
368
 * Whitespace handling
369
 * @param value WhiteSpace behavior
370
 */
371
fun StyleScope.whiteSpace(value: WhiteSpace)
372

373
/**
374
 * Word breaking rules
375
 * @param value WordBreak behavior
376
 */
377
fun StyleScope.wordBreak(value: WordBreak)
378

379
// Typography constants
380
enum class FontStyle { Normal, Italic, Oblique }
381
enum class TextAlign { Left, Right, Center, Justify, Start, End }
382
enum class TextTransform { None, Capitalize, Uppercase, Lowercase }
383
enum class TextOverflow { Clip, Ellipsis }
384
enum class WhiteSpace { Normal, Nowrap, Pre, PreWrap, PreLine }
385
enum class WordBreak { Normal, BreakAll, KeepAll }
386
```
387

388
### Color and Background Properties
389

390
Color, background, and opacity properties.
391

392
```kotlin { .api }
393
/**
394
 * Text color
395
 * @param value Color value
396
 */
397
fun StyleScope.color(value: CSSColorValue)
398

399
/**
400
 * Background color
401
 * @param value Color value
402
 */
403
fun StyleScope.backgroundColor(value: CSSColorValue)
404

405
/**
406
 * Background shorthand property
407
 * @param value Background value string
408
 */
409
fun StyleScope.background(value: String)
410

411
/**
412
 * Background image
413
 * @param value Background image URL or gradient
414
 */
415
fun StyleScope.backgroundImage(value: String)
416

417
/**
418
 * Background size
419
 * @param value Background size (cover, contain, or dimensions)
420
 */
421
fun StyleScope.backgroundSize(value: String)
422

423
/**
424
 * Background position
425
 * @param value Background position keywords or coordinates
426
 */
427
fun StyleScope.backgroundPosition(value: String)
428

429
/**
430
 * Background repetition
431
 * @param value BackgroundRepeat behavior
432
 */
433
fun StyleScope.backgroundRepeat(value: BackgroundRepeat)
434

435
/**
436
 * Background attachment
437
 * @param value BackgroundAttachment behavior
438
 */
439
fun StyleScope.backgroundAttachment(value: BackgroundAttachment)
440

441
/**
442
 * Element opacity
443
 * @param value Opacity value (0.0 to 1.0)
444
 */
445
fun StyleScope.opacity(value: Number)
446

447
// Background constants
448
enum class BackgroundRepeat { Repeat, RepeatX, RepeatY, NoRepeat, Space, Round }
449
enum class BackgroundAttachment { Scroll, Fixed, Local }
450
```
451

452
### CSS Units and Values
453

454
Type-safe units and value types for CSS properties.
455

456
```kotlin { .api }
457
/**
458
 * Length units
459
 */
460
val Number.px: CSSNumeric        // Pixels
461
val Number.em: CSSNumeric        // Em units (relative to font size)
462
val Number.rem: CSSNumeric       // Root em units
463
val Number.percent: CSSNumeric   // Percentage
464
val Number.vh: CSSNumeric        // Viewport height
465
val Number.vw: CSSNumeric        // Viewport width
466
val Number.vmin: CSSNumeric      // Viewport minimum
467
val Number.vmax: CSSNumeric      // Viewport maximum
468
val Number.ch: CSSNumeric        // Character width
469
val Number.ex: CSSNumeric        // X-height
470
val Number.cm: CSSNumeric        // Centimeters
471
val Number.mm: CSSNumeric        // Millimeters
472
val Number.inches: CSSNumeric    // Inches
473
val Number.pt: CSSNumeric        // Points
474
val Number.pc: CSSNumeric        // Picas
475

476
/**
477
 * Time units
478
 */
479
val Number.s: CSSNumeric         // Seconds
480
val Number.ms: CSSNumeric        // Milliseconds
481

482
/**
483
 * Angle units
484
 */
485
val Number.deg: CSSNumeric       // Degrees
486
val Number.rad: CSSNumeric       // Radians
487
val Number.grad: CSSNumeric      // Gradians
488
val Number.turn: CSSNumeric      // Turns
489

490
/**
491
 * Color creation functions
492
 */
493
fun Color(r: Number, g: Number, b: Number, a: Number = 1.0): CSSColorValue
494
fun rgb(r: Number, g: Number, b: Number): CSSColorValue
495
fun rgba(r: Number, g: Number, b: Number, a: Number): CSSColorValue
496
fun hsl(h: Number, s: Number, l: Number): CSSColorValue
497
fun hsla(h: Number, s: Number, l: Number, a: Number): CSSColorValue
498

499
/**
500
 * Named colors
501
 */
502
object Color {
503
    val red: CSSColorValue
504
    val green: CSSColorValue
505
    val blue: CSSColorValue
506
    val black: CSSColorValue
507
    val white: CSSColorValue
508
    val transparent: CSSColorValue
509
    val currentColor: CSSColorValue
510
    // ... many more named colors
511
}
512

513
/**
514
 * CSS keyword values
515
 */
516
object StyleKeywords {
517
    val auto: CSSKeyword
518
    val none: CSSKeyword
519
    val inherit: CSSKeyword
520
    val initial: CSSKeyword
521
    val unset: CSSKeyword
522
}
523
```
524

525
**Usage Examples:**
526

527
```kotlin
528
import org.jetbrains.compose.web.css.*
529
import org.jetbrains.compose.web.dom.*
530

531
// Inline styling
532
Div({
533
    style {
534
        display(DisplayStyle.Flex)
535
        flexDirection(FlexDirection.Column)
536
        gap(16.px)
537
        padding(20.px)
538
        backgroundColor(Color.lightgray)
539
        borderRadius(8.px)
540
        border(1.px, LineStyle.Solid, Color.gray)
541
    }
542
}) {
543
    H1({
544
        style {
545
            fontSize(24.px)
546
            fontWeight(FontWeight.Bold)
547
            color(Color.darkblue)
548
            marginBottom(16.px)
549
        }
550
    }) {
551
        Text("Flex Container")
552
    }
553
    
554
    P({
555
        style {
556
            lineHeight(1.5)
557
            textAlign(TextAlign.Justify)
558
        }
559
    }) {
560
        Text("This paragraph has custom line height and justified text alignment.")
561
    }
562
}
563

564
// Stylesheet approach
565
object AppStyles : StyleSheet() {
566
    val container by style {
567
        display(DisplayStyle.Grid)
568
        gridTemplateColumns("1fr 2fr 1fr")
569
        gridTemplateRows("auto 1fr auto")
570
        minHeight(100.vh)
571
        gap(20.px)
572
        padding(20.px)
573
    }
574
    
575
    val header by style {
576
        gridColumn("1 / -1")
577
        backgroundColor(Color.navy)
578
        color(Color.white)
579
        padding(20.px)
580
        textAlign(TextAlign.Center)
581
    }
582
    
583
    val sidebar by style {
584
        backgroundColor(Color.lightgray)
585
        padding(15.px)
586
        
587
        // Nested selector for links
588
        self + " a" {
589
            display(DisplayStyle.Block)
590
            padding(8.px)
591
            textDecoration("none")
592
            color(Color.darkblue)
593
        }
594
    }
595
}
596

597
// Using stylesheet classes
598
Div({ classes(AppStyles.container) }) {
599
    Header({ classes(AppStyles.header) }) {
600
        H1 { Text("My Website") }
601
    }
602
    
603
    Aside({ classes(AppStyles.sidebar) }) {
604
        A(href = "/home") { Text("Home") }
605
        A(href = "/about") { Text("About") }
606
    }
607
    
608
    Main {
609
        P { Text("Main content area") }
610
    }
611
}
612
```