CSS Inlining

Convert Embedded CSS to Inline CSS

The CSS Inlining transformer auto converts embedded CSS into inline CSS. You can turn this on by clicking on the Transformers button in the upper left and enabling Inline CSS.

Screen recording demonstrating the CSS Inline transformer

Once Inline CSS is enabled, you'll have access to a further set of customizing toggles. You can enable/disable any of these as fits your needs. The state of those toggles will be remembered and maintained if you deactivate and later reactivate the CSS Inlining transformer.

The Source code is not updated until the Transformers drawer is closed.

Any style tab with data-embed or data-ignore-inlining attributes will not be inlined.