Program 1 <html> <head> <style> .grid-container{ display:grid; grid-template-columns: 10% 10%; background-color:aqua; gap:50px 50px; } .grid-container>div{ background-color:aquamarine; padding:30px; } /*.grid-item{ background-color:aquamarine; padding:30px; }*/ </style> </head> <body> <!– <div class=”grid-container”> <div class=”grid-item”>1</div> <div class=”grid-item”>2</div> <div class=”grid-item”>3</div>...
Program 1 <html> <head> <style> p{ cursor:progress; } </style> </head> <body> <p>Some text</p> </body> </html>
Program 1 <html> <head> <style> p::first-line{ color:aqua; } </style> </head> <body> <p>This is my website. Its about my blogs.</p> </body> </html>
Program 1 <html> <head> <style> a{ font-size:30px; } a:link{ color:aqua; } a:visited{ color:blue; } a:hover{ color:bisque; } a:active{ color:blueviolet; } </style> </head> <body> <a href=”#”>Click</a> </body> </html>
Program 1 <html> <head> <style> ul{ list-style-type:none; margin:0; padding:0; background-color:aqua; text-align:center; } ul li{ display:inline-block; padding:20px; font-size:30px; } a{ text-decoration: none; } a:hover{ color:aquamarine; background-color: bisque; } </style> </head> <body> <ul> <li><a href=”#”>Home</a></li> <li><a...
Program 1 <html> <head> <style> a{ display:block; } /*p{ display:inline; }*/ p{ display:none; } ul{ list-style-type: none; margin:0; padding:0; } ul li{ display:inline; } </style> </head> <body> <!–<a href=”#”>Click</a> <img src=”C:\\Users\\Lenovo\\Downloads\\bird.jpg”>–> <!–<p>This is some...
Program 1 <html> <head> <style> /*ul{ background-color: aqua; width:500px; } ul li{ background-color: aquamarine; padding:20px; width:400px; /* list-style-position: inside; list-style-type:none; }*/ ul li{ list-style-type:none; } ul{ margin:0; padding:0; } </style> </head> <body> <ul> <li>Tea</li>...
Program 1 <html> <head> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css” integrity=”sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==” crossorigin=”anonymous” referrerpolicy=”no-referrer” /> <style> .fa-car{ font-size:30px; color:aqua; } </style> </head> <body> <i class=”fa fa-car”></i> <i class=”fa fa-heart”></i> <i class=”fa-brands fa-instagram”></i> </body> </html>
Program 1 <html> <head> <style> img{ float:right; } p{ clear:right; } </style> </head> <body> <img src=”C:\\Users\\Lenovo\\Downloads\\bird.jpg”> <p>Some text</p> <p>This is some text</p> </body> </html>
Program 1 <html> <head> <style> /*div{ border:2px solid black; position:relative; top:10; left:20; right:50; width:400px; }*/ div{ border:2px solid black; position:fixed; top:0; } /*.parent{ position:relative; } .child{ position:absolute; top:0; } p{ position:absolute; top:0; left:80; }*/...
