So it will work the other way around. Instead of calling a css file from the YAML front matter, the YAML front matter assigns your page a class which the CSS calls to apply different formatting based on if that class is present.
Here is an example of what it looks like in YAML and where it shows up:
At the end of the highlighted line you will see that the DIV element now has an additional class called “mycustomcss” at the end.
If you want to target anything inside that DIV you would use CSS selectors like normal with the added condition that they are contained withing a DIV that has the mycustomcss class.
For example, lets say you want H1 elements to be a different color if you have this YAML.
You would add a statement ahead of the selector like this:
div.mycustomcss span.cm-header-1{
color: yellow;
}
This states we are applying the rules to any span with a class of “cm-header-1” that exists inside a DIV with a class of “mycustomcss”
Feel free to ask me any further questions. Happy coding.