CSS Selectors, Properties and Values
Example-1 CSS Animation properties and values
<!DOCTYPE html>
<html>
<head>
<style>
body
{
align-items:center;
justify-content: space-between;
}
div
{
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 45s;
color:black;
animation-delay: 10ms;
animation-direction: scroll;
font-weight: bold;
}
@keyframes example
{
0% {background-color:red; left:0px; right: 100px; top:20px;color:yellow;animation-play-state: paused;}
15% {background-color:violet; left:200px; top:20px;color:black;-o-animation-fill-mode: forwards;}
30% {background-color:blue; left:200px; top:200px;color:blanchedalmond}
45% {background-color:rgb(81, 0, 128); left:0px; top:200px;}
55% {background-color:mediumvioletred; left:0px; right: 100px;top:20px;}
60% {background-color:yellow; left:200px; top:20px;}
70% {background-color:chartreuse; left:200px; top:200px; color:red}
85% {background-color:green; left:0px; top:200px; color:rgb(248, 16, 151)}
100% {background-color:rgb(248, 16, 151); left:0px; right: 100px;top:20px;}
}
#slidein
{
animation-duration: 40s;
animation-name: slidein;
animation-iteration-count: 2;
animation-direction: alternate;
}
@keyframes slidein
{
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
#slidein1
{
animation-duration: 40s;
animation-name: mymove;
animation-iteration-count: 2;
animation-direction: alternate;
}
@keyframes slidein1
{
from {
margin-right:100%;
width:300%
}
to {
margin-right:0%;
width:100%;
}
}
</style>
</head>
<body>
<h3><marquee bgcolor="yellow" loop="20" scrollamount="10" hspace="5%" vspace="5%" direction="" behavior="alternate"><b>Web Technology</h3>
<div>HTML</div><br>
<div id="slidein">CSS</div><br>
<div id="slidein1">JAVASCRIPT</div><br>
</marquee>
</body>
</html>
Example-2 CSS Layout, properties and values
<!DOCTYPE html>
<html>
<head>
<title>Example-CSS</title>
<style type="text/css">
#header
{
background-color: blanchedalmond;
text-align: center;
height: 70px;
}
#footer
{
clear:both;
background-color: blanchedalmond;
text-align: center;
height: 70px;
}
#menu
{
background-color:cornflowerblue;
float: right;
width:200px;
height: 200px;
}
#content
{
background-color: darkkhaki;
position: absolute;
text-align: center;
height: 200px;
width: 89%;
}
</style>
</head>
<body>
<div id="header">
<h2>Smart Classroom</h2>
</div>
<div id="content">
<h2>Welcome to Home lerning!</h2>
</div>
<div id="menu">
<ul>
<li>Home</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<div id="footer">
<h5>all rights reserved: design and development by: IT department-2021</h5>
</div>
</body>
</html>