Extra CSS Examples
1. Write a html program to display "Cyber world" having Arial font and background
colour cyan. Add any two advantages having red color for the text.
<!DOCTYPE html>
<html>
<head>
<title>Cyber World</title>
<style>
body {
background-color: cyan;
font-family: Arial, sans-serif;
}
h1 {
color: black;
}
.advantages {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Cyber World</h1>
<p class="advantages">1. Easy access to information</p>
<p class="advantages">2. Faster communication</p>
</body>
</html>
2. Write a html program to display "Digital India" having underline using inline CSS.
Add any two sentences about "IT" subject below having yellow color background
for the text.
<!DOCTYPE html>
<html>
<head>
<title>Digital India</title>
</head>
<body style="text-align: center;">
<h1 style="text-decoration: underline;">Digital India</h1>
<p style="background-color: yellow; display: inline-block; padding: 5px;">Information
Technology (IT) helps in automating tasks and improving efficiency.</p><br>
<p style="background-color: yellow; display: inline-block; padding: 5px;">IT plays a crucial
role in data management and cybersecurity.</p>
</body>
</html>
3. Write a html program to display "Information Technology" in bold format and
Calibri font using inline CSS. Add any two sentences about "IT" subject below in
orange color.
<!DOCTYPE html>
<html>
<head>
<title>Information Technology</title>
</head>
<body style="font-family: Calibri; text-align: center;">
<h1 style="font-weight: bold;">Information Technology</h1>
<p style="color: orange;">IT enables seamless communication and global
connectivity.</p>
<p style="color: orange;">The IT industry drives innovation and technological
advancements.</p>
</body>
</html>
4. Write a html program to create an ordered list having names of two friends. Add
an unordered list of their hobbies under each name.
<!DOCTYPE html>
<html>
<head>
<title>Friends and Their Hobbies</title>
</head>
<body>
<h2>My Friends and Their Hobbies</h2>
<ol>
<li>Alice
<ul>
<li>Reading</li>
<li>Painting</li>
<li>Cycling</li>
</ul>
</li>
<li>Bob
<ul>
<li>Photography</li>
<li>Gaming</li>
<li>Cooking</li>
</ul>
</li>
</ol>
</body>
</html>
5. Write a html program to create a list of 5 flowers in ordered list and list of 5 fruits
in unordered list.
<!DOCTYPE html>
<html>
<head>
<title>Flowers and Fruits List</title>
</head>
<body>
<h2>List of Flowers</h2>
<ol>
<li>Rose</li>
<li>Lily</li>
<li>Tulip</li>
<li>Sunflower</li>
<li>Daisy</li>
</ol>
<h2>List of Fruits</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
<li>Grapes</li>
</ul>
</body>
</html>
6. Write a html program to create an ordered list of 2 languages and unordered list
having 3 computer languages.
<!DOCTYPE html>
<html>
<head>
<title>Languages List</title>
</head>
<body>
<h2>List of Languages</h2>
<ol>
<li>English</li>
<li>French</li>
</ol>
<h2>List of Computer Languages</h2>
<ul>
<li>Python</li>
<li>Java</li>
<li>C++</li>
</ul>
</body>
</html>
7. Write a html program to display "T-20 Cricket Match" in bold format and Calibri
font. Add any two sentence about "Cricket" subject below in orange color. Design
this using internal CSS.
<!DOCTYPE html>
<html>
<head>
<title>Cricket Match</title>
<style>
.title {
font-weight: bold;
font-family: Calibri, sans-serif;
}
.description {
color: orange;
font-family: Calibri, sans-serif;
}
</style>
</head>
<body>
<h2 class="title">T-20 Cricket Match</h2>
<p class="description">Cricket is a popular sport played between two teams of eleven
players. It is known for its exciting formats like Test matches, One Day Internationals, and
T-20 games.</p>
</body>
</html>
8. Write a html program to accept student Id (combination of alphabets and
numbers), date of joining college, percentage in previous class (in digits). The data
should be sent to the server.
<!DOCTYPE html>
<html>
<head>
<title>Student Information Form</title>
</head>
<body>
<form>
Student ID: <input type="text" required>
<br><br>
Date of Joining: <input type="date" name="bday" required>
<br><br>
Percentage in Previous Class: <input type="number" min="1" max="100" required>
<br><br>
<input type="submit" value="submit">
</form>
</body>
</html>
9. Write a html program to accept Name of the Employee (cannot be blank), Email Id
of the Employee, Salary (maximum 40000). The data should be sent to the server.
<!DOCTYPE html>
<html>
<head>
<title>Employee Information Form</title>
</head>
<body>
<form>
Employee's name: <input type="text" required>
<br><br>
Employee's e-mail:<input type="email">
<br><br>
Employee's salary <input type="number" min="1" max="40000" required>
<br><br>
<input type="submit" value="submit">
</form>
</body>
</html>
10. Write html program to display "Save Water" in blue color with dotted border and
30 pixel font size. Add any two sentences about how to save water in a para in
green color. Use Internal CSS.
<!DOCTYPE html>
<html>
<head>
<title>Save Water</title>
<style>
.title {
color: blue;
font-size: 30px;
border: 2px dotted blue;
}
.description {
color: green;
}
</style>
</head>
<body>
<h2 class="title">Save Water</h2>
<p class="description">Turning off taps while brushing and fixing leaks can save a lot of
water. Using water-efficient appliances and rainwater harvesting are also great ways to
conserve water.</p>
</body>
</html>
11. Write HTML code to display a list of any student names having 4 to 1 name using
relevant list tags
<!DOCTYPE html>
<html>
<head>
<title>Student Names List</title>
</head>
<body>
<h2>List of Students</h2>
<ol reversed>
<li>John</li>
<li>Emma</li>
<li>Michael</li>
<li>Sophia</li>
</ol>
</body>
</html>
