Scribd
Upload
33 views6 pages

WD Practical 3

This document discusses CSS programming concepts including classes, IDs, changing properties, CSS3 features like shadows and transformations, and positioning with absolute, relative, and z-index. It provides code examples of using classes and IDs to style HTML elements, adding box shadows, transforming elements, using linear and radial gradients, and layering elements with z-index. The goal is to learn practical applications of CSS features for styling and positioning webpage elements.

Uploaded by

Lol Kumar
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
33 views6 pages

WD Practical 3

This document discusses CSS programming concepts including classes, IDs, changing properties, CSS3 features like shadows and transformations, and positioning with absolute, relative, and z-index. It provides code examples of using classes and IDs to style HTML elements, adding box shadows, transforming elements, using linear and radial gradients, and layering elements with z-index. The goal is to learn practical applications of CSS features for styling and positioning webpage elements.

Uploaded by

Lol Kumar
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

WEB DEVELOPMENT [102044505] 12102080501019

Practical 3
Aim : CSS

1. Basics of CSS programming Practical: Class, Id, changing properties like color,
size, background etc.
2. CSS 3 Programming Practical: shadow, orientation, transformation, gradient
etc.
3. Positioning practical in CSS: Absolute and relative positioning, Z-index.

CSS (Cascading Style Sheets) is a fundamental part of web development used to control the
presentation and layout of HTML documents. It allows you to style HTML elements by specifying
various properties like color, size, background, font, etc.

Code:

<html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p class="paragraph">This is a paragraph with class</p>
<p id="special">This is a paragraph with ID</p>
</body>
</html>

GCET 1| Page
WEB DEVELOPMENT [102044505] 12102080501019

css
h1 {
color: blue;
font-size: 24px;
}

.paragraph {
color: green;
font-size: 16px;
background-color: #f2f2f2;
}
#special {
color: red;
font-size: 20px;
}
Output :

2. Box Shadow :
.shadow-box {
width: 200px;
height: 200px;
background-color: #f0f0f0;
GCET 2| Page
WEB DEVELOPMENT [102044505] 12102080501019
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}

3. Orientation :
vertical-text {
writing-mode: vertical-rl;
text-orientation: upright;
}

4. Transformation :
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding: 10px;
border: 1px solid black;
}

#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotate(45deg);
transform-origin: 20% 40%;

GCET 3| Page
WEB DEVELOPMENT [102044505] 12102080501019
}
</style>
</head>
<body>

<h1>The transform-origin Property</h1>

<div id="div1">
<div id="div2">Transformation</div>
</div>

</body>
</html>}

5. Gradient :
.linear-gradient-box {
width: 200px;
height: 100px;
background: linear-gradient(to right, #ff0000, #00ff00);
}

.radial-gradient-box {
width: 150px;
height: 150px;
background: radial-gradient(circle, #ff0000, #00ff00);
}

GCET 4| Page
WEB DEVELOPMENT [102044505] 12102080501019
Output :

6. Z-index
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;

GCET 5| Page
WEB DEVELOPMENT [102044505] 12102080501019
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<h1>The z-index Property</h1>
<img src=" img_college.jpg " width="100" height="140">
</body>
</html>

Output :

GCET 6| Page

You might also like