Isha

1.
Develop and demonstrate the usage of inline,

internal and external style sheet using CSS.
Inline css:-
<html>
<head>
<title>Project 1</title>
</head>
<body>
<h1 style="color:red">aligarh college of enginnering and technology</h1>
</body>
</html>
Internal css;-
<html>
<head>
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1 >aligarh college of enginnering and technology</h1>
</body>
</html>
External css:-
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 >aligarh college of enginnering and technology</h1>
</body>
</html>
Style.css
h1{
colour:red;}
Output:-
2.Using HTML, CSS create display an image overlay
effect on hover.
<html>
<head>
<style>
div {
height:80px;
width:80px;
padding: 100px;
transition:all 2s ease-in;
display: block;
}
div:hover{
transform:scale(3);
}
</style>
</head>
<body>
<center>
<div><img src="acet.jpg" alt="acet logo" width="100px" height="100px"></div>
</center></body>
</html>
3. Using HTML, CSS create a custom hover and focus
effect for navigation items, using CSS transformations.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<div style="padding-left:16px">
<h2>Top Navigation Example</h2>
<p>Some content..</p>
</div>
</body>
</html>
6. Using HTML, CSS create a scrollable container
that will snap on elements when scrolling.
<html>
<head>
<title> Project 6</title>
<style>
*{
margin: 0;
padding: 0;
font-family:"Poppins",sans-serif;
}
section {
height:35vh;
display:flex;
justify-content:center;
align-items:center;
}
.one{
background-color:blue;
}
.two{
background-color:red;
}
.three{
background-color: yellow;
}
.four{
background-color:pink;
}
</style>
</head>
<body>
<div class="container">
<section class="one">
<h1>1st color</h1>
</section>
<section class="two">
<h1>2nd color </h1>
</section>
<section class="three">
<h1>3rd color</h1>
</section>
<section class="four">
<h1>4th color </h1>
</section>
</div>
</body>
</html>
7. Using HTML, CSS, JavaScript create a hover
effect where the gradient follows the mouse
cursor.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
height: 100px;
width: 100px;
background-color: aqua;
border: 2px solid;
display: inline-block;
padding:40px ;
box-sizing:border-box;
}
div:hover{
border-radius: 100px;
transition: 2s ease-in-out;
}
</style>
</head>
<body>
<div id="box1">box1</div>
</body>
</html>
8. Using HTML, CSS create a rotate effect for the
image on hover.
<html>
<head>
<title>project 8</title>
<style>
.container {
Width:200px;
Height:200px;
Overflow:hidden;
Position:relative;
}
.container img {
Width: 100%;
Height: 100%;
Top: 100%;
Transition: transform 2s;
}
.container:hover img {
Transform: rotate(180deg);
}
</style>
</head>
<body>
<img src="acet.jpg" alt="image">
</div>
</body>
</html>
9. Using HTML, CSS creates a horizontally

scrollable container that will snap on elements
when scrolling.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
.element {
flex: 0 0 auto;
scroll-snap-align: center;
width: 300px; /* Adjust the width as needed */
height: 200px; /* Adjust the height as needed */
background-color: #f2f2f2; /* Adjust the background color as needed */
margin-right: 10px; /* Adjust the margin as needed */
}
</style>
</head>
<body>
<div class="element">Element 1</div>

</div>
</body>
</html>
10. Using HTML, CSS creates an input with a

visual, non-editable prefix.
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 80%;
aspect-ratio: 2/1;
margin: auto;
border: solid black 2px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
scroll-snap-type: x mandatory;
}
.blue {
background-color: lightblue;
height: 95%;
aspect-ratio: 1/2;
}
.green {
background-color: lightgreen;
height: 50%;
aspect-ratio: 2/1;
}
.blue, .green {
margin: 5px;
scroll-snap-align: center;
}
</style>
</head>
<body>
<div id="container">
<div class="blue"></div>
<div class="green"></div>
</div>
</body>
</html>
11. Using HTML, CSS changes the appearance of a
form if any of its children are focused.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
form {
border: 2px solid #CCBC82;
padding: 8px;
border-radius: 2px;
width: 250px;
height: 150px;
margin-top: 50%;
margin-left: 50%;
}
form:focus-within {
background: #7CF0BD;
}
label {
width: 72px;
margin: 10px 15px;
}
input {
margin: 2px 20px;
height: 20px;
}
</style>
</head>
<body>
<form>
<label
for="username">Username:</label><br>
<input id="username" type="text" /> <br />
<label for="password">Password:</label><br>
<input id="password" type="text" />
</form>
</body>
</html>
12. Using HTML, CSS customizes the scrollbar style
for elements with scrollable overflow.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
font-size: 26px;
}
/* width */
::-webkit-scrollbar {
width: 25px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias
earum modi soluta eligendi placeat laboriosam recusandae magnam reiciendis
molestiae, repudiandae facere incidunt qui unde sit, enim possimus
reprehenderit libero! Assumenda!
Voluptate amet facere, similique, ab delectus nobis, quibusdam architecto
aperiam incidunt sunt repellendus repudiandae ad mollitia non quaerat
quisquam neque officiis quas suscipit inventore. Consequuntur amet nemo natus
optio quas.</p>
optio quas.</p>
optio quas.</p>
optio quas.</p>
optio quas.</p>
</body>
</html>
13. Using HTML, CSS reveals an interactive
popout menu on hover/focus.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.menu {
position: relative;
width: 100%;
}
.menu a {
display: block;
text-decoration: none;
color: #333;
padding: 10px;
}
.sub-menu {
display: none;
float: left;
top: 100%;
left: 0;
background-color: #f0f0f0;
padding: 2%;
width: 25% ;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
box-sizing: border-box;
}
.sub-menu:hover {
background-color: #f40d0d;
}
</style>
</head>
<body>
<div class="menu">
<a href="#" class="sub-menu">Menu Item 1</a> <a
href="#" class="sub-menu">Menu Item 2</a> <a
href="#" class="sub-menu">Menu Item 3</a> <a
href="#" class="sub-menu">Menu Item 4</a>
</div>
</body>
</html>
14. Using HTML, CSS creates a stripes
background pattern.
<html>
<head>
<style>
Body {
Top:0px;
Left:0px;
Background-color:rgb(249, 249, 248);
}
.container {
Width:100%;
Height:100%;
Background-image: linear-gradient(90deg, #969828 50%,transparent 35%);
Background-size:20px 100%;
Background-repeat:repeat-x;
}
</style>
</head>
<body>
</div>
</body>
</html>
15. Using HTML, CSS creates a triangular shape
with pure CSS.
<html>
<head>
<style>
.triangle {
Width:0;
Height:0;
Margin-top:50PX;
Margin-left:50PX;
Border-left:120px solid transparent;
Border-right:120Px solid transparent;
Border-bottom:200px solid #AFEEEE;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>

Isha

Uploaded by

Copyright:

Available Formats

Isha

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Isha

Uploaded by

Copyright:

Available Formats

1.

Develop and demonstrate the usage of inline,

9. Using HTML, CSS creates a horizontally

10. Using HTML, CSS creates an input with a

You might also like