CSS Execrises 1 - 7

CSS & CSS 3
Session 1
Calling CSS
Calling css file in your html page
External style sheet
Below code is external file code (file name is style.css), this file is create external in your
project folder and save with .css extensions
Style.css file name write cod in your css file (create one file and save .css extensions )
Start css code
body {
background-color: lightblue;
}
h1 {
color: blue;
}
p{
color: red;
}
End css code
Write html program in your html body section
<html>
<head>
<title>external css calling</title>
<link rel="stylesheet" type="text/css" href="Style.css">
</head.
<body>
<h1>This is a Heading</h1>
<p>We assure comprehensive services to match the global standard of excellence</p>
<p>This is another paragraph.</p>
</body>
1
CSS & CSS 3
</html>
Output
Inline style sheet

<!DOCTYPE html>
<html>
<head>
<title>Inline Style Sheet</title>
</head>
Below inline style sheet
<body style="background-color: #FFFF00;">
This is inline style sheet
</body>
Output
2
CSS & CSS 3
Internal style sheet
<!DOCTYPE html>
<html>
<head>
<title>Internal Style Sheet</title>
Begin internal style sheet
<style type="text/css">
body {background-color: #0000FF;}
</style>
End internal style
</head>
Below internal style sheet
<body >
<h1>This is internal style sheet</h1>
</body>
Output
3
CSS & CSS 3
4
CSS & CSS 3
Session 2
Colors
Below style is inline style
Background-Color
Write background color your own color like below in your body part
<!DOCTYPE html>
<html>
<head>
<title>Background Colors</title>
</head>
<body>
Below we are writing inline style sheet
<h2 style="background-color:red">
Welcome to Tech Mahindra with Red Color
</h2>
<h2 style="background-color:blue;color:white">
Welcome to Tech Mahindra with Blue and White Color
</h2>
</body>
</html>
Output
5
CSS & CSS 3
Background-Color rgb (-,-,-)

Apply RGB Colors like below in your body part
<!DOCTYPE html>
<html>
<head>
<title>RGB Colors</title>
</head>
<body>
<h2 style="background-color:rgb(255, 0, 0)">
Background-color set by using rgb(255, 0, 0)
</h2>
</h2>
</h2>
</body >
</html>
Output
6
CSS & CSS 3
Hexadecimal Color Values

Apply color values like below in your body part
<!DOCTYPE html>
<html>
<head>
<title>Color Values</title>
</head>
<body>
<h2 style="background-color:#FF0000">
Background-color set by using #FF0000
</h2>
<h2 style="background-color:#00FF00">
Background-color set by using #00FF00
</h2>
</body>
</html>
Output
7
CSS & CSS 3
Session 3
Margins & External Image Calling

Below we are writing internal style
Margins
<!DOCTYPE html>
<html>
<head>
<title>Margins & External Image calling</title>
Write internal style like below in your html header part
Start style
<style>
div.container {
border: 1px solid red;
margin-left: 100px;
}
p.one {
margin-left: inherit;
}
</style>
</head>
<body>
<h2>Margin left</h2>
<p>Let the left margin:</p>
<div class="container">
<p class="one">This is a paragraph with an inherited left margin (from the div element).</p>
</div>
</body>
</html>
8
CSS & CSS 3
Output
Background Image
How to calling background image
<!DOCTYPE html>
<html>
<head>
<title>Background Image calling</title>
<style>
body {
background-image: url(pattern.jpg);
}
</style>
</head>
<body>
<h1>Welcome to Tech Mahindra</h1>
<p>This page has an image as background</p>
</body>
</html>
9
CSS & CSS 3
Output:
Background Image Repeat Vertically or Horizontally

<!DOCTYPE html>
<html>
<head>
<title>BG Image Repeat</title>
<style>
body {
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Strange background image...</p>
10
CSS & CSS 3
</body>
</html>
Output:
Background Image Repeat-X

<!DOCTYPE html>
<html>
<head>
<title>BG Image</title>
<style>
body {
background-repeat: repeat-x;
}
</style>
</head>
<body>
11
CSS & CSS 3
</body>
</html>
Output:
Step 4: Background Image No-Repeat

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-repeat: no-repeat;
}
</style>
12
CSS & CSS 3
</head>
<body>
</body>
</html>
Output:
Background Image No-Repeat, Position & Margin

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url(tree.jpg);
background-position: center;
margin-top:300px;
}
13
CSS & CSS 3
</style>
</head>
<body>
<p>Now the background image is only shown once, and positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so the background image
will never disturb the text.</p>
</body>
</html>
Output:
Background Attachment Fixed

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url(tree.jpg);
background-attachment: fixed;
background-position: right top;
}
14
CSS & CSS 3
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Welcome to Tech Mahindra. The background-image is fixed. Try to scroll down the
page.</p>
<p>Welcome to Tech Mahindra. </p>
<p>Welcome to Tech Mahindra. The background-image is fixed. Try to scroll down the
page.</p>
<p>If you do not see any scrollbars, try to resize the browser window.</p>
</body>
</html>
Note: we are added ex
15
CSS & CSS 3
Output:
16
CSS & CSS 3
Session 4
Borders (@All Types)
<!DOCTYPE html>
<html>
<title>Borders</title>
<head>
Start internal style
<style>
body {
}
h1 {
color: blue; border-style: dashed;
}
p{
color: red;
}
p.dotted {border-style: dotted;}
p.mix {border-style: dotted dashed solid double;}
</style>
End internal style
</head>
<body>
<p class="dotted">We assure comprehensive services to match the global standard of
excellence</p>
<p class="mix">This is another paragraph.</p>
</body>
</html>
17
CSS & CSS 3
Output
Rounded Borders
<!DOCTYPE html>
<html>
<head>
<style>
body {
}
h1 {
color: blue; border-style: dashed;
}
p{
color: red;
}
p.dotted {border-style: dotted;}
p.mix {border-style: dotted dashed solid double;}
p.normal {
18
CSS & CSS 3
border: 2px solid blue;

}
p.round1 {
border: 2px solid blue;
border-radius: 15px;
}
</style>
End internal style
</head>
<body>
<p class="dotted">We assure comprehensive services to match the global standard of
excellence</p>
<p class="mix">This is another paragraph.</p>
<p class="normal">This is another paragraph.</p>
<p class="round1">We assure comprehensive services to match the global standard of
excellence</p>
</body>
</html>
Note The "border-radius" property is not supported in IE8 and Latest versions
Output
19
CSS & CSS 3
Buttons
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {border-radius: 2px; background:#06C}
20
CSS & CSS 3
.button2 {border-radius: 4px;}

.button3 {border-radius: 8px; background:#C60}
.button4 {border-radius: 12px; background:#FC0}
.button5 {border-radius: 50%; background:#3CC}
</style>
End internal style
</head>
<body>
<h2>Rounded Buttons</h2>
<p>Add rounded corners to a button with the border-radius property:</p>
<button class="button button1">2px</button>
<button class="button button5">50%</button>
</body>
</html>
Output
21
CSS & CSS 3
Session 5
Font Icons
<!DOCTYPE html>
<html>
<head>
Calling external fonts url in your html header part
Go to https://cdnjs.com/ and enter in search bar “font-awesome”
Copy and paste url in your html header part
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
Calling external font style in your body part
<p>Some Font Awesome icons:</p>
<i class="fa fa-arrows"></i>
<i class="fa fa-battery-empty"></i>
<i class="fa fa-wpexplorer"></i>
<i class="fa fa-bars"></i>
<p>Create Font Awesome icons your (size and color):</p>
<i class="fa fa-camera-retro fa-lg" style="font-size:24px;"></i>
<i class="fa fa-spinner fa-spin fa-3x fa-fw" style="font-size:36px;"></i>
<i class="fa fa-university" style="font-size:48px;color:red;"></i>
22
CSS & CSS 3
<i class="fa fa-cloud" style="font-size:60px;color:lightblue;"></i>

</body>
</html>
Output
23
CSS & CSS 3
Section 6
Animation
Step 1: Marquee
Program:
<!DOCTYPE html>
<html>
<head>
<title>Marquee</title>
</head>
<body>
<MARQUEE WIDTH=400 HEIGHT=50>Welcome</MARQUEE></br>
<MARQUEE WIDTH="25%" BGCOLOR=YELLOW HEIGHT=50
DIRECTION=right>welcome!</MARQUEE>
<MARQUEE WIDTH=400 HEIGHT=50 DIRECTION=LeFT><p><img src="tree.jpg" alt="Forest"
width="108" height="104"></p></MARQUEE>
</body>
</html>
Output:
Step 2: Animation
Program:
<!DOCTYPE html>
<html>
<head>
<style>
24
CSS & CSS 3
Step 2-1: Animation

div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 5s infinite;
}
Step 2-2: Animation Delay
------------------------------------------------------------------------------
div {
-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
animation-delay: 2s;
}
------------------------------------------------------------------------------
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
@keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
</style>
<title>Animation</title>
</head>
<body>
25
CSS & CSS 3
<p>Make an element go from 0px to 200px from the left. The animation should take 5
seconds and it should go on forever (infinitely).</p>
<div></div>
<p><strong>Note:</strong> The animation property is not supported in Internet Explorer 9
and earlier versions.</p>
</body>
</html>
Output:
Step 3: Animation Direction

Program:
<!DOCTYPE html>
<html>
26
CSS & CSS 3
<head>
<style>
div {
width: 100px;height: 100px;
background: red;position: relative;
-webkit-animation: myfirst 5s infinite; /* Safari 4.0 - 8.0 */
-webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */
animation: myfirst 5s infinite;
animation-direction: alternate;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes myfirst {
0% {background: red; left: 0px; top: 0px;}
25% {background: yellow; left: 200px; top: 0px;}
50% {background: blue; left: 200px; top: 200px;}
75% {background: green; left: 0px; top: 200px;}
}
@keyframes myfirst {
25% {background: yellow; left: 200px; top: 0px;}
50% {background: blue; left: 200px; top: 200px;}
75% {background: green; left: 0px; top: 200px;}
}
</style>
</head>
<body>
27
CSS & CSS 3
<p>Do the animation once, then do the animation backwards:</p>

<div></div>
<p><strong>Note:</strong> The animation-direction property is not supported in Internet
Explorer 9 and earlier versions.</p>
</body>
</html>
Output:
28
CSS & CSS 3
Step 4: Animation Duration

Program:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove infinite; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
animation: mymove infinite;
animation-duration: 2s;
}
29
CSS & CSS 3
/* Safari 4.0 - 8.0 */

@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
</style>
<title>Animation Duration</title>
</head>
<body>
<p>Make the animation complete in two seconds:</p>
<div></div>
</body>
</html>
30
CSS & CSS 3
Output:
Animation Rotate Round

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:pink;
}
.animation {
text-align:center;
padding-top:25px;
width:100px;
height:100px;
background:rrgba(100 0 0 .5);
position:relative;
-webkit-animation:banner 5s infinite;
}
@keyframes banner{
0% {top:0px; background:yellow; width:100px;}
31
CSS & CSS 3
50% {top:200px; background-color:rgba(100,1000,100,0.5); width:400px;}

}
@-webkit-keyframes banner{
0% {top:0px; background:yellow; width:100px;}
}
</style>
</head>
<body>
<div class="animation"><h1>Hello World!</h1></div>
<h1>Flexitarian skateboard</h1>
<p>Flexitarian skateboard wolf, kitsch sunt sint enim roof party nihil bespoke master cleanse
assumenda Marfa. Minim craft beer selvage Truffaut dolore.
<p>Neutra dreamcatcher fanny pack 8-bit vero iPhone literally. Lo-fi quinoa non do, fugiat
bicycle rights 8-bit eu photo booth direct trade quis synth High Life.</p>
</body>
</html>
32
CSS & CSS 3
Output:
33
CSS & CSS 3
Section 7
Opacity
Opacity 30%
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.3;
filter: alpha(opacity=30);
}
</style>
End internal style
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The lower the value, the
more transparent:</p>
<p><img src="tree.jpg" alt="Forest" width="233" height="302"></p>
</body>
</html>
Output
34
CSS & CSS 3
Opacity 60%
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.6;
filter: alpha(opacity=60);
}
</style>
End internal style
</head>
<body>
<h1>Image Transparency</h1>
35
CSS & CSS 3
<p>The opacity property specifies the transparency of an element. The lower the value, the
more transparent:</p>
<p><img src="tree.jpg" alt="Forest" width="233" height="302"></p>
</body>
</html>
Output
36

CSS Execrises 1 - 7

Încărcat de

Informații document

Descriere originală:

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

CSS Execrises 1 - 7

Încărcat de

Drepturi de autor:

Formate disponibile

CSS & CSS 3

Inline style sheet

Internal style sheet

Background-Color rgb (-,-,-)

Hexadecimal Color Values

Margins & External Image Calling

Background Image Repeat Vertically or Horizontally

Background Image Repeat-X

Step 4: Background Image No-Repeat

Background Image No-Repeat, Position & Margin

Background Attachment Fixed

border: 2px solid blue;

.button2 {border-radius: 4px;}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

<i class="fa fa-cloud" style="font-size:60px;color:lightblue;"></i>

Step 2-1: Animation

Step 3: Animation Direction

<p>Do the animation once, then do the animation backwards:</p>

Step 4: Animation Duration

/* Safari 4.0 - 8.0 */

Animation Rotate Round

50% {top:200px; background-color:rgba(100,1000,100,0.5); width:400px;}

S-ar putea să vă placă și