0
# CSS Styling
1

2
Type-safe CSS-in-Kotlin system providing comprehensive property support, units, responsive design capabilities, and advanced styling features including flexbox, grid, animations, and custom properties.
3

4
## Core Imports
5

6
```kotlin
7
import org.jetbrains.compose.web.css.*
8
import org.jetbrains.compose.web.css.selectors.*
9
import org.jetbrains.compose.web.attributes.*
10
```
11

12
## Capabilities
13

14
### CSS Units and Values
15

16
Type-safe CSS units with extension properties for numeric values and comprehensive unit support.
17

18
```kotlin { .api }
19
/**
20
 * Base interface for all CSS numeric values
21
 */
22
interface CSSNumericValue<T>
23

24
/**
25
 * Interface for CSS values with units
26
 */
27
interface CSSSizeValue<T> : CSSNumericValue<T>
28

29
/**
30
 * Typed CSS unit value implementation
31
 */
32
class CSSUnitValueTyped<T>(val value: Number, val unit: String) : CSSSizeValue<T>
33

34
// Unit type interfaces
35
interface CSSUnitLength
36
interface CSSUnitPercentage
37
interface CSSUnitAngle
38
interface CSSUnitTime
39
interface CSSUnitFrequency
40
interface CSSUnitResolution
41
interface CSSUnitFlex
42
```
43

44
**Length Units:**
45

46
```kotlin { .api }
47
/**
48
 * Pixel units - absolute length
49
 */
50
val Number.px: CSSSizeValue<CSSUnitLength>
51

52
/**
53
 * Em units - relative to element's font size
54
 */
55
val Number.em: CSSSizeValue<CSSUnitLength>
56

57
/**
58
 * Rem units - relative to root element's font size
59
 */
60
val Number.cssRem: CSSSizeValue<CSSUnitLength>
61

62
/**
63
 * Viewport units
64
 */
65
val Number.vw: CSSSizeValue<CSSUnitLength> // viewport width
66
val Number.vh: CSSSizeValue<CSSUnitLength> // viewport height
67
val Number.vmin: CSSSizeValue<CSSUnitLength> // viewport minimum
68
val Number.vmax: CSSSizeValue<CSSUnitLength> // viewport maximum
69

70
/**
71
 * Absolute units
72
 */
73
val Number.cm: CSSSizeValue<CSSUnitLength> // centimeters
74
val Number.mm: CSSSizeValue<CSSUnitLength> // millimeters
75
val Number.pt: CSSSizeValue<CSSUnitLength> // points
76
val Number.pc: CSSSizeValue<CSSUnitLength> // picas
77
```
78

79
**Other Units:**
80

81
```kotlin { .api }
82
/**
83
 * Percentage units
84
 */
85
val Number.percent: CSSSizeValue<CSSUnitPercentage>
86

87
/**
88
 * Angle units
89
 */
90
val Number.deg: CSSSizeValue<CSSUnitAngle> // degrees
91
val Number.rad: CSSSizeValue<CSSUnitAngle> // radians
92
val Number.turn: CSSSizeValue<CSSUnitAngle> // turns
93

94
/**
95
 * Time units
96
 */
97
val Number.s: CSSSizeValue<CSSUnitTime> // seconds
98
val Number.ms: CSSSizeValue<CSSUnitTime> // milliseconds
99

100
/**
101
 * Flex units
102
 */
103
val Number.fr: CSSSizeValue<CSSUnitFlex> // flex fraction
104
```
105

106
**Usage Examples:**
107

108
```kotlin
109
style {
110
    width(300.px)
111
    height(50.vh)
112
    margin(1.em)
113
    padding(16.px, 24.px)
114
    fontSize(1.2.cssRem)
115
    borderRadius(8.px)
116
}
117
```
118

119
### Color System
120

121
Comprehensive color support with RGB, HSL, and named color values.
122

123
```kotlin { .api }
124
/**
125
 * Base interface for CSS color values
126
 */
127
interface CSSColorValue
128

129
/**
130
 * RGB color class with numeric values
131
 */
132
class Color(val red: Int, val green: Int, val blue: Int) : CSSColorValue
133

134
/**
135
 * Create RGB color
136
 */
137
fun rgb(r: Number, g: Number, b: Number): Color
138

139
/**
140
 * Create RGBA color with alpha transparency
141
 */
142
fun rgba(r: Number, g: Number, b: Number, a: Number): Color
143

144
/**
145
 * Create HSL color
146
 */
147
fun hsl(h: Number, s: Number, l: Number): CSSColorValue
148

149
/**
150
 * Create HSLA color with alpha transparency
151
 */
152
fun hsla(h: Number, s: Number, l: Number, a: Number): CSSColorValue
153
```
154

