Custom css file for readme.md in a Github repo

You can add some HTML (actually XHTML) and CSS inside a <foreignObject> tag inside of an svg file and then embed that inside of an <img> tag in your GitHub README.

This is a simple animation in CSS that changes the color of the h1 text:

h1 {
  color: red;
  animation: myanimation 2s infinite;
}

@keyframes myanimation {
  from {
    color: red;
  }
  to {
    color: yellow;
  }
}

<h1>Hello world!</h1>

You can embed the style and HTML into a <foreignObject> tag inside of an svg like so:

example.svg

<svg fill="none" viewBox="0 0 400 400" width="400" height="400" xmlns="http://www.w3.org/2000/svg">
    <foreignObject width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml">
            <style>
            h1 {
                color: red;
                animation: mymove 2s infinite;
            }

            @keyframes mymove {
                from {
                    color: red;
                }
                to {
                    color: yellow;
                }
            }
            </style>
            <h1>HELLO WORLD!</h1>
        </div>
    </foreignObject>
</svg>

Then, lastly you can embed the svg in your README, using an <img> tag and it should render your HTML with the applied CSS styles:

README.md

# My GitHub README

Welcome to my README!

<div align="center">
    <img src="example.svg" width="400" height="400" alt="css-in-readme">
</div>

another example & source