I am having trouble verifying the name of the .css file that will modifying the readme.md file at the root of Github repo.
I believe it is:
.github/github.css
but that doesn't seem to do anything to the Markdown. Does anyone know if this is incorrect?
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>
GitHub does not allow for CSS to affect README.md files through CSS for security reasons (as if you could inject CSS into a ReadMe, you could easily launch a phishing attack). This includes both stylesheets referenced through <link rel> and inline styles used with <style>.
The readmes are in markdown syntax, so some styling can be done, such as adding colours through placeholder images, just like here on StackOverflow. For example, you can add red squares with the following:
-  `#f03c15`
You can also make use of things like diff, json, html, js and css to affect text colouring.
For simple and even complex Styling for Readme.md file. You can also use SVG in this simplest way, among other ways.
This is my Readme.md with an example to style. Readme.md:
# Using CSS in Readme.md file
Readme.md files do not allow direct CSS classes injection.
Though, there are several ways you can inject a CSS file or link into your README.md file, I prefer using the SVG files for simple styling or even complex charts and tables. [see my simple `Readme.md` example with SVG styling][1]
## 
This is a title that can be manipulated.
## 
This is a sub-title with cyan color but can be manipulated
title.svg:
<svg xmlns="http://www.w3.org/2000/svg" height="80">
<style src="./style.css" >
.title {
transition: fill .3s ease;
<!-- cursor: works in github not in preview mode -->
cursor: pointer;
font-family: Helvetica, sans-serif;
border-radius: 5px 5px 5px 5px;
fill:#2c1300;
text-anchor: middle;
dominant-baseline: middle;
font-size: 24px;
}
</style>
<g class="title">
<rect rx="5" width="100%" height="80"></rect>
<text x="50%" y="50%" width="" font-weight="bold" fill="yellow" >TypeScript Course</text>
</g>
</svg>
subTitle.svg:
<svg xmlns="http://www.w3.org/2000/svg" height="40">
<style src="./style.css" >
.subTitle {
fill: #00FFFF;
transition: fill .3s ease;
}
</style>
<g class="subTitle">
<text x="30%" y="10" dy=".35em">
TypeScript Jobs
</text>
</g>
</svg>
Wrap the images in a tag as shown below
<div>
<img src="/images/count.png" width="250" >
<img src="/images/home.png" width="250">
<img src="/images/profile.png" width="250">
</div>
Note: the images folder and the readme are in the root directory of the project
