Scribd
Upload
5 views5 pages

CSS Part4 (QS)

The document contains a CSS assignment with instructions to modify the HTML and CSS files provided. It includes specific tasks such as adding transitions, transformations, shadows, and background images to various div elements. The assignment aims to enhance the understanding of CSS properties and their applications.

Uploaded by

kharesrijan449
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
5 views5 pages

CSS Part4 (QS)

The document contains a CSS assignment with instructions to modify the HTML and CSS files provided. It includes specific tasks such as adding transitions, transformations, shadows, and background images to various div elements. The assignment aims to enhance the understanding of CSS properties and their applications.

Uploaded by

kharesrijan449
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

CSS (Part 4)

Practice Questions

We are given 2 files – HTML & CSS.

Complete the assignment according to the instructions in the CSS file.

You can also download these from Github : [Link] college/Delta/tree/main/CSS/Chapter4/Assignment

HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>CSS Assignment</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<div id="box1">This is box1</div>
<div id="box2">This is box2</div>
<div id="box3">This is box3</div>
<div id="box4">This is box4</div>
<div id="myPic">This is my Pic</div>
</body>
</html>
CSS Code
/* Qs1. Add a 2s transition on box1 for width changes.
It should have 'ease-in' speed curve & 0.5s delay */

#box1 {
width: 100px;
height: 100px;
background: green;
}

#box1:hover {
width: 600px;
}

/* Qs2. Using transform, move box2 200px to the right &


200px down. Also rotate it 90deg.*/

#box2 {
width: 100px;
height: 100px;
background: red;
}
/* Qs3. Using transform, skew box3 20deg along the x axis.*/

#box3 {
width: 100px;
height: 100px;
background: lightblue;
}

/* Qs4. Set a 2px horizontal & 2px vertical, green shadow


for box4, with a 5px blur radius.*/

#box4 {
width: 100px;
height: 100px;
background: lightgreen;
}

/* Qs5. Set Your picture or any picture as the background of


the div
"myPic". Also, set transparency of this div to 50%. */

#myPic {
width: 200px;
height: 200px;
background: pink;
}

You might also like