In the previous post in this series, we learned how to write markdown in Github and its exclusive features.

In this post, we are going to learn how we can style our README.md

Text Align

Using align="left" attribute text can be aligned easily and it works with all the tags that markdown supports.

## Text Align - <p>
<p align="center">This is center aligned!</p>
<p align="left">Left aligned</p>
<p align="right">Right aligned</p>


## Text Align - <div>
<div align="center">This is center aligned!</div>
<div align="left">Left aligned</div>
<div align="right">Right aligned</div>

Github Output

---

Image Align

## Left Align
<p ><img align="left" width="200" src="https://via.placeholder.com/400x200"></p>

<br/><br/><br/><br/>

## Right Align
<p ><img align="right" width="200" src="https://via.placeholder.com/400x200"></p>

<br/><br/><br/><br/>

## Center Align
<p align="center" ><img width="200" src="https://via.placeholder.com/400x200"></p>

Github Output

---

List With indentation

# List With indentation

<dl>
  <dt>List Item 1</dt>
  <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra, ante vitae gravida rhoncus, nunc nulla posuere felis</dd>
  <dt>List Item 2</dt>
  <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra, ante vitae gravida rhoncus, nunc nulla posuere felis</dd>
</dl>


# Nested List With indentation
<dl>
  <dt>List Item 1</dt>
  <dd>
    Lorem ipsum dolor sit amet
    <dl>
      <dt>Nested List Item 1</dt>
      <dd>
        Lorem ipsum dolor sit amet
        <dl>
          <dt>Nested List Item 2</dt>
          <dd>Lorem ipsum dolor sit amet</dd>
        </dl>  
      </dd>
    </dl>
  </dd>
</dl>

Github Output

---

Dropdown

To Make Markdown work inside details tag make sure to leave the empty line after the summary tag

Dropdown in markdown supports all the basic features such as Text, Image, Table, List, .etc inside. i am just show some of it. not all.

Text

<details>
  <summary>Dropdown With Text</summary>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra, ante vitae gravida rhoncus, nunc nulla posuere felis, 
  id rhoncus ante tellus malesuada libero. Aliquam fermentum massa eget sodales aliquet.
  Morbi vitae velit tincidunt lorem fringilla lacinia non vitae leo. Fusce congue odio eget tellus finibus vulputate. 
</details>

Github Output

Image

<details>
  <summary>Dropdown With Image</summary>

  ![Image Here](https://via.placeholder.com/600x200)  
</details>

Github Output

Table

<details>
  <summary>Dropdown With Table</summary>

  | First Header | Second Header |
  | --- | --- |
  | Content from cell 1 | Content from cell 2 |
  | Content in the first column | Content in the second column |

</details>

Github Output

---

You can check out the live demo @ this repository

---