Combining the custom CSS with HTML controls

To do this you have to apply the css within the HTML field itself. 
 

<script>/* Your CSS here */</script>

@Erwin Ekkel I think you mean <style> since <script> is used for JavaScript?

But if I understand you correctly it is not possible to use to custom.css file for this? In that case I have a follow up question.

I’m building a couple of HTML-elements that change their styling based on the value of a form field. I succeeded in doing this by using SQL CASE statement and inline styling. But when I pass a certain threshold of characters in the expression query (around +/- 4500) the query breaks, so this makes me quite limited in what I can style. Using a <style> or <script> tag won't changes this a lot since the CSS needs be written for each of the different cases. Is there a workaround for this problem? 

I was hoping to use the custom.css file for this since it makes it a lot easier to maintain and does not limit the max amount characters used

You could add a new custom CSS in the root of the universal folder. And Directly call this in the html field: 

<link rel="stylesheet" href="./html-column.css">

Is this worth a try?

I’ve tried this already but this <link> tag is being removed by the GUI or the SF because it's not showing in the HTML document of the GUI. So I'm afraid that won't work.

a small caveat for anyone reading this in the future that a <style> tag will only work while it's encapsulated in another element e.g.:

<div>

<style> @import "./custom.css" </style>

<all your html elements> </all your html elements>

</div>