anandprabhakar0507/gemqnr.markdown

## gemqnr.markdown

      
    Raw
  

              gemqnr.markdown
            
          
    GeMQNr

A Pen by Anand prabhakar on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>sample</title>
</head>
<body >
    <div>
    <h2>
        Unordered Lists
    </h2>
    <ul>
        <li>
            Athens
        </li>
        <li>
            Rome
        </li>
        <li>
            London
        </li>
        <li>
            Dublin
        </li>
    </ul>
    </div>
    <div>
    <h2>
        Ordered Lists
    </h2>
    <ol>
        <li>
            Apples
        </li>
        <li>
            Bananas
        </li>
        <li>
            Kumquats
        </li>
        <li>
            Olives
        </li>
    </ol>
    </div>
</body>
</html>

## style.css
div{
        display: inline-block;
        width: 45%;

    }

    ol{
        list-style-type : upper-roman;
    }
    ul{

        list-style-type: square;
    }
/* if i use ul,ol{
  list-style-image: square  url(https://archive.org/download/apimage/ap.png);

then it means hey if you cant find any picture on url then use square shape instead
also priority is given to the styles written at last.
we can also prioritise styles by applying !important after the style property.
*/

ul,ol{
  list-style-image: url(https://archive.org/download/apimage/ap.png);
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">

	<title>sample</title>
	</head>
	<body >
	<div>
	<h2>
	Unordered Lists
	</h2>
	<ul>
	<li>
	Athens
	</li>
	<li>
	Rome
	</li>
	<li>
	London
	</li>
	<li>
	Dublin
	</li>
	</ul>
	</div>
	<div>
	<h2>
	Ordered Lists
	</h2>
	<ol>
	<li>
	Apples
	</li>
	<li>
	Bananas
	</li>
	<li>
	Kumquats
	</li>
	<li>
	Olives
	</li>
	</ol>
	</div>
	</body>
	</html>
	div{
	display: inline-block;
	width: 45%;

	}

	ol{
	list-style-type : upper-roman;
	}
	ul{

	list-style-type: square;
	}
	/* if i use ul,ol{
	list-style-image: square url(https://archive.org/download/apimage/ap.png);

	then it means hey if you cant find any picture on url then use square shape instead
	also priority is given to the styles written at last.
	we can also prioritise styles by applying !important after the style property.
	*/

	ul,ol{
	list-style-image: url(https://archive.org/download/apimage/ap.png);
	}