155
**Color Keywords:**
156

157
```kotlin { .api }
158
// Common color constants
159
object Color {
160
    val red: CSSColorValue
161
    val green: CSSColorValue
162
    val blue: CSSColorValue
163
    val white: CSSColorValue
164
    val black: CSSColorValue
165
    val gray: CSSColorValue
166
    val lightgray: CSSColorValue
167
    val darkgray: CSSColorValue
168
    val yellow: CSSColorValue
169
    val orange: CSSColorValue
170
    val purple: CSSColorValue
171
    val pink: CSSColorValue
172
    val brown: CSSColorValue
173
    val cyan: CSSColorValue
174
    val magenta: CSSColorValue
175
    val lime: CSSColorValue
176
    val transparent: CSSColorValue
177
}
178

179
// CSS keywords
180
val inherit: CSSColorValue
181
val initial: CSSColorValue
182
val unset: CSSColorValue
183
val auto: CSSAutoKeyword
184
```
185

186
### Style Scope and Properties
187

188
Core styling interface providing access to all CSS properties with type safety.
189

190
```kotlin { .api }
191
/**
192
 * Main interface for CSS property declarations
193
 */
194
interface StyleScope {
195
    
196
    // Box model properties
197
    fun width(value: CSSNumeric)
198
    fun height(value: CSSNumeric)
199
    fun minWidth(value: CSSNumeric)
200
    fun maxWidth(value: CSSNumeric)
201
    fun minHeight(value: CSSNumeric)
202
    fun maxHeight(value: CSSNumeric)
203
    fun boxSizing(value: String)
204
    
205
    // Layout properties
206
    fun display(displayStyle: DisplayStyle)
207
    fun position(value: String)
208
    fun top(value: CSSNumeric)
209
    fun right(value: CSSNumeric)
210
    fun bottom(value: CSSNumeric)
211
    fun left(value: CSSNumeric)
212
    fun zIndex(value: Number)
213
    
214
    // Spacing properties
215
    fun margin(value: CSSNumeric)
216
    fun margin(vertical: CSSNumeric, horizontal: CSSNumeric)
217
    fun margin(top: CSSNumeric, horizontal: CSSNumeric, bottom: CSSNumeric)
218
    fun margin(top: CSSNumeric, right: CSSNumeric, bottom: CSSNumeric, left: CSSNumeric)
219
    fun marginTop(value: CSSNumeric)
220
    fun marginRight(value: CSSNumeric)
221
    fun marginBottom(value: CSSNumeric)
222
    fun marginLeft(value: CSSNumeric)
223
    
224
    fun padding(value: CSSNumeric)
225
    fun padding(vertical: CSSNumeric, horizontal: CSSNumeric)
226
    fun padding(top: CSSNumeric, horizontal: CSSNumeric, bottom: CSSNumeric)
227
    fun padding(top: CSSNumeric, right: CSSNumeric, bottom: CSSNumeric, left: CSSNumeric)
228
    fun paddingTop(value: CSSNumeric)
229
    fun paddingRight(value: CSSNumeric)
230
    fun paddingBottom(value: CSSNumeric)
231
    fun paddingLeft(value: CSSNumeric)
232
}
233
```
234

235
**Usage Examples:**
236

237
```kotlin
238
style {
239
    // Box model
240
    width(100.percent)
241
    height(400.px)
242
    boxSizing("border-box")
243
    
244
    // Layout
245
    display(DisplayStyle.flex)
246
    position("relative")
247
    zIndex(10)
248
    
249
    // Spacing - shorthand forms
250
    margin(16.px) // all sides
251
    padding(8.px, 16.px) // vertical, horizontal
252
    
253
    // Spacing - individual sides
254
    marginTop(20.px)
255
    paddingLeft(12.px)
256
}
257
```
258

259
### Typography Properties
260

261
Comprehensive text styling with font management, text alignment, and text effects.
262

