CSS Styling

Azul uses CSS for styling UI elements. This guide covers supported properties and patterns.

Inline Styles

Apply styles directly to elements:

Dom::div()
    .with_inline_style("
        padding: 20px;
        margin: 10px;
        background: #f5f5f5;
        border-radius: 8px;
        color: #333;
    ")

Flexbox Layout

Azul supports Flexbox for layout:

// Horizontal layout
Dom::div()
    .with_inline_style("display: flex; flex-direction: row; gap: 10px;")
    .with_children(vec![
        Dom::text("Item 1"),
        Dom::text("Item 2"),
        Dom::text("Item 3"),
    ].into())

// Vertical layout
Dom::div()
    .with_inline_style("display: flex; flex-direction: column; gap: 10px;")

Flexbox Properties

Property	Values
display	flex, block, inline, none
flex-direction	row, column, row-reverse, column-reverse
flex-wrap	nowrap, wrap, wrap-reverse
justify-content	flex-start, flex-end, center, space-between, space-around
align-items	flex-start, flex-end, center, stretch, baseline
align-content	flex-start, flex-end, center, stretch, space-between, space-around
gap	<length>

Box Model

Dom::div()
    .with_inline_style("
        width: 200px;
        height: 100px;
        padding: 10px 20px;
        margin: 5px;
        border: 2px solid #ccc;
        border-radius: 8px;
        box-sizing: border-box;
    ")

Typography

Dom::div()
    .with_inline_style("
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-size: 16px;
        font-weight: bold;
        font-style: italic;
        line-height: 1.5;
        text-align: center;
        text-decoration: underline;
        color: #333;
    ")

Colors

Supported formats:

color: #ff0000;           /* Hex */
color: #f00;              /* Short hex */
color: rgb(255, 0, 0);    /* RGB */
color: rgba(255, 0, 0, 0.5); /* RGBA */
background: red;          /* Named colors */

Backgrounds

Dom::div()
    .with_inline_style("
        background: #f5f5f5;
        background-color: white;
        background-image: linear-gradient(to bottom, #fff, #eee);
    ")

Borders

Dom::div()
    .with_inline_style("
        border: 1px solid #ccc;
        border-top: 2px solid #4a90e2;
        border-radius: 8px;
        border-top-left-radius: 4px;
    ")

Shadows

Dom::div()
    .with_inline_style("
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    ")

Overflow and Scrolling

Dom::div()
    .with_inline_style("
        height: 200px;
        overflow: auto;      /* Scroll when needed */
        overflow-x: hidden;  /* Hide horizontal */
        overflow-y: scroll;  /* Always show vertical */
    ")

Positioning

// Relative positioning
Dom::div()
    .with_inline_style("position: relative; top: 10px; left: 20px;")

// Absolute positioning
Dom::div()
    .with_inline_style("position: absolute; top: 0; right: 0;")

Hover and Active States

Add dynamic styles using add_hover_css_property and add_active_css_property:

use azul_css::props::{
    basic::color::ColorU,
    property::CssProperty,
    style::background::{StyleBackgroundContent, StyleBackgroundContentVec},
};

const HOVER_BG: [StyleBackgroundContent; 1] = [StyleBackgroundContent::Color(ColorU {
    r: 200, g: 200, b: 200, a: 255,
})];

let mut button = Dom::div()
    .with_inline_style("background: #e0e0e0; cursor: pointer;")
    .with_child(Dom::text("Hover me"));

button.root.add_hover_css_property(CssProperty::BackgroundContent(
    StyleBackgroundContentVec::from_const_slice(&HOVER_BG).into(),
));

Cursor Styles

Dom::div()
    .with_inline_style("cursor: pointer;")  // Hand cursor
    .with_inline_style("cursor: text;")     // Text cursor
    .with_inline_style("cursor: move;")     // Move cursor

Units

Unit	Description
px	Pixels
%	Percentage of parent
em	Relative to font size
rem	Relative to root font size
vh	Viewport height
vw	Viewport width

calc() Function

Dom::div()
    .with_inline_style("
        width: calc(100% - 40px);
        height: calc(100vh - 60px);
    ")

Supported Properties Reference

Layout

• display, position, top, right, bottom, left
• width, height, min-width, max-width, min-height, max-height
• margin, padding (and all variants)
• flex, flex-direction, flex-wrap, flex-grow, flex-shrink, flex-basis
• justify-content, align-items, align-self, align-content
• grid-template-columns, grid-template-rows, grid-column, grid-row, gap

Visual

• background, background-color, background-image
• border, border-radius, box-shadow
• color, opacity
• overflow, overflow-x, overflow-y

Typography

• font-family, font-size, font-weight, font-style
• line-height, text-align, text-decoration

Interaction

• cursor, user-select

Back to overview