Markdown css Just add <link href="style.css" rel="stylesheet"></link> to the start of your markdown document.

Antimony.css

* { margin: 0; padding: 0; }

abbr,acronym,blockquote,code,dir,kbd,listing,plaintext,q,samp,tt,var,xmp { hyphens: none; }

html {
  padding: 2em;
	
	font: normal 18px/1.25 Source Sans Pro, sans-serif;
	color: #000;
	hyphens: auto;
	word-wrap: break-word;
	
	background: #fff;
}

body > :first-child {
	margin-top: 0;
}

/* @group Headings */

h1,h2,h3,h4,h5,h6 {
	line-height: 1;
	margin: 0;
	margin-top: 1.5rem;
	text-rendering: optimizeLegibility;
}

h1 { font-size: 2.75rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.65rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

h2 em, h3 em{
	color:grey;
}

/* @end */

small {
	font-size: 65%;
}

p {
	margin-top: .75rem;
}

hr {
	margin: .75rem 0;
	
	opacity: .5;
}

ol,ul {
	margin-top: .75rem;
}

ol ul, ol ol, ul ul, ul ol {
	margin-left: 2rem;
	margin-bottom: .75rem;
}

li {
	margin: .5em 0;
}

abbr {
	font-variant: small-caps;
	font-weight: 600;
	text-transform: lowercase;
	color: #808080;
}

abbr[title]:hover {
	cursor: help;
}

/* @group Block Quotes */

blockquote {
	border-left: 5px solid #333;
	padding-left: .75em;
	margin-left: calc(-.75em - 5px);
	
	font-style: italic;
}

blockquote + figcaption {
	display: block;
	
	margin-top: -1.5rem;
	margin-bottom: 1.5rem;
	
	font-size: 75%;
	text-align: right;
}

blockquote + figcaption:before {
	content: "— ";

	opacity: .05;
}

/* @end */

/* @group Pre-formatted and Code */

pre {
	overflow: auto;
	
	margin: .75rem 0;
	padding: .5rem;

	font-size: .875em;
	white-space: pre;
	
	background-color: #f8f8f8;
	border: 1px solid #ccc;
	border-radius: 3px;
}

code {
	padding: 0 .25em;
	
	white-space: pre;
	font-family: Source Code Pro, monospace;
	
	background-color: #f8f8f8;
	border: 1px solid #ccc;
	border-radius: 3px;
}

pre code {
	padding: 0;

	word-wrap: normal;
	white-space: pre-wrap;
}

pre code, pre tt {
	background-color: transparent;
	border: none;
}

/* @end */

/* @group Tables */

table {
	margin: .75rem 0;
	padding: 0;
	
	border-collapse: collapse;
}
table tr {
	margin: 0;
	padding: 0;
	
	border-top: 1px solid #ccc;
	background-color: #fff;
}
	table tr:nth-child(2n) {
		background-color: #f8f8f8;
	}

table tr th {
	margin: 0;
	padding: .35em .75em;
	
	font-weight: bold;
	text-align: left;
	
	border: 1px solid #ccc;
}

table tr td {
	margin: 0;
	padding: .35em .75em;
	
	text-align: left;
	
	border: 1px solid #ccc;
}

table tr th :first-child, table tr td :first-child { margin-top: 0; }
table tr th :last-child, table tr td :last-child { margin-bottom: 0; }

/* @end */

It was really helpful, it works. Thanks

Where do you insert the tag if you are using hugo. My markdown starts with the metadata.

linkTitle: "Configuration Library"
title: "Configuration Library"
weight: "1"
aliases:
  - /en/configuration-library.html

@radhikapc I'd suggest searching online, this tutorial might help
https://hugo-mini-course.netlify.app/sections/styling/custom/

But it doesn't render in github profile.
Please help me~

Where do you insert the tag if you are using hugo. My markdown starts with the metadata.

linkTitle: "Configuration Library"
title: "Configuration Library"
weight: "1"
aliases:
  - /en/configuration-library.html

It should work right after the metadata ends, before the MD formatting, you can use a HTML tag in some scenarios depending your tech stack

Nice stylesheet! I found your post here while searching for "import stylesheet in markdown file". Adding the <link> tag to the head of my markdown document as you prescribed,

<link href="style.css" rel="stylesheet"></link>

did not work, unfortunately. I had high hopes that this was the solution. But, the only thing that worked was adding the styles within paired <style> tags.

My Setup:

• IDE: VS Code
• Extension: Auto-Open Markdown Preview

UPDATE: (08/15/22)

Well, I take that back ... it DOES work! Apparently there is a lag issue between the preview updating from the external stylesheet. But, after troubleshooting a bit more I found that running CTRL + SHIFT + P and then Developer: Reload Window while having the markdown document focused does the trick. So a reload is required with the Auto-Open Markdown Preview plugin to make external styles take effect within markdown files, it seems.

Hopefully this info will help somebody else!

You actually don’t need the </link> closing tag as it self closes.