[typhoon] custom css doesn't work

[mckls]

I've setup a custom theme through inheritance called "me". Now I put some new typography definitions into me/css/custom/typography.css for headings.

The typography.css is imported into me/css/custom.css. custom.css is then imported into me/css/site.css

When I now compile my site.css it puts my new rules into the file, but other css rules overwrite mine. I tried to switch positions within my me/css/site.css but there is no effect on my issue.

How can I overwrite my css rules over the theme's ones without putting !important to every rule?

[rhukster]

the simplest way is to provide more 'specificity' (https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)

TLDR, if a style you are trying to override is:

.foo .bar { color: red; }

Then a more spefic one will override it:

div.foo .bar { color: blue; }
/* or */
.div span.bar { color: blue; }
/* or */
body .foo .bar { color: blue; }

Basically anything that works for your scenario that is more specific will override it.