Skip to main content
The Styles class provides a type-safe way to define inline CSS styles for HTML elements in Jaspr. It supports all common CSS properties with compile-time type checking.

​
Constructor

const Styles({
  // Box Properties
  All? all,
  String? content,
  Display? display,
  Position? position,
  ZIndex? zIndex,
  Unit? width,
  Unit? height,
  Unit? minWidth,
  Unit? minHeight,
  Unit? maxWidth,
  Unit? maxHeight,
  AspectRatio? aspectRatio,
  Padding? padding,
  Margin? margin,
  BoxSizing? boxSizing,
  Border? border,
  BorderRadius? radius,
  Outline? outline,
  double? opacity,
  Visibility? visibility,
  Overflow? overflow,
  Appearance? appearance,
  BoxShadow? shadow,
  Filter? filter,
  Filter? backdropFilter,
  Cursor? cursor,
  UserSelect? userSelect,
  PointerEvents? pointerEvents,
  Animation? animation,
  Transition? transition,
  Transform? transform,
  
  // Flexbox Properties
  FlexDirection? flexDirection,
  FlexWrap? flexWrap,
  JustifyContent? justifyContent,
  AlignItems? alignItems,
  AlignContent? alignContent,
  
  // Grid Properties
  GridTemplate? gridTemplate,
  List<TrackSize>? autoRows,
  List<TrackSize>? autoColumns,
  JustifyItems? justifyItems,
  Gap? gap,
  
  // Flex/Grid Item Properties
  Flex? flex,
  int? order,
  AlignSelf? alignSelf,
  JustifySelf? justifySelf,
  GridPlacement? gridPlacement,
  
  // List Properties
  ListStyle? listStyle,
  ImageStyle? listImage,
  ListStylePosition? listPosition,
  
  // Text Properties
  Color? color,
  TextAlign? textAlign,
  FontFamily? fontFamily,
  Unit? fontSize,
  FontWeight? fontWeight,
  FontStyle? fontStyle,
  TextDecoration? textDecoration,
  TextTransform? textTransform,
  Unit? textIndent,
  Unit? letterSpacing,
  Unit? wordSpacing,
  Unit? lineHeight,
  TextShadow? textShadow,
  TextOverflow? textOverflow,
  WhiteSpace? whiteSpace,
  Quotes? quotes,
  
  // Background Properties
  Color? backgroundColor,
  ImageStyle? backgroundImage,
  BackgroundOrigin? backgroundOrigin,
  BackgroundPosition? backgroundPosition,
  BackgroundAttachment? backgroundAttachment,
  BackgroundRepeat? backgroundRepeat,
  BackgroundSize? backgroundSize,
  BackgroundClip? backgroundClip,
  
  // Raw Styles
  Map<String, String>? raw,
})

​
Basic Usage

import 'package:jaspr/html.dart';

div(
  [Component.text('Styled content')],
  styles: Styles(
    padding: Padding.all(16.px),
    backgroundColor: Colors.blue,
    color: Colors.white,
  ),
)

​
Box Properties

​
Dimensions

​
width
Unit?
Element width using CSS units (px, em, rem, %, vh, vw, etc.)
width: 300.px
width: 50.percent
width: 100.vw
​
height
Unit?
Element height.
height: 200.px
height: 100.percent
​
minWidth
Unit?
Minimum width constraint.
​
maxWidth
Unit?
Maximum width constraint.
​
minHeight
Unit?
Minimum height constraint.
​
maxHeight
Unit?
Maximum height constraint.
​
aspectRatio
AspectRatio?
Aspect ratio of the element.
aspectRatio: AspectRatio(16, 9)

​
Spacing

​
padding
Padding?
Inner spacing around content.
padding: Padding.all(16.px)
padding: Padding.symmetric(horizontal: 20.px, vertical: 10.px)
padding: Padding.only(left: 8.px, top: 4.px)
​
margin
Margin?
Outer spacing around element.
margin: Margin.all(16.px)
margin: Margin.symmetric(horizontal: 20.px, vertical: 10.px)
margin: Margin.zero()

​
Display & Position

​
display
Display?
Display mode of the element.
display: Display.flex
display: Display.grid
display: Display.block
display: Display.inlineBlock
display: Display.none
​
position
Position?
Positioning scheme.
position: Position.relative(top: 10.px, left: 20.px)
position: Position.absolute(top: 0.px, right: 0.px)
position: Position.fixed(bottom: 10.px)
position: Position.sticky(top: 0.px)
​
zIndex
ZIndex?
Stack order of positioned elements.
zIndex: ZIndex(10)

​
Borders & Outlines

