Scribd
Upload
9 views

Labwork 2

Uploaded by

sameerhardoi1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views

Labwork 2

Uploaded by

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

NAME-Alok kumar Anand

ROLL. NO. 23/10/JC/045

Q.(1) Program for 10 predefine CSS function.

Ans.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS Functions</title>

<style>

.functions-demo {

display: flex;

flex-wrap: wrap;

gap: 10px;

.demo-box {

width: 100px;

height: 100px;

display: flex;

justify-content: center;

align-items: center;

color: white;

font-size: 12px;

.hsl { background-color: hsl(200, 70%, 50%); }

.rgba { background-color: rgba(255, 0, 0, 0.5); }

.calc { width: calc(50px + 20%); background-color: orange; }

.var { background-color: var(--custom-color, purple); }

.linear-gradient { background: linear-gradient(45deg, red, yellow); }


.clamp { font-size: clamp(12px, 2vw, 20px); background-color: teal; }

.min { background-color: rgb(min(255, 200), 50, 100); }

.max { background-color: rgb(max(50, 200), 150, 50); }

.rotate { transform: rotate(45deg); background-color: lightcoral; }

.url { background: url('https://via.placeholder.com/100'); background-size: cover; }

</style>

</head>

<body>

<h1>CSS Functions Demo</h1>

<div class="functions-demo">

<div class="demo-box hsl">HSL</div>

<div class="demo-box rgba">RGBA</div>

<div class="demo-box calc">Calc</div>

<div class="demo-box var">Var</div>

<div class="demo-box linear-gradient">Gradient</div>

<div class="demo-box clamp">Clamp</div>

<div class="demo-box min">Min</div>

<div class="demo-box max">Max</div>

<div class="demo-box rotate">Rotate</div>

<div class="demo-box url">URL</div>

</div>

</body>

</html>

Q.(2) Program for declaring class and creating using CSS.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS Classes and Objects</title>


<style>

.object {

width: 100px;

height: 100px;

margin: 10px;

display: inline-block;

text-align: center;

line-height: 100px;

font-size: 14px;

color: white;

.red { background-color: red; }

.green { background-color: green; }

.blue { background-color: blue; }

</style>

</head>

<body>

<h1>CSS Classes and Objects</h1>

<div class="object red">Red Object</div>

<div class="object green">Green Object</div>

<div class="object blue">Blue Object</div>

</body>

</html>

Q.(3) Program for CSS units such as em, ex, ch, rem, vh, vw, vmin, vmax, cm, mm, in, px, pc, pt.

Ans:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>CSS Units</title>

<style>

.unit-box {

margin: 10px;

padding: 10px;

border: 1px solid #ccc;

.em { font-size: 2em; }

.ex { font-size: 2ex; }

.ch { width: 20ch; }

.rem { font-size: 2rem; }

.vh { height: 10vh; background-color: lightblue; }

.vw { width: 20vw; background-color: lightgreen; }

.vmin { width: 10vmin; height: 10vmin; background-color: lightcoral; }

.vmax { width: 10vmax; height: 10vmax; background-color: lightyellow; }

.cm { width: 5cm; background-color: lightpink; }

.mm { width: 50mm; background-color: lightgray; }

.in { width: 1in; background-color: lightsalmon; }

.px { width: 100px; background-color: lightgoldenrodyellow; }

.pt { font-size: 12pt; }

.pc { font-size: 1pc; }

</style>

</head>

<body>

<h1>CSS Units Demonstration</h1>

<div class="unit-box em">Font Size: 2em</div>

<div class="unit-box ex">Font Size: 2ex</div>

<div class="unit-box ch">Width: 20ch</div>

<div class="unit-box rem">Font Size: 2rem</div>

<div class="unit-box vh">Height: 10vh</div>

<div class="unit-box vw">Width: 20vw</div>


<div class="unit-box vmin">Box: 10vmin</div>

<div class="unit-box vmax">Box: 10vmax</div>

<div class="unit-box cm">Width: 5cm</div>

<div class="unit-box mm">Width: 50mm</div>

<div class="unit-box in">Width: 1in</div>

<div class="unit-box px">Width: 100px</div>

<div class="unit-box pt">Font Size: 12pt</div>

<div class="unit-box pc">Font Size: 1pc</div>

</body>

</html>

Q.(4). Program for background colour and different paragraph colours.

Ans:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Background and Paragraph Colors</title>

<style>

body {

background-color: #f0f8ff; /* Light blue */

p{

padding: 10px;

margin: 10px 0;

.red { color: red; }

.green { color: green; }

.blue { color: blue; }

.yellow { color: yellow; background-color: black; }


</style>

</head>

<body>

<h1>Background and Paragraph Colors</h1>

<p class="red">This paragraph is red.</p>

<p class="green">This paragraph is green.</p>

<p class="blue">This paragraph is blue.</p>

<p class="yellow">This paragraph is yellow on black background.</p>

</body>

</html>

You might also like