CSS Lab
1. setting color and font style to paragraph and heading
<html>
<head>
<style>
h3{
color:gold;
font-size:100pt;
}
HR{color:red}
P{margin-right:50px}
P{margin-left:35px}
</style>
</head>
<body>
<h3> This is heading 3 with CSS style</h3>
<hr>
<p> This paragraph starts from 35th pixel.
Its left margin is set to 35 pixels and its right margin is set to 50 pixels.
Text in this paragraph will leave 50 pixel space on right and 35 pixel space on left.
</body>
</html>
2. linking CSS file
<html>
<head>
<LINK REL="stylesheet" TYPE="text/css" HREF="[Link]">
</head>
<body>
<h3> This is heading 3 with CSS style</h3>
</body>
</html>
3. setting color and margin to paragraph and heading
<html>
<head>
<style>
h3{
color:gold;
font-size:100pt;
}
HR{color:red}
P{margin-right:50px}
P{margin-left:35px}
</style>
</head>
<body>
<h3> This is heading 3 with CSS style</h3>
<hr>
<p> This paragraph starts from 35th pixel.
Its left margin is set to 35 pixels and its right margin is set to 50 pixels.
Text in this paragraph will leave 50 pixel space on right and 35 pixel space on left.
<P style="color:green; margin-right: 10px;margin-left:20;"><b>
Different para</b>
</P>
</body>
</html>
4.
<html>
<head>
<style>
h1,h2,h3,h4,h5,h6 { color: yellow }
P B { color: yellow }
</style>
</head>
<body bgcolor="blue">
<h1> Heading 1</h1>
<p> Testing para without bold
<b> This is bold text
</p>
<p> Normal paragraph watch for color
<h4> This heading 4>
</body>
</html>
5. Example of css class selector
<html>
<head>
<style>
[Link] { text-align: left;
color:red;
}
[Link] { text-align: center;
color:blue;
}
[Link] { text-align: right;
color: brown;
}
</style>
</head>
<body>
<p class=right> <b>This is an example of class right</b>
<p class=center> <b>This is an example of class center</b>
<p class= left> <b>This is an example of class left</b>
<h1 class=right> heading on right
</body>
</html>
6. Example of CSS Class selector
<html>
<head>
<style>
.left { text-align: left;
color:red;
}
.center { text-align:
center; color:blue;
}
.right { text-align: right; color: brown;
}
</style>
</head>
<body>
<p class=right> <b>This is an example of class right</b>
<p class=center> <b>This is an example of class center</b>
<p class= left> <b>This is an example of class left</b>
<h1 class=right> heading on right
</body>
</html>
7. Examle of CSS ID selector
<html>
<head>
<style>
p#para1 {
text-align: center;
color: green
}
[Link] { text-align: left;
color: blue;
}
[Link] { text-align: right;
color: brown;
}
</style>
</head>
<body>
<p id=para1> <b>This is an example of id center</b></p>
<p class=right> <b>This is an example of class right</b>
<p class= left> <b>This is an example of class left</b>
<h1 id=para1> heading on right
</body>
</html>
8. Examle of CSS ID selector
<html>
<head>
<style>
#para1 {
text-align: center;
color: green
}
[Link] { text-align: left;
color: blue;
}
[Link] { text-align: right;
color: brown;
}
</style>
</head>
<body>
<p id=para1> <b>This is an example of id center</b></p>
<p class=right> <b>This is an example of class right</b>
<p class= left> <b>This is an example of class left</b>
<h1 id=para1> heading on right
</body>
</html>
9. Using CSS Span with class selector
<html>
<head>
<style>
[Link] {color: white; background-color: black;}
</style>
</head>
<body>
<P>Welcome to the <SPAN CLASS="logo"> Wonder Software</SPAN>
Web site</P>
<h1> heading on right<SPAN class="logo"> See the change</span> now</h1>
</body>
</html>
10. using CSS DIV ID selector
<html>
<head>
<style>
[Link] {color: white; background-color: black;}
</style>
</head>
<body>
<P>Welcome to the <DIV CLASS="logo"> Wonder Software</DIV>
Web site</P>
<h1> heading on right<DIV class="logo"> See the change</DIV> now</h1>
</body>
</html>
11. setting background using CSS
<html>
<head>
<style>
body { background: #000000 url('[Link]')
no-repeat fixed center }
.fore{color="orange"}
</style>
</head>
<body>
<P class="fore">Welcome to the wonder Software
Web site</P>
<h1 class="fore"> heading on right See the change now</h1>
</body>
</html>
12. Setting background using css
<html>
<head>
<style>
body { background: #000000 url('[Link]')
repeat-y fixed}
.fore{color="orange"}
</style>
</head>
<body>
<P class="fore">Welcome to the wonder Software
Web site</P>
<h1 class="fore"> heading on right See the change now</h1>
</body>
</html>
13.
<html>
<head>
<style>
[Link] { text-align: left;
color:red;
text-decoration:inderline;
text-transform:uppercase;
}
[Link] { text-align: center;
color:blue;
}
[Link] { text-align: right;
color: brown;
}
</style>
</head>
<body>
<p class=right> <b>This is an example of class right</b>
<p class=center> <b>This is an example of class center</b>
<p class= left> <b>This is an example of class left</b>
<h1 class=right> heading on right
</body>
</html>
14.
<html>
<head>
<style type="text/css">
[Link] {font-style:italic;}
[Link]{font-variant:small-caps;}
[Link] {font-family:"comic sans ms", arial;}
[Link] {font-weight:bold;}
[Link] {font-size:xx-small;}
h2
{
letter-spacing:20pt;
font-size:90pt;
text-align:center;
color:gold;
}
</style>
</head>
<body>
<h2> Celtem</h2>
<p class="fontfamily">differnet font names are: comic sans or Times Roman or
arial???</p>
<p class="fontstyle">Italic letters</p>
<p class="fontweight">looks like bold</p>
<p class="fontsize">This is small</p>
<p class="fontvar"> This is capital small</p>
</body>
</html>
Celtem
differnet font names are: comic sans or Times Roman or arial???
Italic letters
looks like bold
This is small
THIS IS CAPITAL SMALL
15.
<html>
<head>
<style>
h2{
text-align:center;
border-width:thick;
border-color:red;
Border-style:groove;
margin-left:200px;
margin-right:200px;
}
</style>
<head><body>
<h2>text with box around it</h2>
</body>
</html>