​
border
Border?
Element border.
border: Border.all(BorderSide(color: Colors.grey, width: 1.px))
border: Border.only(
  top: BorderSide(color: Colors.blue, width: 2.px),
  bottom: BorderSide(color: Colors.blue, width: 2.px),
)
border: Border.none()
​
radius
BorderRadius?
Border corner radius.
radius: BorderRadius.all(Radius.circular(8.px))
radius: BorderRadius.only(
  topLeft: Radius.circular(4.px),
  topRight: Radius.circular(4.px),
)
​
outline
Outline?
Outline around element (doesn’t affect layout).
outline: Outline(color: Colors.blue, width: 2.px)

​
Visual Effects

​
opacity
double?
Transparency level (0.0 to 1.0).
opacity: 0.5
​
shadow
BoxShadow?
Drop shadow effect.
shadow: BoxShadow(
  color: Colors.black.withAlpha(0.2),
  blurRadius: 10.px,
  offset: Offset(0.px, 2.px),
)
​
filter
Filter?
Visual filters like blur, brightness, etc.
filter: Filter.blur(5.px)
filter: Filter.brightness(1.2)
​
transform
Transform?
2D/3D transformations.
transform: Transform.rotate(45.deg)
transform: Transform.scale(1.5)
transform: Transform.translate(10.px, 20.px)

​
Text Properties

​
color
Color?
Text color.
color: Colors.blue
color: Color.hex('#FF5733')
color: Color.rgb(255, 87, 51)
​
fontSize
Unit?
Font size.
fontSize: 16.px
fontSize: 1.2.rem
​
fontWeight
FontWeight?
Font weight/thickness.
fontWeight: FontWeight.bold
fontWeight: FontWeight.w500
fontWeight: FontWeight.normal
​
fontFamily
FontFamily?
Font family.
fontFamily: FontFamily('Arial, sans-serif')
fontFamily: FontFamily.list(['Roboto', 'Helvetica', 'sans-serif'])
​
textAlign
TextAlign?
Horizontal text alignment.
textAlign: TextAlign.center
textAlign: TextAlign.left
textAlign: TextAlign.right
textAlign: TextAlign.justify
​
lineHeight
Unit?
Line height/spacing.
lineHeight: 1.5
lineHeight: 24.px

​
Flexbox Properties

​
flexDirection
FlexDirection?
Main axis direction.
flexDirection: FlexDirection.row
flexDirection: FlexDirection.column
​
justifyContent
JustifyContent?
Alignment along main axis.
justifyContent: JustifyContent.center
justifyContent: JustifyContent.spaceBetween
​
alignItems
AlignItems?
Alignment along cross axis.
alignItems: AlignItems.center
alignItems: AlignItems.stretch
​
gap
Gap?
Spacing between flex/grid items.
gap: Gap.all(16.px)
gap: Gap.symmetric(row: 20.px, column: 10.px)

​
Background Properties

​
backgroundColor
Color?
Background color.
backgroundColor: Colors.white
backgroundColor: Color.hex('#F0F0F0')
​
backgroundImage
ImageStyle?
Background image.
backgroundImage: ImageStyle.url('/images/bg.jpg')
​
backgroundSize
BackgroundSize?
How background image is sized.
backgroundSize: BackgroundSize.cover
backgroundSize: BackgroundSize.contain

​
Combining Styles

// Using Styles.combine()
final baseStyles = Styles(
  padding: Padding.all(16.px),
  backgroundColor: Colors.white,
);

final combinedStyles = Styles.combine([
  baseStyles,
  Styles(border: Border.all(BorderSide(color: Colors.grey, width: 1.px))),
]);

​
Raw CSS Properties

​
raw
Map<String, String>?
Add any CSS property not covered by the type-safe API.
raw: {
  'backdrop-filter': 'blur(10px)',
  '-webkit-appearance': 'none',
}

​
Complete Example

import 'package:jaspr/html.dart';

class Card extends StatelessComponent {
  @override
  Component build(BuildContext context) {
    return div(
      [
        h2(
          [Component.text('Card Title')],
          styles: Styles(
            fontSize: 24.px,
            fontWeight: FontWeight.bold,
            margin: Margin.only(bottom: 8.px),
          ),
        ),
        p(
          [Component.text('Card content goes here')],
          styles: Styles(
            color: Colors.grey.shade700,
            lineHeight: 1.6,
          ),
        ),
      ],
      styles: Styles(
        padding: Padding.all(24.px),
        backgroundColor: Colors.white,
        border: Border.all(BorderSide(color: Colors.grey.shade300, width: 1.px)),
        radius: BorderRadius.all(Radius.circular(8.px)),
        shadow: BoxShadow(
          color: Colors.black.withAlpha(0.1),
          blurRadius: 10.px,
          offset: Offset(0.px, 2.px),
        ),
      ),
    );
  }
}

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us