Font-family: ‘Georgia’, serif; <li>HTML Elements</li>
12] working with list properities Font-weight: bold; <li>HTML Attributes</li>
<html> Color: #8e44ad; </ul>
<head> } <h2>Nested Unordered Lists with Square Bullets</h2>
<title>Advanced CSS List Properties</title> [Link]-marker { <ul class=”basic-list”>
<style> List-style-type: none; <li>Programming Languages
[Link]-list { Padding-left: 0; <ul class=”nested-list”>
List-style-type: circle; Margin-left: 20px; <li>Python</li>
Margin-left: 30px; } <li>JavaScript</li>
Color: #2c3e50; [Link]-marker li { <li>Java</li>
Font-family: ‘Verdana’, sans-serif; Border-left: 4px solid #27ae60; </ul>
Font-size: 16px; Padding-left: 10px; </li>
} Margin-bottom: 10px; <li>Web Technologies</li>
[Link]-list { Color: #27ae60; </ul>
List-style-type: square; Font-style: italic; <h2>Ordered List with Lower-Alpha Markers</h2>
Margin-left: 40px; } <ol class=”alpha-list”>
Color: #2980b9; </style> <li>Plan your project</li>
Font-family: ‘Tahoma’, sans-serif; </head> <li>Develop modules</li>
} <body> <li>Test modules</li>
[Link]-list { <h2>Basic Unordered List with Circle Bullets</h2> <li>Deploy application</li>
List-style-type: lower-alpha; <ul class=”basic-list”> </ol>
Margin-left: 50px; <li>Introduction to HTML</li>
<h2>Unordered List without Default Markers and Custom box-sizing: border-box; </body></html>
Border</h2>
} [Link] with Positioning and Block properties in CSS.
<ul class=”no-marker”> .box2 { <html>
<li>Read documentation carefully</li> width: 300px; <head>
<li>Write clean code</li> background-color: #e3dffd; <meta charset=”UTF-8”>
<li>Maintain coding standards</li> padding: 10px; <title>Positioning Example</title>
</ul> border: 3px dashed #5e35b1; <style>
</body> margin: 15px; .container {
</html> } position: relative;
[Link] with HTML elements box properties in CSS
</style> width: 400px;
<html> height: 200px;
</head>
<head>
<body> background-color: #eee;
<title>CSS Box Model Demo</title>
<h2>Working with HTML Elements & CSS Box Properties</h2> border: 1px solid #ccc;
<style> }
<div class=”box”>
.box { .box1 {
<h3>This is Box 1</h3>
width: 300px; position: static;
<p>The padding, border, and margin are applied using
height: auto; CSS.</p> background: lightblue;
background-color: #f2f2f2; </div> }
<div class=”box2”> .box2 {
padding: 20px; <h3>This is Box 2</h3> position: relative;
border: 5px solid #4CAF50; <p>Another box with different box properties.</p> top: 20px;
margin: 20px; </div> left: 20px;
background: lightgreen; <body> border-bottom: 2px solid #004080;
} <div class=”container”> padding-bottom: 10px;
<div class=”box box1”>Static</div> }
.box3 { <div class=”box box2”>Relative</div> p{
position: absolute; <div class=”box box3”>Absolute</div> color: #333333;
top: 10px; </div> font-size: 16px;
right: 10px; <div class=”box box4”>Fixed</div> line-height: 1.5;
background: salmon; </body> }
} </html>
[Link] with cascading stylesheet-Internal stylesheet. .btn {
.box4 { <html> display: inline-block;
position: fixed; <head> background-color: #007bff;
bottom: 10px; <title>Internal CSS Example</title> color: white;
right: 10px; <style> border-radius: 5px;
background: gold; body { padding: 10px 20px;
} background-color: #f0f8ff; text-decoration: none;
.box { font-family: Arial, sans-serif; text-align: center;
padding: 10px; margin: 40px; transition: background-color 0.3s ease;
margin: 5px; } }
} H1 { .btn:hover {
</style> color: #004080; background-color: #0056b3;
</head> text-align: center; }
</style> <nav> body {
</head> <ul> font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
<body> <li><a href=”#”>Home</a></li> margin: 0;
<h1>Welcome to My Website</h1> <li><a href=”#”>About</a></li> padding: 0;
<p>This is a paragraph styled using an internal CSS sheet.</p> <li><a href="#">Services</a></li> background-color: #f4f4f9;
<a href=”#” class=”btn”>Click Here</a> <li><a href="#">Contact</a></li> color: #333;
</body> </ul> }
</html> </nav> header {
[Link] with cascading stylesheet-External stylesheet <main> background-color: #4CAF50;
<html lang=”en”> <section> color: white;
<head> <h2>About This Page</h2> text-align: center;
<meta charset=”UTF-8”> <p>This webpage is styled using an <strong>external CSS padding: 25px 0;
<meta name=”viewport” content=”width=device-width, initial- stylesheet</strong>. External CSS helps separate content (HTML)
}
scale=1.0”> from design (CSS).</p>
nav {
<title>External CSS Example</title> </section>
background-color: #333;
<!—Linking the external CSS file → </main>
}
<link rel=”stylesheet” href=”[Link]”> <footer>
nav ul {
</head> <p>© 2025 My Website | All Rights Reserved</p>
list-style-type: none;
<body> </footer>
margin: 0;
<header> </body>
padding: 0;
<h1>Welcome to My Website</h1> </html>
display: flex;
</header> 16.1
justify-content: center;
}
nav li {
margin: 0 20px;
}
nav a {
color: white;
text-decoration: none;
font-weight: bold;
font-size: 16px;
}
nav a:hover {
color: #4CAF50;
}
main {
padding: 30px;
text-align: center;
}
footer {
background-color: #222;
color: #ccc;
text-align: center;
padding: 15px 0;Margin-top: 20px;}