Friday, 6 March 2026

CSS HTML Examples With Code

 

1. Super Market Web Page using Internal CSS

<!DOCTYPE html>
<html>
<head>
<title>Super Market</title>

<style>
body{
font-family: Arial;
background-color: #f2f2f2;
}

h1{
color: white;
background-color: green;
text-align: center;
padding: 10px;
}

.container{
width: 80%;
margin: auto;
}

.product{
background-color: white;
padding: 10px;
margin: 10px;
border: 1px solid gray;
}

</style>

</head>

<body>

<h1>Fresh Super Market</h1>

<div class="container">

<div class="product">
<h3>Rice</h3>
<p>Price: ₹60 per kg</p>
</div>

<div class="product">
<h3>Milk</h3>
<p>Price: ₹50 per litre</p>
</div>

<div class="product">
<h3>Bread</h3>
<p>Price: ₹30</p>
</div>

<div class="product">
<h3>Apples</h3>
<p>Price: ₹120 per kg</p>
</div>

<div class="product">
<h3>Eggs</h3>
<p>Price: ₹6 per egg</p>
</div>

</div>

</body>
</html>

2. Resume using Inline CSS

<!DOCTYPE html>
<html>
<head>
<title>My Resume</title>
</head>

<body style="font-family: Arial; background-color: #f4f4f4;">

<h1 style="color: blue;">Manisha Bhardwaj</h1>

<p style="font-size:18px;">Email: manisha@email.com</p>
<p style="font-size:18px;">Phone: 9876543210</p>

<h2 style="color: green;">Career Objective</h2>
<p style="font-size:16px;">To work in a challenging environment where I can use my skills and knowledge.</p>

<h2 style="color: green;">Education</h2>
<ul style="font-size:16px;">
<li>B.Tech / MCA</li>
<li>12th from CBSE</li>
<li>10th from CBSE</li>
</ul>

<h2 style="color: green;">Skills</h2>
<ul style="font-size:16px;">
<li>HTML</li>
<li>CSS</li>
<li>Python</li>
</ul>

<h2 style="color: green;">Hobbies</h2>
<ul style="font-size:16px;">
<li>Reading</li>
<li>Music</li>
<li>Traveling</li>
</ul>

</body>
</html>

No comments:

Post a Comment

CSS HTML Examples With Code

  1. Super Market Web Page using Internal CSS <!DOCTYPE html> <html> <head> <title> Super Market </title> ...