Primer CSS is a free open-source CSS framework built with the GitHub design system to support the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure that our patterns are steady and interoperable with every other. Its approach to CSS is influenced by object-oriented CSS principles, functional CSS, and BEM architecture. It is a highly reusable model.
Markdown is a lightweight markup language for creating formatted text. In this article, we will learn about the markdown with Primer CSS.
List of elements with their syntax:
- Paragraph: This element is used to define a paragraph.
<p> This is a paragraph </p>
- Bold: This tag is used to style any word or sentence with the bold property. In simple words, whatever is present in this tag will get bold.
<b>...</b>
- strikethrough tag: This tag is used to style any word or sentence in the strikethrough style. In simple words, whatever is present in this tag will get a horizontal arrow in the middle of the word. It looks like someone has cut that word.
<s>...</s>
- italic tag: This tag is used to make your font italic.
<i>...</i>
- Link tag: This tag is used to add any kind of link to your web page.
<a href="#">... </a>
- blockquote tag: This tag is used to indicate the quotation of a large section of text from another source.
<blockquote>... </blockquote>
- Header tag: This tag is used to define the header of a page or a section.
<h1> Header 1 </h1> <h2> Header 2 </h2> <h3> Header 3 </h3> <h4> Header 4 </h4> <h5> Header 5 </h5> <h6> Header 6 </h6>
- unordered list: This tag is used to define the list in an unordered style.
<ul> <li>...</li> <li>...</li> </ul>
- ordered list: This tag is used to define the list in an ordered style.
<ol> <li>...</li> <li>...</li> </ol>
- Table: This tag is used to add a table to the webpage.
<table>
<thead>
<tr>
<th>heard 1</th>
<th>header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>table cell 1</td>
<td>table cell 1</td>
</tr>
<tr>
<td>table cell 2</td>
<td>table cell 2</td>
</tr>
<tr>
<td>table cell 3</td>
<td>table cell 3</td>
</tr>
</tbody>
</table>Note:
- <tr> is table row
- <th> is table header
- <td> is table cell
- Input: This tag is used to add an input field to the webpage.
<input type="checkbox" checked>
- preformatted text: This tag is used to make any sentence preformatted. In simple words, it is used to highlight any phrase.
<pre>...</pre>
- Thread: This tag is used to group header content in an HTML table.
<thread>... </thread>
- Image: This tag is used to add an image to the web page.
<img src="#">
- Section: This tag is used to add a section that will divide the webpage into sections.
<section>...</section>
Example 1: In the below example, we have made use of paragraph and header elements.
<!DOCTYPE html> <html>
<head>
<title> Primer CSS | Markdown </title>
<link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" />
</head>
<body>
<div class="markdown-body">
<center>
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3> Primer CSS | Markdown </h3><br>
<p>This is a paragraph</p>
</center>
</div>
</body>
</html>
|
Output:
Primer CSS Markdown
Example 2: In the below example, we have made use of the list element.
<!DOCTYPE html> <html>
<head>
<title> Primer CSS Markdown </title>
<link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" />
</head>
<style>
h1{
color:green;
}
</style>
<body>
<div class="markdown-body">
<center>
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3> Primer CSS | Markdown </h3><br>
</center>
<h4>Unordered list</h4>
<ul>
<li>DBMS</li>
<li>OS</li>
<li>CN</li>
</ul>
</div>
</body>
</html>
|
Output:
Primer CSS Markdown
Reference Link: https://primer.style/css/components/markdown