azamsharp · April 13, 2020 15:05
diff --git a/index.html b/index.html
 <html>

    <head>

        <style>

            .page-background {
                background-color: yellow; 
                font-size: 20px;
                color: purple;
            }

            /*
            .list-item {
                background-color: green;
                color: white; 
            } */

            /* styles applied to the HTML element of type ul and li */
            ul li { 
                background-color: purple;
                color: white; 
            }

            /* styles will be applied to li which is inside an element with a class menu */
            .menu li {
                background-color: orange; 
                color: blue; 
            }

            /* style will be applied to li which is inside an elemet with the id menu */
            #menu li {
                background-color: pink;
                color: red; 
            }

        </style>


    </head>
    <body class="page-background">
       <div>
           <ul id="menu">
               <li>Home</li>
               <li>Services</li>
               <li>About Us</li>
               <li>Contact Us</li>
           </ul>
       </div>
       
       <div id="art-section">
        <img width="100" height="100" src="https://pla.s6img.com/society6/img/4WQ-_cY3uTsqRqFe5MNNMDMaR_c/w_1500/prints/~artwork/s6-original-art-uploads/society6/uploads/misc/4423664a78fb45f990e19ae0bc8bc0c8/~~/modern-abstract-art-70-prints.jpg" />

        <img width="200" height="200" src="images/art1.png"

    </div>

       <h1>Movie Categories</h1>
       <ul>
        <li>Fiction</li>
        <li>Action</li>
        <li>Comedy</li>
        <li>Kids</li>
    </ul>

    </body>

 </html>
	<html>

	<head>

	<style>

	.page-background {
	background-color: yellow;
	font-size: 20px;
	color: purple;
	}

	/*
	.list-item {
	background-color: green;
	color: white;
	} */

	/* styles applied to the HTML element of type ul and li */
	ul li {
	background-color: purple;
	color: white;
	}

	/* styles will be applied to li which is inside an element with a class menu */
	.menu li {
	background-color: orange;
	color: blue;
	}

	/* style will be applied to li which is inside an elemet with the id menu */
	#menu li {
	background-color: pink;
	color: red;
	}

	</style>


	</head>
	<body class="page-background">
	<div>
	<ul id="menu">
	<li>Home</li>
	<li>Services</li>
	<li>About Us</li>
	<li>Contact Us</li>
	</ul>
	</div>

	<div id="art-section">
	<img width="100" height="100" src="https://pla.s6img.com/society6/img/4WQ-_cY3uTsqRqFe5MNNMDMaR_c/w_1500/prints/~artwork/s6-original-art-uploads/society6/uploads/misc/4423664a78fb45f990e19ae0bc8bc0c8/~~/modern-abstract-art-70-prints.jpg" />

	<img width="200" height="200" src="images/art1.png"

	</div>

	<h1>Movie Categories</h1>
	<ul>
	<li>Fiction</li>
	<li>Action</li>
	<li>Comedy</li>
	<li>Kids</li>
	</ul>

	</body>

	</html>