263
```kotlin { .api }
264
interface StyleScope {
265
    // Font properties
266
    fun fontSize(value: CSSNumeric)
267
    fun fontFamily(value: String)
268
    fun fontWeight(value: String)
269
    fun fontWeight(value: Number)
270
    fun fontStyle(value: String)
271
    fun lineHeight(value: CSSNumeric)
272
    fun lineHeight(value: Number)
273
    
274
    // Text properties
275
    fun color(value: CSSColorValue)
276
    fun textAlign(value: String)
277
    fun textDecoration(value: String)
278
    fun textTransform(value: String)
279
    fun letterSpacing(value: CSSNumeric)
280
    fun wordSpacing(value: CSSNumeric)
281
    fun textIndent(value: CSSNumeric)
282
    fun whiteSpace(value: String)
283
    fun wordBreak(value: String)
284
    fun overflowWrap(value: String)
285
}
286
```
287

288
**Usage Examples:**
289

290
```kotlin
291
style {
292
    // Font styling
293
    fontSize(18.px)
294
    fontFamily("'Helvetica Neue', Arial, sans-serif")
295
    fontWeight("bold")
296
    fontStyle("italic")
297
    lineHeight(1.5)
298
    
299
    // Text styling
300
    color(Color.darkblue)
301
    textAlign("center")
302
    textDecoration("underline")
303
    letterSpacing(0.5.px)
304
    
305
    // Text behavior
306
    whiteSpace("nowrap")
307
    wordBreak("break-word")
308
}
309
```
310

311
### Background Properties
312

313
Background styling including colors, images, gradients, and positioning.
314

315
```kotlin { .api }
316
interface StyleScope {
317
    fun backgroundColor(value: CSSColorValue)
318
    fun backgroundImage(value: String)
319
    fun backgroundPosition(value: String)
320
    fun backgroundSize(value: String)
321
    fun backgroundRepeat(value: String)
322
    fun backgroundAttachment(value: String)
323
    fun backgroundClip(value: String)
324
    fun backgroundOrigin(value: String)
325
    fun background(value: String) // shorthand
326
}
327
```
328

329
**Usage Examples:**
330

331
```kotlin
332
style {
333
    backgroundColor(Color.lightblue)
334
    backgroundImage("url('background.jpg')")
335
    backgroundSize("cover")
336
    backgroundPosition("center")
337
    backgroundRepeat("no-repeat")
338
    
339
    // Gradient background
340
    backgroundImage("linear-gradient(45deg, #ff0000, #0000ff)")
341
}
342
```
343

344
### Border Properties
345

346
Border styling with individual border control, radius, and border images.
347

348
```kotlin { .api }
349
interface StyleScope {
350
    // Border shorthand
351
    fun border(width: CSSNumeric, style: String, color: CSSColorValue)
352
    fun border(value: String)
353
    
354
    // Individual border properties
355
    fun borderWidth(value: CSSNumeric)
356
    fun borderStyle(value: String)
357
    fun borderColor(value: CSSColorValue)
358
    fun borderRadius(value: CSSNumeric)
359
    fun borderRadius(topLeft: CSSNumeric, topRight: CSSNumeric, bottomRight: CSSNumeric, bottomLeft: CSSNumeric)
360
    
361
    // Side-specific borders
362
    fun borderTop(width: CSSNumeric, style: String, color: CSSColorValue)
363
    fun borderRight(width: CSSNumeric, style: String, color: CSSColorValue)
364
    fun borderBottom(width: CSSNumeric, style: String, color: CSSColorValue)
365
    fun borderLeft(width: CSSNumeric, style: String, color: CSSColorValue)
366
    
367
    // Individual side properties
368
    fun borderTopWidth(value: CSSNumeric)
369
    fun borderTopStyle(value: String)
370
    fun borderTopColor(value: CSSColorValue)
371
    // ... similar for right, bottom, left
372
}
373
```
374

375
**Usage Examples:**
376

377
```kotlin
378
style {
379
    // Complete border
380
    border(2.px, "solid", Color.gray)
381
    borderRadius(8.px)
382
    
383
    // Individual borders
384
    borderTop(1.px, "solid", Color.lightgray)
385
    borderBottom(3.px, "dashed", Color.red)
386
    
387
    // Rounded corners - individual control
388
    borderRadius(4.px, 8.px, 4.px, 8.px)
389
}
390
```
391

392
### Flexbox Properties
393

394
Complete flexbox layout system with container and item properties.
395

