The "Live CSS" tab in the panel gives you a full-featured (S)CSS editor that you can use to write CSS that will be applied to all panes.
The Live CSS code editor is fully aware of all CSS syntax and values and will provide suggestions while you type. Select a suggestion with the arrow keys, then press Tab to apply it.
You can toggle between CSS and SCSS. The SCSS is compiled on the fly. SCSS supports variables, nesting, calculation and more.
Use the "select element" icon in the Live CSS header, then click on any element in any pane to get a list of all the CSS selectors defined in the site's CSS styles, along with any classes and id's on the element, and the element name itself, as suggestions for a selector.
With this, you can quickly write CSS to target a single element, or a group of elements, without needing to go to the devtools to find the right element.
The Live CSS tab will automatically load in any Google font you define in your CSS, letting you quickly try out multiple fonts.
All Google fonts are available as suggestions (starting with a capital) so when you type
font-family: you can easily get to them.
By default, the CSS is applied to all panes, but you can also select a single pane to apply the CSS to. You can use this if you want to experiment with styling, and want to compare it to the original CSS. Open two tabs side by side, and select one of the panes to apply the CSS to.
By default, the CSS will be preserved when you move away from a page, but you can uncheck the "preserve" button, and the CSS will be automatically cleared every time you navigate to a different URL.
Is your question not answered?
Ask via Twitter, Slack or our contact form
The browser for developers and designers building amazing sites and web apps.Try for free