Styles and CSS
Style visually in Styles or directly in CSS. Both edit the same source and stay in sync.
Styles are scoped to the selected element. Selecting another element on the canvas or in the Elements tree updates both panels at once.
Use Styles for fast visual editing
Controls are grouped into Position, Layout, Size, Space, Text, Background, Border and Others. Every field writes CSS directly.
Each group shows only the properties the selected element already has. Press + on a group to see all its properties and add a new one, and − to go back. Lediv remembers which groups you keep open.
Use CSS for direct source control
Switch to Code mode and open the CSS panel for several properties at once, selector-level changes or cleaning up large style blocks. Changes there show back in the visual controls where they apply.
States and interactions
The state selector in the panel header styles Base, Hover, Active or Focus, which is handy for links, buttons and other interactive elements. Selecting another element resets it to Base.
Responsive design
The breakpoint toggle in the Styles header controls responsive overrides. Previewing a breakpoint and editing one are separate. Changing the preview width shows another viewport, while turning on breakpoint editing changes where new values are written.
A colored field label means the field has a value. Blue means it is set where you are editing. Orange appears only while you edit a breakpoint, for a value inherited from the base styles or another breakpoint.
Editing safely
Each property label opens a popover with the value's source and a remove action, so you can clean up single declarations.