Render inline styles AEM 6.x

[jamesm85017267]

Hi 

How do I create inline styles from categories in AEM 6.0?

This is so I can create above the fold inline styles and call my external CSS file later down the page.

Thanks in advance

james.

[smacdonald2008]

IN AEM - when you load the page or component - the CSS referenced in the clientlib is loaded.

[kautuk_sahni · Accepted solution]

Check this Link:- AEM Client Libraries explained by example

It talk about how to include CSS/JS in AEM template and components.

It is not recommended to add JS/CSS inline in AEM.

~kautuk

[peter_at_nortonlifelock]

The accepted answer dismisses best practices. Per Google's performance recommendations, it is best to inline critical CSS for optimized initial render times, as the OP mentioned. See https://web.dev/render-blocking-resources/ 

To answer the question, HTL doesn't seem to have a way to output the raw text contents of a CSS resource, so it would have to be exposed to HTL via a Java resource resolver. If anyone knows of a better way, please reply. Thanks.