---
sidebar_position: 3
---
# CSS Standard
Gurted implements a **utility-first CSS approach** similar to Tailwind CSS, but rendered natively through Flumi. This allows for rapid styling without writing custom CSS rules while maintaining native performance.
## CSS Integration
CSS can be included in Gurted documents through multiple methods:
```html
```
The `name` attribute is used to reference the font in styles. The `weight` attribute can be used to specify the font weight.
```html
```
### Font Styling
Text decoration and weight control visual emphasis:
```html
Bold text - Makes text thicker and more prominent
Italic text - Slants text for emphasis or citations
Underlined text - Adds line below text, commonly used for links
Combined styles - Multiple decorations applied together
```
### Text Alignment
Controls how text is positioned within its container:
```html
Left aligned text - Text starts from the left edge (default)
Center aligned text - Text is centered horizontally
Right aligned text - Text aligns to the right edge
Justified text - Text spreads across full width with even spacing
```
## Colors
### Understanding Color Systems
Gurted supports two color systems: **hex and RGB values** for precise colors and **predefined colors** for consistency.
**Hex Colors** use # followed by 6 characters (0-9, A-F) representing Red, Green, Blue values:
- `#ff0000` = Pure red (ff=255 red, 00=0 green, 00=0 blue)
- `#00ff00` = Pure green
- `#0000ff` = Pure blue
- `#ffffff` = White (maximum all colors)
- `#000000` = Black (no color)
**RGB Colors** use `rgb(r, g, b)` format where `r`, `g`, `b` are values from `0` to `255`:
```html
Red text - Using RGB format
Green text - Using RGB format
Blue text - Using RGB format
```
`rgba(r, g, b, a)` is also supported, where `a` is the alpha channel for transparency (0-1 range)
### Text Colors
Control the color of text content:
```html
Red text - Bright red using hex value
Blue text - Modern blue shade
Green text - Professional green tone
Red 500 - Medium intensity red from palette
Blue 600 - Slightly darker blue
Green 400 - Lighter green tone
Gray 700 - Dark gray for readable text
Slate 800 - Very dark blue-gray
```
### Background Colors
Same color system applies to element backgrounds:
```html
Light gray background - Almost white with slight blue tint
Dark background - Dark blue-gray, needs white text
Light red background - Very light red tint
Blue background - Medium blue, needs white text for contrast
Green background - Darker green, needs white text
```
### Available Colors
Colors are formed by their name and their shade, example: `text-red-500` or `bg-blue-300`.
**Color shade scale (50-950):**
- **50-200**: Very light tints, good for backgrounds
- **300-400**: Light colors, good for subtle accents
- **500-600**: Medium colors, good for primary elements
- **700-800**: Dark colors, good for text and emphasis
- **900-950**: Very dark colors, good for strong contrast
These are directly taken from [Tailwind CSS](https://tailwindcss.com/docs/customizing-colors#default-color-palette).
Color
50
100
200
300
400
500
600
700
800
900
950
Red
Orange
Amber
Yellow
Lime
Green
Emerald
Teal
Cyan
Sky
Blue
Indigo
Violet
Purple
Fuchsia
Pink
Rose
Slate
Gray
Zinc
Neutral
Stone
## Layout & Sizing
### Understanding the Spacing System
Gurted uses a consistent spacing scale where each number represents 4 pixels:
- `1` = 4px
- `2` = 8px
- `4` = 16px
- `8` = 32px
- `16` = 64px
### Dimensions
Control the width and height of elements:
```html
64x64px
128x96px
200x100px
Full width (100% of parent)
Half width (50% of parent), 64px height
```
**Common width values:**
- `w-full`: 100% of parent width
- `w-1/2`: 50% of parent width
- `w-1/3`: 33.33% of parent width
- `w-1/4`: 25% of parent width
- `w-auto`: Natural width based on content
### Spacing System Explained
- **Padding** adds space inside an element (between border and content)
- **Margin** adds space outside an element (between border and other elements)
```html
Padding all sides (16px) - Space inside the gray area
Horizontal 24px, vertical 8px - Different spacing for x/y axes
Margin all sides (16px) - Space around the red area
Top 24px, bottom 16px margin - Vertical spacing only
Custom 20px padding, 10px margin
```
**Spacing direction shortcuts:**
- `p` = padding all sides
- `px` = padding left and right (x-axis)
- `py` = padding top and bottom (y-axis)
- `pt` = padding top only
- `pr` = padding right only
- `pb` = padding bottom only
- `pl` = padding left only
- Same pattern applies to margins with `m` prefix
## Flexbox System
Flexbox is a layout system that arranges elements in flexible containers. Think of it as a smart way to organize items in rows or columns with automatic spacing and alignment.
Flumi implements browser-grade CSS Flexbox support through [Yoga layout engine](https://yogalayout.com/)
### Container Properties
First, create a flex container to enable flexible layout:
```html
Basic flex container - Arranges children in a row by default
Inline flex container - Acts like inline element but with flex children
```
### Direction & Wrap
Control how items flow within the container:
```html
Horizontal layout (default) - Items arranged left to right
Reverse horizontal - Items arranged right to left
Vertical layout - Items arranged top to bottom
Reverse vertical - Items arranged bottom to top
Allow wrapping - Items move to next line when container is full
No wrapping (default) - Items shrink to fit on one line
Reverse wrap - New lines appear above/before previous lines
```
### Alignment System Explained
Flexbox has two axes:
- **Main axis**: The primary direction (horizontal for row, vertical for column)
- **Cross axis**: The perpendicular direction (vertical for row, horizontal for column)
**Justify (main axis alignment):**
```html
Start alignment - Items packed at the beginning (default)
End alignment - Items packed at the end
Center alignment - Items packed in the center
Space between - First item at start, last at end, equal space between
Space around - Equal space around each item
Even space - Perfectly equal space between all items
```
**Align (cross axis alignment):**
```html
Start cross-axis - Items aligned to start of cross axis
End cross-axis - Items aligned to end of cross axis
Center cross-axis - Items centered on cross axis
Baseline alignment - Items aligned by their text baseline
Stretch items (default) - Items stretch to fill cross axis
```
### Gap & Spacing
Control spacing between flex items without using margins:
```html
8px gap between items - Consistent spacing (2 × 4px = 8px)
16px gap between items - Larger spacing (4 × 4px = 16px)
Custom 12px gap - Exact pixel spacing
Row gap 8px, column gap 16px - Different spacing for each direction
```
### Item Properties
Control individual flex item behavior within containers:
```html
Grows to fill space - Takes available space (factor of 1)
Grows twice as much - Takes twice as much space as flex-grow-1
Never shrinks - Maintains minimum size even when space is tight
Fixed 128px basis - Preferred size before growing/shrinking
Custom 200px basis - Exact preferred size
Align to start - This item ignores container alignment
Align to center - This item centers itself
Align to end - This item aligns to end
Stretch to fill - This item stretches regardless of container setting
Third in visual order - Appears last despite being first in HTML
First in visual order - Appears first despite being second in HTML
Second in visual order - Appears middle despite being last in HTML
```
**Flex grow/shrink explained:**
- `flex-grow-0`: Don't grow (default)
- `flex-grow-1`: Grow to fill space equally with other grow-1 items
- `flex-grow-2`: Grow twice as much as grow-1 items
- `flex-shrink-0`: Don't shrink below basis size
- `flex-shrink-1`: Can shrink when space is limited (default)
## Borders & Effects
### Border Radius Explained
Border radius creates rounded corners. The value represents the radius of the circle used to round the corner:
```html
```
### Border System
Borders create visible lines around elements. You control thickness, style, and color:
```html
Default 1px solid border - Thin line around element
2px border - Slightly thicker line
4px border - Thick line (4 × 1px = 4px)
Custom 6px border - Very thick custom line
Top border only - Line across the top
Right border only - Line down the right side
Bottom border only - Line across the bottom
Left border only - Line down the left side
Different top/bottom borders - 2px top, 4px bottom
Thick left green border - 6px left border in green
Solid border (default) - Continuous line
No border - Removes any existing border
Red border - Colored border using palette
Custom blue border - Exact hex color
Transparent border - Invisible but takes up space
```
## Interactive States
### Hover States Explained
Hover states trigger when a user moves their mouse cursor over an element. Use them to provide visual feedback:
```html
Hoverable container - Changes background on mouse over
```
### Active States Explained
Active states trigger when an element is pressed/clicked and held. They provide immediate feedback for user interaction:
```html
```
### Cursor Control
Control what mouse cursor appears when hovering over elements:
```html
pointer
text
default
move
crosshair
help
not-allowed
Parent has pointer cursor
Children inherit the cursor style automatically
Nested elements also inherit the same cursor
```
## Advanced CSS Features
### Opacity & Z-Index
- **Opacity** controls transparency (0 = invisible, 1 = fully visible)
- **Z-index** controls stacking order (higher numbers appear in front)
- Think of it as layers of paper: higher z-index means the paper is on top of others
```html
75% opacity - 25% transparent
50% opacity - Half transparent
25% custom opacity - Mostly transparent
Z-index 10 - Middle layer
Z-index 20 (on top) - Highest layer, appears in front
Custom z-index 999 - Very high layer
```
### CSS Selectors
Advanced selector support for complex styling based on element relationships:
```html
```
### Class-Based Styling
Define reusable style classes for consistent design:
```html
Card Title
Card content
```
:::note
Classes are defined inside `style` attribute alongside inline styles, unlike traditional CSS where they are defined in a separate `class` attribute.
:::
## Default Styles
Gurted provides sensible default styling for all HTML elements so they look good without any custom CSS:
```css
/* Text elements with their default sizes */
body { text-base text-[#000000] text-left } /* 16px black left-aligned text */
h1 { text-5xl font-bold } /* 48px bold heading */
h2 { text-4xl font-bold } /* 36px bold heading */
h3 { text-3xl font-bold } /* 30px bold heading */
h4 { text-2xl font-bold } /* 24px bold heading */
h5 { text-xl font-bold } /* 20px bold heading */
h6 { text-base font-bold } /* 16px bold heading */
/* Text formatting elements */
b { font-bold } /* Bold text */
i { font-italic } /* Italic text */
u { underline } /* Underlined text */
small { text-sm } /* Small text (14px) */
mark { bg-[#FFFF00] } /* Highlighted text with yellow background */
code { text-base font-mono } /* Code text in monospace font */
pre { text-base font-mono } /* Preformatted text in monospace */
/* Interactive elements */
a { text-[#1a0dab] } /* Links in traditional blue color */
/* Button styling */
button { bg-[#1b1b1b] rounded-md text-white hover:bg-[#2a2a2a] active:bg-[#101010] }
button[disabled] { bg-[#666666] text-[#999999] cursor-not-allowed }
```
## Complete Examples
### Button Variations
```html
```
### Dashboard Grid with Responsive Layout
```html
Total Users
1,247
Revenue
$12,847
Orders
356
```
The CSS system in Gurted provides powerful styling capabilities while maintaining the familiar utility-first approach, all rendered with native performance through the Godot engine.