Scribd
Upload
24 views11 pages

Extra CSS Examples

The document contains multiple HTML programs demonstrating various web design techniques, including styling with CSS, creating lists, and building forms. Each example showcases different elements such as headings, paragraphs, and input fields, along with specific styles like colors and fonts. The programs cover topics like technology, hobbies, and environmental awareness.

Uploaded by

public.spambin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
24 views11 pages

Extra CSS Examples

The document contains multiple HTML programs demonstrating various web design techniques, including styling with CSS, creating lists, and building forms. Each example showcases different elements such as headings, paragraphs, and input fields, along with specific styles like colors and fonts. The programs cover topics like technology, hobbies, and environmental awareness.

Uploaded by

public.spambin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

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>

You might also like