396
```kotlin { .api }
397
interface StyleScope {
398
    // Flex container properties
399
    fun display(value: DisplayStyle.flex)
400
    fun flexDirection(value: String) // "row", "column", "row-reverse", "column-reverse"
401
    fun flexWrap(value: String) // "nowrap", "wrap", "wrap-reverse"
402
    fun justifyContent(value: String) // "flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly"
403
    fun alignItems(value: String) // "stretch", "flex-start", "flex-end", "center", "baseline"
404
    fun alignContent(value: String) // "stretch", "flex-start", "flex-end", "center", "space-between", "space-around"
405
    fun gap(value: CSSNumeric)
406
    fun rowGap(value: CSSNumeric)
407
    fun columnGap(value: CSSNumeric)
408
    
409
    // Flex item properties
410
    fun flex(value: String) // shorthand
411
    fun flex(grow: Number, shrink: Number, basis: CSSNumeric)
412
    fun flexGrow(value: Number)
413
    fun flexShrink(value: Number)
414
    fun flexBasis(value: CSSNumeric)
415
    fun alignSelf(value: String)
416
    fun order(value: Number)
417
}
418
```
419

420
**Usage Examples:**
421

422
```kotlin
423
style {
424
    // Flex container
425
    display(DisplayStyle.flex)
426
    flexDirection("row")
427
    justifyContent("space-between")
428
    alignItems("center")
429
    gap(16.px)
430
    
431
    // Flex item
432
    flex(1, 0, 200.px) // grow, shrink, basis
433
    alignSelf("flex-start")
434
}
435
```
436

437
### Grid Properties
438

439
CSS Grid layout system with comprehensive grid container and item controls.
440

441
```kotlin { .api }
442
interface StyleScope {
443
    // Grid container properties
444
    fun display(value: DisplayStyle.grid)
445
    fun gridTemplateColumns(value: String)
446
    fun gridTemplateRows(value: String)
447
    fun gridTemplateAreas(value: String)
448
    fun gridTemplate(value: String) // shorthand
449
    fun columnGap(value: CSSNumeric)
450
    fun rowGap(value: CSSNumeric)
451
    fun gap(value: CSSNumeric)
452
    fun justifyItems(value: String)
453
    fun alignItems(value: String)
454
    fun justifyContent(value: String)
455
    fun alignContent(value: String)
456
    fun gridAutoColumns(value: String)
457
    fun gridAutoRows(value: String)
458
    fun gridAutoFlow(value: String)
459
    
460
    // Grid item properties
461
    fun gridColumn(value: String)
462
    fun gridRow(value: String)
463
    fun gridColumnStart(value: String)
464
    fun gridColumnEnd(value: String)
465
    fun gridRowStart(value: String)
466
    fun gridRowEnd(value: String)
467
    fun gridArea(value: String)
468
    fun justifySelf(value: String)
469
    fun alignSelf(value: String)
470
}
471
```
472

473
**Usage Examples:**
474

475
```kotlin
476
style {
477
    // Grid container
478
    display(DisplayStyle.grid)
479
    gridTemplateColumns("repeat(3, 1fr)")
480
    gridTemplateRows("auto 1fr auto")
481
    gap(20.px)
482
    
483
    // Grid areas
484
    gridTemplateAreas("""
485
        "header header header"
486
        "sidebar main main"
487
        "footer footer footer"
488
    """.trimIndent())
489
}
490

491
// Grid item
492
style {
493
    gridColumn("1 / 3") // span from column 1 to 3
494
    gridRow("2")
495
    justifySelf("center")
496
}
497
```
498

499
### Visual Effects
500

501
Advanced visual properties including opacity, visibility, transforms, and filters.
502

503
```kotlin { .api }
504
interface StyleScope {
505
    // Visibility and opacity
506
    fun opacity(value: Number)
507
    fun visibility(value: String) // "visible", "hidden", "collapse"
508
    fun overflow(value: String) // "visible", "hidden", "scroll", "auto"
509
    fun overflowX(value: String)
510
    fun overflowY(value: String)
511
    
512
    // Transforms
513
    fun transform(value: String)
514
    fun transformOrigin(value: String)
515
    fun transformStyle(value: String)
516
    fun perspective(value: CSSNumeric)
517
    fun perspectiveOrigin(value: String)
518
    fun backfaceVisibility(value: String)
519
    
520
    // Filters
521
    fun filter(value: String)
522
    fun backdropFilter(value: String)
523
    
524
    // Clipping and masking
525
    fun clipPath(value: String)
526
    fun mask(value: String)
527
}
528
```
529

530
**Usage Examples:**
531

532
```kotlin
533
style {
534
    // Basic effects
535
    opacity(0.8)
536
    overflow("hidden")
537
    
538
    // Transforms
539
    transform("rotate(45deg) scale(1.2)")
540
    transformOrigin("center")
541
    
542
    // Filters
543
    filter("blur(5px) brightness(1.2)")
544
    
545
    // Clipping
546
    clipPath("circle(50%)")
547
}
548
```
549

