Scribd
Upload
2 views

Css Excersise

The document contains a series of HTML and CSS exercises, each demonstrating different styling techniques and layout properties. It includes examples such as text styling, box models, navigation menus, list styling, visibility properties, and button effects. Each exercise is accompanied by its respective HTML and CSS code snippets.

Uploaded by

dharshinikuppan7550
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

Css Excersise

The document contains a series of HTML and CSS exercises, each demonstrating different styling techniques and layout properties. It includes examples such as text styling, box models, navigation menus, list styling, visibility properties, and button effects. Each exercise is accompanied by its respective HTML and CSS code snippets.

Uploaded by

dharshinikuppan7550
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 19

EXCERSISES FOR CSS

1. 3521.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width">

<title>2023503521 </title>

<style>

h1{

font-weight:bold;

</style>

<link rel="stylesheet" href="3521.css">

</head>

<body>

<h1 style="color:red;"> Hello world </h1>

</body>

</html>

3521.css

h1{

font-size:24px;

}
output

2. two.html

<!DOCTYPE html>

<html>

<head>

<title>2023503521 </title>

<style>

#p1{

background-color:blue;

padding:20px;

.p2{

background-color:black;

color:white;

</style>

</head>

<body>

<p style="font-size:30px;"> EX.no 2</p>

<p id="p1"> my ID is 3521</p>

<p class="p2">my class is batch 2</p>


</body>

</html>

3. three.html

<!DOCTYPE html>

<html>

<head>

<title>2023503521 </title>

</head>

<body>

<h1> EXERCISE 3</h1>

<p style="font-family:Arial, Helvetica, sans-serif;font-size:16px;font-style:italic;height:1.5;letter-


spacing: 2px;word-spacing: 4px;"> this is a paragraph with following requirements</p>

</body>

</html>

output:
4. four.html

<!DOCTYPE html>

<html>

<head>

<title>2023503521 </title>

<link rel="stylesheet" href="four.css">

</head>

<body>

<h1> Hello world </h1>

</body>

</html>

four.css

h1{

text-align: center;

text-decoration: underline;

text-indent: 30px;

text-shadow: 2px 2px 5px grey;

output:
5. five.html

<!DOCTYPE html>

<html>

<head>

<title>2023503521</title>

</head>

<style>

.border-box{

border:2px solid black;

border-radius: 10px;

height: 100px;

width: 200px;

border-top-color: blue;

border-bottom-color: aqua;

</style>

<body>
<div class="border-box">

<p> this is css introduction</p>

</div>

</body>

</html>

output:

6. six.html

<!DOCTYPE html>

<html>

<head>

<title>2023503521</title>

<link rel="stylesheet" href="six.css">

</head>

<body>

<div class="card">

<h1> card title</h1>

<p> this is the card properties</p>


</div>

</body>

</html>

six.css:

.card{

background-color: white;

box-shadow: 0 4px 8px rgba(0,0, 0,0.4);

padding: 20px;

.card:hover{

box-shadow: 0 8px 16px rgba(0,0,0,0.9);

output:

7. seven .html

<!DOCTYPE html>

<html>

<head>

<title>2023503521</title>
<style>

.margin-properties{

margin-top: 20px;

margin-bottom: 25px;

margin-left: 10px;

margin-right: 15px;

padding:15px;

border:1px solid black;

</style>

</head>

<body>

<div class="margin-properties">

<h1>properties</h1>

</div>

</body>

</html>

output:

8. eight.html
<!DOCTYPE html>

<html>

<head>

<title>2023503521</title>

<link rel="stylesheet" href="eight.css">

</head>

<body>

<div id="div1">

<p style="text-align: center;">This is Div 1</p>


</div>
<div id="div2">
<p style="text-align: center;">This is Div 2</p>
</div>

</body>

</html>

eight.css:

#div1{

float: left;
background-color: rgb(194, 156, 84);
overflow: hidden;
}
#div2{
float: right;
background-color: rgb(166, 150, 226);
overflow: hidden;
}

output:
9. nine.html
Output:

10. ten.html
Output:
11. eleven.html

<!DOCTYPE html>
<html>
<head>
<title>2023503521</title>
<style>
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav a {
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
nav a:visited {
color: #666;
}

nav a:hover {
color: #007bff;
}

nav a:active {
color: #0056b3;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
Output:

12. twelve.html

<!DOCTYPE html>
<html>
<head><title>2023503521</title>
<style>
ul {
list-style: none;
padding: 0;
}

.odd {
background-color: #e95757;
}

.even {
background-color: #12b81d;
}

.first {
font-size: 18px;
}

.last {
border-bottom: 2px solid #ccc;
}
</style>
</head>
<body>

<h2>List Styling</h2>
<ul>
<li class="first odd">Item 1</li>
<li class="even">Item 2</li>
<li class="odd">Item 3</li>
<li class="even">Item 4</li>
<li class="odd last">Item 5</li>
</ul>
</body>
</html>
Output:

13. thirteen.html

<!DOCTYPE html>
<html>
<head><title>2023503521</title>
<style>
.hidden {
visibility: hidden;
background-color: lightblue;
}
.display-none {
display: none;
background-color: lightgreen;
}
.opacity {
opacity: 0.5;
background-color: pink;
}
</style>
</head>
<body>
<h2>Visibility and Opacity</h2>
<div class="hidden">This div is hidden (space preserved).</div>
<div class="display-none">This div is hidden (space collapsed).</div>
<div class="opacity">This div has 50% opacity.</div>
</body>
</html>

Output:

14. fourteen.java

<!DOCTYPE html>
<html>
<head>
<title>2023503521</title>
<style>
button {
background-image: linear-gradient(to right, #4CAF50, #45a049);
border: none;
border-radius: 5px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
transition: all 0.3s ease;
}
button:hover {
background-image: linear-gradient(to right, #3e8e41, #3c763d);
}
button:active {
transform: scale(1.05);
}
</style>
</head>
<body>
<button>Say hello by a button</button>
</body>
</html>

Output:

15. fifteen.html

<!DOCTYPE html>
<html>
<head>
<title>2023503521</title>
<style>
.card {
width: 300px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin: 20px;
}
.card:hover {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transform: translateY(-5px);
transition: all 0.3s ease;
}
.card-image {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-content {
padding: 20px;
}
.card-title {
font-size: 1.5rem;
margin-bottom: 10px;
}
.card-description {
color: #666;
}
</style>
</head>
<body>
<div class="card">
<img src="https://wallpapercave.com/wp/UHExKD4.jpg" alt="Card Image"
class="card-image">
<div class="card-content">
<h2 class="card-title">Card Title</h2>
<p class="card-description">This is a card description. Lorem ipsum
dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</body>
</html>
Output:

You might also like