0% found this document useful (0 votes)

8 views

CSS

The document outlines a series of experiments focused on CSS (Cascading Style Sheets), each demonstrating different applications such as styling web pages, using color values, selectors, backgrounds, borders, margins, paddings, box model, text properties, font properties, links, and combinators. Each experiment includes HTML and CSS source code showcasing the specific CSS concepts being taught. The document serves as a practical guide for learning and applying various CSS techniques in web development.

Uploaded by

srianithagilakamsetti2003

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

8 views

CSS

Uploaded by

srianithagilakamsetti2003

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 57

CSS(Cascading Style Sheets)

EXPERIMENT:01:
TIITLE: Design a web page exploring different types of CSS Application.

SOURCE CODE:
CSS_intro.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />

<link rel="stylesheet" href="CSS_intro.css" />
<title>CSS Introduction</title>
</head>
<body>

<h1>Some Heading</h1>
</body>
</html>

CSS_intro.css:
h1 {
font-size: 100px;
color: blue;
}
OUTPUT:
EXPERIMENT:02:
TITLE: Design a web page styling with different Colour Values

SOURCE CODE:

CSS_colors.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<link rel="stylesheet" href="CSS_colors.css" />
<title>CSS Colors</title>
</head>
<body>
<section>
<h1>Welcome to CSS</h1>
<p>CSS frameworks like Bootstrap, Foundation, and Bulma
provide pre-written CSS and JavaScript components to streamline
web development</p>
</section>
</body>
</html>

CSS_colors.css:
/* Hexadecimal color value */
body {
background-color: #4b778d;
}

/* HSL color value */

section {
background-color: hsl(180, 64%, 43%);
}

/* color name */
h1 {
color: white;
}

/* RGB color value */

p{
color: rgb(255, 255, 255);
}

OUTPUT:
EXPERIMENT:03:
TITLE: Design a web page styled with Simple CSS Selectors

SOURCE CODE:

CSS_simple_selectors.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<link rel="stylesheet" href="CSS_simple_selectors.css" />
<title>CSS Simple Selectors</title>
</head>
<body>
<section id="course">
<h1 class="title">CSS Bootcamp</h1>
<p class="para">You will learn CSS here</p>
</section>
</body>
</html>

CSS_simple_selectors.css:
/* Element/Name Selector */ /* Arial, Helvetica, and sans-serif are all
font families used in web design */
body {
font-family: Arial, Helvetica, sans-serif;
}

/* ID selector / / If id selector is applied, use # to apply style */

#course {
padding: 25px;
}

/* Class Selector / / If class selector is applied, use . to apply style */

.title {
font-size: 35px;
}

/* Universal Selector / / If Universal selector(for entire web page) is

applied, use * to apply style */
*{
margin: 0;
padding: 0;
}