550
### Animation and Transitions
551

552
CSS animations and transitions with comprehensive timing and control options.
553

554
```kotlin { .api }
555
interface StyleScope {
556
    // Transitions
557
    fun transition(value: String) // shorthand
558
    fun transitionProperty(value: String)
559
    fun transitionDuration(value: CSSTimeValue)
560
    fun transitionTimingFunction(value: String)
561
    fun transitionDelay(value: CSSTimeValue)
562
    
563
    // Animations
564
    fun animation(value: String) // shorthand
565
    fun animationName(value: String)
566
    fun animationDuration(value: CSSTimeValue)
567
    fun animationTimingFunction(value: String)
568
    fun animationDelay(value: CSSTimeValue)
569
    fun animationIterationCount(value: String)
570
    fun animationDirection(value: String)
571
    fun animationFillMode(value: String)
572
    fun animationPlayState(value: String)
573
}
574
```
575

576
**Usage Examples:**
577

578
```kotlin
579
style {
580
    // Simple transition
581
    transition("all 0.3s ease-in-out")
582
    
583
    // Detailed transition
584
    transitionProperty("opacity, transform")
585
    transitionDuration(300.ms)
586
    transitionTimingFunction("cubic-bezier(0.4, 0, 0.2, 1)")
587
    
588
    // Animation
589
    animation("slideIn 1s ease-out")
590
    animationIterationCount("infinite")
591
}
592
```
593

594
### CSS Builders and Management
595

596
Tools for building and managing CSS rules, stylesheets, and dynamic styling.
597

598
```kotlin { .api }
599
/**
600
 * Interface for building CSS rules
601
 */
602
interface StyleSheetBuilder {
603
    fun rule(selector: String, block: StyleScope.() -> Unit)
604
    fun media(query: String, block: StyleSheetBuilder.() -> Unit)
605
    fun keyframes(name: String, block: CSSKeyframesBuilder.() -> Unit)
606
}
607

608
/**
609
 * CSS stylesheet with generated class names
610
 */
611
abstract class StyleSheet {
612
    protected fun style(block: StyleScope.() -> Unit): String // returns generated class name
613
}
614

615
/**
616
 * CSS rules holder for managing collections of styles
617
 */
618
interface CSSRulesHolder {
619
    val cssRules: CSSRuleDeclarationList
620
}
621

622
/**
623
 * Create inline styles within component attributes
624
 */
625
fun AttrsScope<*>.style(builder: StyleScope.() -> Unit)
626

627
/**
628
 * Mount CSS rules in component
629
 */
630
@Composable
631
fun Style(cssRules: CSSRuleDeclarationList)
632

633
/**
634
 * Build and mount CSS rules inline
635
 */
636
@Composable
637
fun Style(rulesBuild: StyleSheetBuilder.() -> Unit)
638
```
639

640
**Usage Examples:**
641

642
```kotlin
643
// Inline styles
644
Div({
645
    style {
646
        backgroundColor(Color.lightblue)
647
        padding(16.px)
648
        borderRadius(8.px)
649
    }
650
}) {
651
    Text("Styled content")
652
}
653

654
// Stylesheet approach
655
object AppStyles : StyleSheet() {
656
    val container by style {
657
        maxWidth(1200.px)
658
        margin(0.px, "auto".unsafeCast<CSSNumeric>())
659
        padding(20.px)
660
    }
661
    
662
    val button by style {
663
        backgroundColor(Color.blue)
664
        color(Color.white)
665
        border(0.px)
666
        padding(8.px, 16.px)
667
        borderRadius(4.px)
668
        cursor("pointer")
669
    }
670
}
671

672
// Using stylesheet classes
673
Div({ classes(AppStyles.container) }) {
674
    Button({ classes(AppStyles.button) }) {
675
        Text("Styled Button")
676
    }
677
}
678
```
679

680
## Types
681

682
```kotlin { .api }
683
typealias CSSNumeric = CSSNumericValue<*>
684

685
sealed class DisplayStyle {
686
    object block : DisplayStyle()
687
    object inline : DisplayStyle()
688
    object flex : DisplayStyle()
689
    object grid : DisplayStyle()
690
    object none : DisplayStyle()
691
    // ... other display values
692
}
693

694
interface CSSRuleDeclarationList
695
interface CSSKeyframesBuilder
696
interface CSSTimeValue : CSSNumericValue<CSSUnitTime>
697
```