Styles and CSS
Styling in Lediv can be done visually in Styles or directly in CSS. Both views edit the same style source and stay synchronized.
Styles are always scoped to the currently selected element. Changing selection in canvas or in the Element tree updates both panels immediately.
Use Styles for fast visual editing
Style controls are grouped by section to keep editing fast and predictable: Position, Layout, Size, Space, Text, Background, Border, and Others.
Each field updates CSS directly, so visual changes and source output stay aligned in the same workflow.
Use CSS for direct source control
When edits are easier in code, switch to Code mode and open the CSS panel. This is useful for compact multi-property updates, selector-level refinements, and quick cleanup in larger style blocks.
Changes made in CSS are reflected back in visual controls where applicable, so design and source remain aligned.
States and interactions
Use the state selector in the panel header to style Base, Hover, Active, or Focus. This is useful for links, buttons, and interactive components without leaving the visual editor.
When element selection changes, state selection returns to Base, which keeps edits scoped to the current target.
Responsive design
Responsive overrides are controlled from the breakpoint toggle in the Styles header. Breakpoint preview and breakpoint editing are separate decisions. Changing preview width shows another viewport, while enabling breakpoint editing changes where new values are written.
Field labels show value source context. Blue indicates the current source. Orange indicates a value inherited from another breakpoint while editing in the current one.
Editing safely
Property labels include a popover with source details and a remove action. This helps clean up individual declarations and keep style rules easy to maintain over time.