Which method is the correct / recommended?
Both are equally good.
Is the second suitable for inline CSS?
Yes.
However, you only need to worry about placing the script and style blocks in the <![CDATA[ section if you want to include the < or & characters in the block. You will almost never use them in CSS.
You can use them in JavaScript, but as a rule, it is better to avoid problems by placing any significant part of the code in external scripts where it belongs. Inline script blocks tend to be better for placing data and script-invocation calls, which rarely need to use < or & (except for the values of a string literal, in which case there is an argument for encoding them, for example, \x3C ).
And is it possible / meaningful to add some encoding declaration here
Not. The charset="..." attribute only makes sense for external files (and does not exist on <style> , since it is never an external file). The internal content has already been decoded from bytes to characters at the same time as the rest of the containing document, so charset does not make sense at this point.
In any case, not all browsers pay attention to the <script charset> attribute, so you should make the encoding of the scripts correspond to the encoding of the page that includes them. Which makes charset="..." pretty redundant.
@charset "utf-8"; OK in external style sheets, but you almost never need non-ASCII characters in style sheets, so it's unusual to see it. @charset not valid in JavaScript.