How to Add Custom CSS to Your GitHub README.md?

Custom CSS for Readme.md in GitHub Repos

Verifying the name of the CSS file that modifies the readme.md file at the root of a GitHub repo is crucial when customizing the repository's appearance. While some believe it to be .github/github.css, it may not yield expected results.

Instead of relying on a dedicated CSS file, a more effective approach involves embedding HTML and CSS within an tag in the GitHub README. This can be achieved by using an

For example, to create a simple animation that changes the color of the h1 text:

<code class="css">h1 {
  color: red;
  animation: myanimation 2s infinite;
}

@keyframes myanimation {
  from {
    color: red;
  }
  to {
    color: yellow;
  }
}</code>

And then embed the animation within the SVG file:

<code class="html"><svg width="100%" height="100%">
  <foreignobject width="100%" height="100%">
    
      
        <style>
          <!-- Code from above -->
        </style>
      
      
        <h1 id="Hello-world">Hello world!</h1>
      
    
  </foreignobject>
</svg></code>

Finally, include the SVG file in the GitHub README using an tag:

<img src="/static/imghwm/default1.png" data-src="custom-animation.svg" class="lazy" alt="Animated text">

This method provides a flexible and efficient way to customize the appearance of a readme.md file in a GitHub repo, without the limitations of dedicated CSS files.

The above is the detailed content of How to Add Custom CSS to Your GitHub README.md?. For more information, please follow other related articles on the PHP Chinese website!