/* Grouping Selector / / If Grouping selector is applied, use * to apply

style */
*{

.title,
.para {
margin: 10px;
padding: 15px;
}
OUTPUT:
EXPERIMENT:04:
TITLE: Design a web page demonstrating the usage of CSS backgrund

SOURCE CODE:

CSS_background.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<link rel="stylesheet" href="CSS_background.css" />
<title>CSS Backgrounds</title>
</head>
<body>
<section>
<h1>Title 1</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas
repellat officia recusandae omnis, necessitatibus quas quod?
Voluptatibus esse minus at perspiciatis, dolore, nulla, veniam
voluptas blanditiis eaque doloribus asperiores. Nesciunt sit delectus
magnam vitae atque eaque neque deserunt perferendis distinctio
dolorem,
</p>
</section>

<section>
<h1>Title 2</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas
repellat officia recusandae omnis, necessitatibus quas quod?
Voluptatibus esse minus at perspiciatis, dolore, nulla, veniam
voluptas
</p>
</section>
<section>
<h1>Title 3</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas
repellat officia recusandae omnis, necessitatibus quas quod?
</p>
</section>

<section>
<h1>Title 4</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas
repellat officia recusandae omnis, necessitatibus quas quod?
Voluptatibus esse minus at perspiciatis.
</p>
</section>
<section>
<h1>Title 5</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas
repellat officia recusandae omnis, necessitatibus quas quod?
Voluptatibus esse minus.
</p>
</section>
<section>
<h1>Title 6</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas
repellat officia recusandae omnis, necessitatibus quas quod?
Voluptatibus esse minus at perspiciatis, dolore, nulla, veniam.
</p>
</section>
<section>
<h1>Title 7</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas
repellat officia recusandae omnis, necessitatibus quas quod?
lore accusamus beatae tenetur. Placeat, hic pariatur suscipit.
</p>
</section>
<section>
<h1>title 8</h1>
<p>
Consequatur, vel quis obcaecati labore doloribus unde id ipsum vitae
laborum, vero voluptate. Voluptates consectetur dicta repellendus
hic obcaecati modi cumque vero nemo impedit in odit eius nihil?
Quibusdam, deleniti?
Accusantium minus cupiditate odio enim, tempora excepturi nemo.
</p>
</section>
</body>
</html>

CSS_background.css:
body {
color: white;
background-image: url("book.jpg");
background-size: cover;
background-position: center;
}
OUTPUT:
EXPERIMENT:05:
TITLE: Design a web page demonstrating the usage of CSS borders

SOURCE CODE:

CSS_boders.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<link rel="stylesheet" href="CSS_borders.css" />
<title>CSS Borders</title>
</head>
<body>
<section>
<h1 class="title">CSS Borders</h1>
<p class="para">In this page, you will learn how to set borders</p>
</section>
</body>
</html>

CSS_borders.css:
/* section {
border-style: solid;
border-color: black;
border-width: 2px;
padding: 10px;
} */

section {
/* border: 10px dotted green; */
border: indigo dashed 3px;
}

OUTPUT:
EXPERIMENT:06:
TITLE: Design a web page demonstrating the usage of CSS Margins

SOURCE CODE:

v
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<link rel="stylesheet" href="CSS_margins.css" />
<title>CSS Margins</title>
</head>
<body>
<section>
<h1 class="title">CSS Bootcamp</h1>
<p class="para">You will learn how CSS boders styling works</p>
</section>
</body>
</html>

CSS_margins.css:
/* section {
margin-top: 15px;
margin-right: 20px;
margin-bottom: 25px;
margin-left: 30px;
} */

section {
margin: 15px 20px 25px 30px;
}
OUTPUT:
EXPERIMENT:07:
TITLE: Design a web page demonstrating the usage of CSS Paddings

SOURCE CODE:

CSS_paddings.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<link rel="stylesheet" href="CSS_paddings.css" />
<title>CSS Paddings</title>
</head>
<body>
<section>
<h1 class="title">CSS Bootcamp</h1>
<p class="para">You will learn CSS from zero to advanced</p>
</section>
</body>
</html>

CSS_paddings.css:
/* section {
padding-top: 15px;
padding-right: 20px;
padding-bottom: 25px;
padding-left: 30px;
} */

section {
padding: 15px 20px 25px 30px;
}
OUTPUT:
EXPERIMENT:08:
TITLE: Design a web page demonstrating the usage of CSS Height & Width.

SOURCE CODE:

CSS_height_width.html:

<!DOCTYPE html>

<head>

<meta charset="UTF-8" />

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

<link rel="stylesheet" href="CSS_height_width.css" />

<title>CSS Height & Width</title>

</head>

<body>

<h1 class="title">CSS Bootcamp</h1>

<p class="para">You will learn CSS.</p>

</section>

</body>

</html>

CSS_height_width.css:
section {

height: 200px;

width: 600px;

OUTPUT:
EXPERIMENT:09:
TITLE: Design a web page demonstrating the usage of CSS Box model

SOURCE CODE:

<!DOCTYPE html>

<head>

<meta charset="UTF-8" />

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

<link rel="stylesheet" href="CSS_box_model.css" />

<title>CSS Box Model</title>

</head>

<body>

<h1 class="title">CSS Bootcamp</h1>

<p class="para">You will learn CSS from here. </p>

</section>

<h1 class="title">CSS Bootcamp</h1>

<p class="para">You will learn CSS. </p>

</article>

</body>
</html>

CSS_box_model.css:

/* box-sizing: content-box; */

box-sizing: border-box;

section {

height: 250px;

width: 200px;

padding: 10px;

border: solid 5px #777;

margin: 15px;

article {

height: 250px;

width: 200px;

padding: 10px;

margin: 15px;

border: solid 5px #777;

}

OUTPUT:
EXPERIMENT:10:
TITLE: Design a web page demonstrating the usage of CSS text property

SOURCE CODE:

CSS_text_props.html:

<!DOCTYPE html>

<head>

<meta charset="UTF-8" />

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

<link rel="stylesheet" href="CSS_text_props.css" />

<title>CSS Text Properties</title>

</head>

<body>

<h1 class="title">CSS Bootcamp</h1>

<p class="para">You will be learning CSS. </p>

</section>

</body>

</html>
CSS_text_props.css:

h1 {

color: coral;

/* text-transform: lowercase; */

text-transform: uppercase;

text-align: center;

letter-spacing: 1px;

word-spacing: 5px;

text-shadow: 1px 2px 2px black;

OUTPUT:
EXPERIMENT:11:
TITLE: Design a web page demonstrating the usage of CSS Font properties.

SOURCE CODE:

CSS_font_props.html:

<!DOCTYPE html>

<head>

<meta charset="UTF-8" />

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

<link rel="stylesheet" href="CSS_font_props.css" />

<title>CSS Font Properties</title>

</head>

<body>

<h1 class="title">CSS Bootcamp</h1>

<p class="para">You will learn CSS here.</p>

</section>

</body>

</html>

CSS_font_props.css:
section {

font-family: Verdana, Geneva, Tahoma, sans-serif;

h1 {

color: coral;

text-transform: uppercase;

text-align: center;

font-style: italic;

font-size: 50px;

font-weight: 900;

text-align: center;

letter-spacing: 2px;

word-spacing: 5px;

OUTPUT:
EXPERIMENT:12:
TITLE: Design a web page demonstrating the usage of CSS Font properties.

SOURCE CODE:

CSS_links.html:

<!DOCTYPE html>

<head>

<meta charset="UTF-8" />

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

<link rel="stylesheet" href="CSS_links.css" />

<title>CSS Links</title>

</head>

<body>

<h1 class="title">CSS Bootcamp</h1>

<p class="para">You will learn css.</p>

<a href="#">Read More</a>

</section>

</body>

</html>
CSS_links.css:

section {

font-family: Arial, Helvetica, sans-serif;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

h1 {

color: coral;

text-transform: uppercase;

font-size: 50px;

letter-spacing: 2px;

word-spacing: 5px;

font-weight: 700;

}
a{

text-decoration: none;

background-color: #333;

padding: 15px;

margin: 40px;

/* box-shadow: 5px 5px 3px lawngreen; */

color: white;

transition: all 0.2s ease-in-out;

a:hover {

background-color: coral;

box-shadow: none;

OUTPUT:
EXPERIMENT:13:
TITLE: Design a web page demonstrating the usage of CSS Combinators
selectors
SOURCE CODE:

CSS_combinators.html:

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<link rel="stylesheet" href="CSS_combinators.css" />
<title>CSS Combinator Selectors</title>
</head>
<body>
<article id="tech">
<h1>Green Technology</h1>

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Accusantium
nemo vel rem similique possimus! Porro, sint! Placeat, obcaecati
iusto
temporibus aspernatur accusantium sit est repellendus architecto
neque
fugit aliquid laudantium.
</p>

<a href="#">Read More</a>

<div>
<p>Hey There</p>
</div>

<a href="#">Read More Here</a>

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta modi
eum,
cupiditate vitae earum commodi quas accusantium doloremque
iusto sint
nam quis possimus, consectetur sunt beatae nisi sed quibusdam
quod.
</p>
</article>
</body>
</html>

CSS_combinators.css:
/* Descendant Selector */
#tech h1 {
font-size: 55px;
}

/* Child Selector */
article > p {
background-color: lightgreen;
padding: 15px;
}

/* General Sibling Selector */

p~a{
text-decoration: none;
background-color: lightpink;
padding: 25px;

display: inline-block;
margin: 30px;
}

OUTPUT:
EXPERIMENT:14:
TITLE: Design a web page demonstrating the usage of CSS Pseudo classes
SOURCE CODE:

CSS_pseudo_classes.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<link rel="stylesheet" href="CSS_pseudo_classes.css" />
<title>CSS Pseudo Class Selectors</title>
</head>
<body>
<article id="animal-planet">
<h1>Polar Bears</h1>

<p class="para">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, corporis!
Reiciendis, earum doloremque libero quisquam aliquam omnis quis
quidem
tempora ducimus, commodi vel officia iusto, ex voluptatum
</p>

<a href="#">Read More</a>

<div>
<p>Hey there</p>
</div>

<a href="#">Read More Here</a>

<p class="para main-para">

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione
labore
magni fugiat at recusandae voluptatem, corporis dolores veniam,
aperiam
quaerat quisquam, atque dolor.
</p>

<a href="#">Read More Here</a>

<button>Click Me!!!</button>
</article>
</body>
</html>

CSS_pseudo_classes.css:
.main-para {
background-color: lightsalmon;
padding: 25px;
color: white;
}

OUTPUT:
EXPERIMENT:15:
TITLE: Design a web page demonstrating the usage of CSS opacity property.
SOURCE CODE:

CSS_opacity.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<link rel="stylesheet" href="CSS_opacity.css" />
<title>CSS Opacity</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam
cupiditate quasi repellat nobis nihil, illo, aspernatur dolorum quis
veniam consectetur accusamus? Aspernatur maiores illo odio. Labore
nemo
eos modi non?
</p>
<img src="dog.jpg" alt="Dog image" />
</body>
</html>

CSS_opacity.css:
body {
background-image: url("cars.jpg");
}

img {
height: 500px;
width: 600px;
object-fit: cover;
}
img:hover {
opacity: 0.2;
}

p{
color: #ffffff;
padding: 25px;
font-size: 30px;
background-color: #4d19191a;
}
OUTPUT:
EXPERIMENT:16:
TITLE: Design a web page demonstrating the usage of CSS Attribute
Selectors.
SOURCE CODE:

CSS_attributes.html:

<!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" />
<link rel="stylesheet" href="CSS_attributes.css" />
<title>CSS Attribute Selectors</title>
</head>
<body>
<article id="animal-planet">
<h1 title="heading-one">Primates</h1>

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, corporis!
Reiciendis, earum doloremque libero quisquam aliquam omnis quis
quidem
tempora ducimus, commodi vel officia iusto.
</p>

<a href="#">Read More</a>

<div>
<p>Hey there</p>
</div>

<a href="#">Read More Here</a>

<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione
labore
magni fugiat at recusandae voluptatem, corporis dolores veniam,
aperiam
quaerat quisquam, atque dolor.
</p>
</article>

<article>
<h2>Birds</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa,
cumque
eveniet maiores adipisci doloribus dolorum.
</p>
</article>
</body>
</html>

CSS_attributes.css:
article[id="animal-planet"] {
background-color: lightslategray;
padding: 15px;
color: white;
}

h1[title="heading-one"] {
font-size: 75px;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

a[href="#"] {
text-decoration: none;
background-color: black;
color: white;
padding: 20px;
}
OUTPUT:
EXPERIMENT:17:
TITLE: Design a web page demonstrating the usage of CSS specificity .
SOURCE CODE:

CSS_specificity.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<link rel="stylesheet" href="CSS_specificity.css" />
<title>CSS Specificity</title>
</head>
<body>
<section >
<h1 id="title">CSS Bootcamp</h1>
<p class="para">
A comprehensive guide to learning one of the most used web
languages of all time.
</p>

<a href="#">Read More</a>

</section>
</body>
</html>

CSS_specificity.css:
section {
background-color: limegreen;
}

#title {
font-size: 55px;
}
h1 {
font-size: 40px;
}

.para {
color: white;
}

p{
color: blue;
}

a{
font-size: 35px;
}

h1#title {
font-size: 150px;
}

#title {
font-size: 55px;
}

OUTPUT:
EXPERIMENT:18:
TITLE: Design a web page demonstrating the usage of CSS Border Radius .
SOURCE CODE:

CSS_border_radius.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<link rel="stylesheet" href="CSS_border_radius.css" />
<title>CSS Border Radius</title>
</head>
<body>
<section></section>
<section></section>
</body>
</html>

CSS_border_radius.css:
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
}

section {
height: 350px;
width: 350px;
background-color: rgb(177, 169, 53);
margin: auto;
/* border-top-left-radius: 10px;
border-top-right-radius: 30px;

border-bottom-right-radius: 10px;
border-bottom-left-radius: 30px; */

/* border-radius: 10px 30px 10px 30px; */

border-radius: 50%;
}
OUTPUT:
EXPERIMENT:19:
TITLE: Design a web page demonstrating the usage of CSS Box shadow.
SOURCE CODE:

CSS_box_shadow.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<link rel="stylesheet" href="CSS_box_shadow.css" />
<title>CSS Box Shadow</title>
</head>
<body>
<section>
<h1>CSS Bootcamp</h1>
<p>
A comprehensive guide to learning one of the most used web
programming
languages of all time
</p>
</section>
</body>
</html>

CSS_box_shadow.css:
section {
padding: 15px 25px;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
background-color: grey;
display: inline-block;

/* box-shadow: 5px 10px 5px black; */

/* box-shadow: 5px 10px 5px 10px black; */

box-shadow: 2px 3px 5px 2px black, -2px -3px 5px 2px black;
}

OUTPUT:
EXPERIMENT:20:
TITLE: Design a web page demonstrating the usage of CSS Gradients
SOURCE CODE:
CSS_gradients.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<link rel="stylesheet" href="CSS_gradients.css" />
<title>CSS Gradients</title>
</head>
<body>
<section>
<h2>Chadwick Boseman</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi,
possimus iusto? Sunt non exercitationem, voluptates corrupti odit,
libero voluptatibus iste adipisci distinctio.
</p>
</section>
</body>
</html>

CSS_gradients.css:
section {
padding: 25px;
color: white;
height: 500px;

/* Linear */
background-image: linear-gradient(#abdcff, #0396ff);
background-image: linear-gradient(to right, #43cbff, #9708cc);
background-image: linear-gradient(to top, #92ffc0, #002661);
background-image: linear-gradient(to bottom, #92ffc0, #002661);
background-image: linear-gradient(to left, hsl(131, 100%, 25%),
#0000f9, rgb(134, 0, 125) );

/* Radial */
/* background-image: radial-gradient(circle, #360940, #f05f57); */
/* background-image: radial-gradient(ellipse, #3b2667, #bc78ec); */
}

OUTPUT:
EXPERIMENT:21:
TITLE: Design a web page demonstrating the usage of CSS transforms
SOURCE CODE:

CSS_transforms.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<link rel="stylesheet" href="CSS_transforms.css" />
<title>CSS Transforms</title>
</head>
<body>

<div class="block">Here we go</div>
</body>
</html>

CSS_transforms.css:
.block {
margin: 20px;
height: 200px;
width: 200px;
padding: 10px;
background-color: teal;

/* -------------------------- */
/* transform: translateX(150px); */
/* transform: translateX(-150px); */
/* transform: translateY(150px); */
/* transform: translateY(-150px); */
/* transform: translate(400px, 250px); */

/* transform: rotate(45deg);
transform: rotate(0.125turn);
transform: rotate(0.25turn);
transform: rotate(0.5turn);
transform: rotate(0.75turn);
transform: rotate(1turn); */

/* transform: scaleX(1.2); */
/* transform: scaleY(1.2); */
transform: scale(1.2);
}

OUTPUT:
EXPERIMENT:22:
TITLE: Design a web page demonstrating the usage of CSS transitions
SOURCE CODE:

CSS_transitions.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<link rel="stylesheet" href="CSS_transitions.css" />
<title>CSS Transitions</title>
</head>
<body>

<div id="block"></div>
</body>
</html>

CSS_transitions.css:
body {
margin: 0;
height: 100vh;
display: grid;
place-items: center;
}

#block {
height: 250px;
width: 250px;
background-color: orange;

transition: all 1s ease-in-out;

}

#block:hover {
transform: rotate(1turn);
border-radius: 50%;
background-color: black;
}
OUTPUT:
EXPERIMENT:23:
TITLE: Design a web page demonstrating the usage of CSS animations
SOURCE CODE:

CSS_animations.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<link rel="stylesheet" href="CSS_animations.css" />
<title>CSS Animations</title>
</head>
<body>
<div class="block"></div>
</body>
</html>

CSS_animations.css:
.block {
height: 100px;
width: 100px;
background-color: lawngreen;

animation-name: my-first-anime;
animation-duration: 10s;
}

@keyframes my-first-anime {
0% {
transform: translate(0);
}

25% {
transform: translate(250px, 0);
}

50% {
transform: translate(250px, 150px);
}

75% {
transform: translate(0, 150px);
}

100% {
transform: translate(0);
}
}
OUTPUT:

EXPERIMENT:24:
TITLE: Design a web page demonstrating the usage of CSS filters
SOURCE CODE:

CSS_filters.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<link rel="stylesheet" href="CSS_filters.css" />
<title>CSS Filters</title>
</head>
<body>
<img src="somewhere.jpg" alt="" />
</body>
</html>

CSS_filters.css:
img {
height: 600px;
width: 700px;
object-fit: cover;

filter: blur(10px);
filter: brightness(5%);
filter: grayscale(100%);
filter: contrast(10%);
filter: opacity(0.8);
filter: saturate(150%);
filter: sepia(50%);
}
OUTPUT:
EXPERIMENT:25:
TITLE: Design a web page demonstrating the usage of CSS clip path
SOURCE CODE:

CSS_clip_path.html:

<!DOCTYPE html>

<head>

<meta charset="UTF-8" />

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

scale=1.0" />

<link rel="stylesheet" href="CSS_clip_path.css" />

<title>CSS Clip Path</title>

</head>

<body>

<img src="figs.jpg" alt="" />

</body>

</html>

CSS_clip_path.css:

img {

height: 500px;

width: 750px;
object-fit: cover;

/* clip-path: polygon(70% 0, 100% 50%, 100% 100%, 0 100%, 0 0); */

clip-path: polygon(30% 0, 75% 0, 100% 0, 75% 100%, 0 100%, 0 100%);

OUTPUT:

TCL 65R635 CNET Review Calibration Results
No ratings yet
TCL 65R635 CNET Review Calibration Results
3 pages
WEB DESIGN PROGRAMS
No ratings yet
WEB DESIGN PROGRAMS
16 pages
Assignment 11
No ratings yet
Assignment 11
4 pages
Cascading Style Sheet-1 (1)
No ratings yet
Cascading Style Sheet-1 (1)
64 pages
HTML and Css Manual
No ratings yet
HTML and Css Manual
157 pages
exp
No ratings yet
exp
6 pages
Chapter three
No ratings yet
Chapter three
30 pages
UREDUVANJENAWEBSTRANI
No ratings yet
UREDUVANJENAWEBSTRANI
23 pages
WT Program For Practice
No ratings yet
WT Program For Practice
14 pages
Css PDF
No ratings yet
Css PDF
26 pages
WT Program For Practice
No ratings yet
WT Program For Practice
14 pages
Css Excersise
No ratings yet
Css Excersise
19 pages
vnd.openxmlformats-officedocument.wordprocessingml.document&rendition=1-2
No ratings yet
vnd.openxmlformats-officedocument.wordprocessingml.document&rendition=1-2
13 pages
Chapter 2 CSS
No ratings yet
Chapter 2 CSS
33 pages
Experiment n0.7
No ratings yet
Experiment n0.7
11 pages
lab3
No ratings yet
lab3
9 pages
Introduction to CSS1
No ratings yet
Introduction to CSS1
64 pages
Introduction to CSS
No ratings yet
Introduction to CSS
63 pages
CSS Notes Basic
No ratings yet
CSS Notes Basic
8 pages
css_97c32e61-16c3-44c8-8fd9-ef994cdfde6c
No ratings yet
css_97c32e61-16c3-44c8-8fd9-ef994cdfde6c
109 pages
Lab02 CSS 2021
No ratings yet
Lab02 CSS 2021
15 pages
Cascading Style Sheets (CSS)
No ratings yet
Cascading Style Sheets (CSS)
24 pages
HTML_CSS_Lab_Manual_100_Projects
No ratings yet
HTML_CSS_Lab_Manual_100_Projects
76 pages
CSS
No ratings yet
CSS
8 pages
FSD-1 Lab Exe-5
No ratings yet
FSD-1 Lab Exe-5
10 pages
EXPERIMENT 1
No ratings yet
EXPERIMENT 1
5 pages
Lab Sheet 1-7
No ratings yet
Lab Sheet 1-7
26 pages
Css
No ratings yet
Css
34 pages
css notes 15 dyas coderstar
No ratings yet
css notes 15 dyas coderstar
86 pages
Ip Chapter Four
No ratings yet
Ip Chapter Four
21 pages
CSS Examples
No ratings yet
CSS Examples
74 pages
Unit 1 PPT
No ratings yet
Unit 1 PPT
88 pages
lec3 WD_٠٨٢٩٤٩ (3)
No ratings yet
lec3 WD_٠٨٢٩٤٩ (3)
22 pages
Detailed CSS Tutorial
No ratings yet
Detailed CSS Tutorial
5 pages
CSS1
No ratings yet
CSS1
16 pages
Learn CSS in One Day and Learn It Well: Accompanying Resource (End of Chapter Exercises)
No ratings yet
Learn CSS in One Day and Learn It Well: Accompanying Resource (End of Chapter Exercises)
21 pages
Creating A CSS Powered Site
No ratings yet
Creating A CSS Powered Site
14 pages
fsd4&5A4
No ratings yet
fsd4&5A4
11 pages
CSS in Depth Notes With Project
No ratings yet
CSS in Depth Notes With Project
6 pages
CSS Practicals
No ratings yet
CSS Practicals
20 pages
Web File (1)
No ratings yet
Web File (1)
48 pages
Cascading Style Sheet
No ratings yet
Cascading Style Sheet
17 pages
Css
No ratings yet
Css
14 pages
04.CSS Fundamentals
No ratings yet
04.CSS Fundamentals
144 pages
UNIT - 4 Ip
No ratings yet
UNIT - 4 Ip
21 pages
Wt-Class 4
No ratings yet
Wt-Class 4
39 pages
CSS Grid Layout: 5 Practical Projects
From Everand
CSS Grid Layout: 5 Practical Projects
Craig Buckler
No ratings yet
Css (BScCSIT 5th Semester)
No ratings yet
Css (BScCSIT 5th Semester)
67 pages
CSC336 Web Technologies LAB04
No ratings yet
CSC336 Web Technologies LAB04
10 pages
Cascading Style Sheets Is A Simple Design Language Intended To Simplify
No ratings yet
Cascading Style Sheets Is A Simple Design Language Intended To Simplify
17 pages
Lab02 - CSS and Layout
No ratings yet
Lab02 - CSS and Layout
12 pages
CSS-1
No ratings yet
CSS-1
39 pages
UNIT 3 Cascading Style Sheet
No ratings yet
UNIT 3 Cascading Style Sheet
17 pages
FSD WEEK5
No ratings yet
FSD WEEK5
3 pages
Css
No ratings yet
Css
100 pages
Top 12 CSS Code Tips
No ratings yet
Top 12 CSS Code Tips
14 pages
WDD - Cascading Style Sheets
No ratings yet
WDD - Cascading Style Sheets
40 pages
What Is CSS?
No ratings yet
What Is CSS?
71 pages
CSS Notes
No ratings yet
CSS Notes
60 pages
CH 3
No ratings yet
CH 3
52 pages
Web Programming-css 1
No ratings yet
Web Programming-css 1
30 pages
social work
No ratings yet
social work
27 pages
Combinational Logic Circuits 1
No ratings yet
Combinational Logic Circuits 1
30 pages
unit 5 dld
No ratings yet
unit 5 dld
61 pages
physics course - 2
No ratings yet
physics course - 2
31 pages
DLD UNIT 4
No ratings yet
DLD UNIT 4
82 pages
combinational circuit 2
No ratings yet
combinational circuit 2
9 pages
HTML N HTML 5 Tutorial
100% (1)
HTML N HTML 5 Tutorial
143 pages
Computer Networks and Information Security
No ratings yet
Computer Networks and Information Security
35 pages
ZTE Cable Color
No ratings yet
ZTE Cable Color
2 pages
Css Shorthand
No ratings yet
Css Shorthand
75 pages
Implementation and Testing 4.1. Implementation
No ratings yet
Implementation and Testing 4.1. Implementation
4 pages
Briefwechsel Mit Thomas Carlyle
No ratings yet
Briefwechsel Mit Thomas Carlyle
174 pages
List of Experiments OBJECTIVES: The Student Should Be Made To
No ratings yet
List of Experiments OBJECTIVES: The Student Should Be Made To
78 pages
Banner Student Self-Service User Guide 8.7
No ratings yet
Banner Student Self-Service User Guide 8.7
550 pages
Angular Responsive Form Creation
No ratings yet
Angular Responsive Form Creation
8 pages
Web-Development ToC PDF
No ratings yet
Web-Development ToC PDF
3 pages
JavaScript Array Methods
100% (1)
JavaScript Array Methods
5 pages
Catalog
No ratings yet
Catalog
60 pages
Ember Js Guide
No ratings yet
Ember Js Guide
295 pages
Joomla! V 1 5 Getting Started With Template Overrides
100% (35)
Joomla! V 1 5 Getting Started With Template Overrides
40 pages
Introduction To DHTML
0% (1)
Introduction To DHTML
76 pages
HTML Responsive Web Design
No ratings yet
HTML Responsive Web Design
13 pages
Tribute Page HTML + Css
No ratings yet
Tribute Page HTML + Css
2 pages
Caderno de Atividades Língua Inglesa
No ratings yet
Caderno de Atividades Língua Inglesa
24 pages
PRE PROCESSING CAD Original
No ratings yet
PRE PROCESSING CAD Original
20 pages
HTML Color Names and Codes
100% (1)
HTML Color Names and Codes
5 pages
HTML
No ratings yet
HTML
67 pages
Al-Ameen Trading List (Archroma
100% (1)
Al-Ameen Trading List (Archroma
2 pages
Online Examination System
86% (7)
Online Examination System
12 pages
List Harga Keramik Platinum-2005
No ratings yet
List Harga Keramik Platinum-2005
10 pages
Web Pract
No ratings yet
Web Pract
38 pages
Tabela de Gramatura de Toners
100% (1)
Tabela de Gramatura de Toners
3 pages
Flash Cards
No ratings yet
Flash Cards
2 pages
What Does HTML Stand For?
No ratings yet
What Does HTML Stand For?
6 pages
Tarifa Q2 SS17 Kids
No ratings yet
Tarifa Q2 SS17 Kids
74 pages

CSS

Uploaded by

CSS

Uploaded by

CSS(Cascading Style Sheets)

/* HSL color value */

/* RGB color value */

/* ID selector */ /* If id selector is applied, use # to apply style */

/* Class Selector */ /* If class selector is applied, use . to apply style */

/* Universal Selector */ /* If Universal selector(for entire web page) is

/* Grouping Selector */ /* If Grouping selector is applied, use * to apply

<meta charset="UTF-8" />

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

<link rel="stylesheet" href="CSS_height_width.css" />

<title>CSS Height & Width</title>

<h1 class="title">CSS Bootcamp</h1>

<p class="para">You will learn CSS.</p>

<meta charset="UTF-8" />

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

<link rel="stylesheet" href="CSS_box_model.css" />

<title>CSS Box Model</title>

<h1 class="title">CSS Bootcamp</h1>

<p class="para">You will learn CSS from here. </p>

<h1 class="title">CSS Bootcamp</h1>

<p class="para">You will learn CSS. </p>

border: solid 5px #777;

border: solid 5px #777;

<meta charset="UTF-8" />

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

<link rel="stylesheet" href="CSS_text_props.css" />

<title>CSS Text Properties</title>

<h1 class="title">CSS Bootcamp</h1>

<p class="para">You will be learning CSS. </p>

text-shadow: 1px 2px 2px black;

<meta charset="UTF-8" />

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

<link rel="stylesheet" href="CSS_font_props.css" />

<title>CSS Font Properties</title>

<h1 class="title">CSS Bootcamp</h1>

<p class="para">You will learn CSS here.</p>

font-family: Verdana, Geneva, Tahoma, sans-serif;

<meta charset="UTF-8" />

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

<link rel="stylesheet" href="CSS_links.css" />

<h1 class="title">CSS Bootcamp</h1>

<p class="para">You will learn css.</p>

<a href="#">Read More</a>

font-family: Arial, Helvetica, sans-serif;

/* box-shadow: 5px 5px 3px lawngreen; */

transition: all 0.2s ease-in-out;

<a href="#">Read More</a>

<a href="#">Read More Here</a>

/* General Sibling Selector */

<a href="#">Read More</a>

<a href="#">Read More Here</a>

<p class="para main-para">

<a href="#">Read More Here</a>

<a href="#">Read More</a>

<a href="#">Read More Here</a>

<a href="#">Read More</a>

/* border-radius: 10px 30px 10px 30px; */

/* box-shadow: 5px 10px 5px black; */

/* box-shadow: 5px 10px 5px 10px black; */

transition: all 1s ease-in-out;

<meta charset="UTF-8" />

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

<link rel="stylesheet" href="CSS_clip_path.css" />

<title>CSS Clip Path</title>

<img src="figs.jpg" alt="" />

/* clip-path: polygon(70% 0, 100% 50%, 100% 100%, 0 100%, 0 0); */

clip-path: polygon(30% 0, 75% 0, 100% 0, 75% 100%, 0 100%, 0 100%);

You might also like

/* ID selector / / If id selector is applied, use # to apply style */

/* Class Selector / / If class selector is applied, use . to apply style */

/* Universal Selector / / If Universal selector(for entire web page) is

/* Grouping Selector / / If Grouping selector is applied, use * to apply