Home > Article > Web Front-end > How to Add Custom CSS to Your GitHub README.md?
How to Add Custom CSS to Your GitHub README.md?
- Barbara StreisandOriginal
- 2024-11-03 21:48:02872browse
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%">
<html>
<head>
<style>
<!-- Code from above -->
</style>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
</foreignObject>
</svg></code>
Finally, include the SVG file in the GitHub README using an tag:
<img src="custom-animation.svg" 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!