how do add CSS styles to markdown content?

Markdown does not support CSS styles.

Since Markdown converts to HTML, Any valid HTML works.

CSS styles are added with inline or style tags in HTML.

Disadvantages with this lot of HTML code with plain markdown that makes it complex to read and understand.

Markdown HTML style tag

In this, You define style tags and HTML tags inside markdown content.

For example, Define the following CSS styles for a text in markdown content.

Content styled with color, font weight, and font-size attributes.

<style>
.green {
    color: green;
    font-weight:700;
    font-size: 30px;
}
</style>

<div class="green">
    Markdown css styles
</div>
Markdown css styles

In this approach, you can use valid CSS and HTML code and it supports the majority of markdown parsers.

It is content mixed with HTML and is hard to read.

Markdown inline CSS styles

It is an example of applying inline CSS styles to HTML in markdown content.

HTML tags styles using styles attribute with valid CSS values.

<div style="color:green">
    Markdown inline css styles
</div>

Rendered on-page as

Markdown inline css styles

Add CSS styles to markdown header tags

Markdown headers are written using # symbols for HTML heading tags.

Symbol # for h1 tag Symbol ## for h2 tag Symbol ### for h3 tag Symbol #### for h4 tag

Here is a syntax To add styles to heading tags

# heading text{#identifier cssselector}

heading tag is added #identifier followed by space and selector wrapped inside square brackets. Define CSS styles

<style>
.heading1 {
    color: red;
    font-weight:700;
    font-size: 35px;
}
.heading2 {
    color: blue;
    font-weight:700;
    font-size: 30px;
}
</style>

# Markdown heading styles {#identifier .heading1}
## Markdown heading styles {#identifier .heading2}

Render on a web page as

Markdown h2 styles

Generated HTML

<style>
.heading1 {
    color: red;
    font-weight:700;
    font-size: 35px;
}
.heading2 {
    color: blue;
    font-weight:700;
    font-size: 30px;
}
</style>

<h1 id="identifier" class="heading1">
    Markdown h1 styles
</h1>
<h2 id="identifier" class="heading2">
    Markdown h2 styles
</h2>