<!DOCTYPE html>
<html>
<head>
<style type = "text/css" media = "all">
body {
background-color: linen;
}
h1 {
color: red;
margin-left: 30px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<head>
</head>
<body>
<h1 style = "color:#36C;"> This is inline CSS </h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
/* This is a single-line comment */
text-align: center;
}
/* This is a multi-line comment */
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
/* This is a single-line comment */
text-align: center;
}
/* This is a multi-line comment */
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<style>
h3,p{
background-color: lightblue;
}
</style>
</head>
<body>
<h3>This is first CSS page.</h3>
<p>Hello Tutorial Root. This is an example of CSS background-color.
<h1>CSS First Example</h1>
<p>This is paragraph.</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has an image as the background!</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background-image: url("images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>CSS Tutorials</p>
<p>This page has an Repeat Background Image</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background-image: url("images/norept-back.jpg");
background-position:100px;
}
</style>
</head>
<body>
<p>CSS Tutorials</>
</body>
</html>
font-family property
font-size property
font-style property
font-variant property
font-weight property
<!DOCTYPE HTML>
<html>
<head>
<title>Font Family Example</title>
</head>
<body>
<p style="font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the default serif font
depending on which font you have at your system.
</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Font Style Example</title>
<style>
h2{ font-style: oblique; }
p { font-style: italic; }
h3 { font-style: normal; }
</style>
</head>
<body>
<h2>Wellcome to My Website </h2>
<p>This text will be prepare, in italic style</p>
<h3>My Name is Ammu.</h3>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Font Variant Example</title>
<style>
p{font-variant: small-caps;}
</style>
</head>
<body>
<p>Wellcome to My Website</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Font Weight Example</title>
</head>
<body>
<p style="font-weight:bold;">This font is bold.</p>
<p style="font-weight:bolder;">This font is bolder.</p>
<p style="font-weight:300;">This font is 300 weight.</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Font Size Example</title>
<style>
h1 {
font-size: 250%;
}
h2 {
font-size: 200%;
}
p {
font-size: 100%;
}
</style>
</head>
<body>
<h1>Wellcome to My Website</h1>
<h2>My Name is Ammu</h2>
<p>I Live in Telangana.</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Text Color Example</title>
<style>
body {
color: red;
}
h1 {
color: #7fff00;
}
p.ex {
color: rgb(220,20,60);
}
</style>
</head>
<body>
<h1>Wellcome to My Website</h1>
<p>My Name is Ammu</p>
<p class="ex">I Live in Telangana</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Text Direction Example</title>
<style>
div.x1 {
direction: rtl;
}
h1 {
direction: ltr;
color:red;
}
</style>
</head>
<body>
<div>Wellcome to My Website</div>
<h3>My Name is Ammu</h3>
<div class="x1">I Live in Telangana</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Letter Spacing Example</title>
<style>
h1 {
letter-spacing: 3px;
color:green;
}
h2 {
letter-spacing: -4px;
color:red;
}
</style>
</head>
<body>
<h1>Wellcome to My Website</h1>
<h2>My Name is Ammu</h2>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Text Indent Example</title>
<style>
p {
text-indent: 60px;
color:green;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Text Alignment Example</title>
<style>
h1 {
text-align: center;
color:green;
}
h2 {
text-align: left;
color:red;
}
h3 {
text-align: right;
color:blue;
}
</style>
</head>
<body>
<h1>Wellcome to My Website</h1>
<h2>My Name is Ammu</h2>
<h3>I Live in Telangana</h3>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Text Decoration Example</title>
<style>
h1 {
text-decoration: overline;
color:green;
}
h2 {
text-decoration: line-through;
color:red;
}
h3 {
text-decoration: underline;
color:blue;
}
</style>
</head>
<body>
<h1>Wellcome to My Website</h1>
<h2>My Name is Ammu</h2>
<h3>I Live in Telangana</h3>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Text Shadow Example</title>
<style>
h1 {
text-shadow: 3px 3px #FF0000;
}
</style>
</head>
<body>
<h1>Wellcome to My Website</h1>
<h2>My Name is Ammu</h2>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Image Border Example</title>
<style>
#borderimg1 {
border: 8px solid transparent;
padding: 14px;
-webkit-border-image: url(border.png) 30 round;
-o-border-image: url(border.png) 30 round;
border-image: url(border.png) 30 round;
}
</style>
</head>
<body>
<p id="borderimg1">Wellcome To My Website. My Name is Ammu. I Live in Telangana.</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Image Height Example</title>
<style>
img.normal {
height: auto;
}
img.big {
height: 120px;
}
p.yx {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<img class="normal" src="css.gif" width="94" height="74"><br>
<img class="big" src="css.gif" width="94" height="74">
<p class="yx">Wellcome To My Website. My Name is Ammu. I Live in Telangana.</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Image Width Example</title>
<style>
img.normal {
height: auto;
}
img.big {
width: 120px;
}
p.yx {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<img class="normal" src="css.gif" width="74" height="74"><br>
<img class="big" src="css.gif" width="74" height="74">
<p class="yx">Wellcome To My Website. My Name is Ammu. I Live in Telangana.</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Image Opacity Example</title>
<style>
div {
background-color: red;
opacity: 0.5;
filter: Alpha(opacity=50);
}
</style>
</head>
<body>
<div>Wellcome To My Website. My Name is Ammu. I Live in Telangana.
Wellcome To My Website. My Name is Ammu. I Live in Telangana.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
background-color: yellow;
}
</style>
</head>
<body>
<a href="http://www.tutorialsroot.com">Tutorialsroot</a>
<a href="http://www.tutorialsroot.com">Tutorialsroot</a>
<p><b>Note:</b> The :link selector style links to pages you have not visited yet.</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#5F9EA0;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#8A2BE2;
padding:10px;
}
</style>
</head>
<body>
<table class="one">
<caption>Collapse Border Example</caption>
<tr><td class="a"> Cell A Collapse Example</td></tr>
<tr><td class="b"> Cell B Collapse Example</td></tr>
</table>
<br />
<table class="two">
<caption>Separate Border Example</caption>
<tr><td class="a"> Cell A Separate Example</td></tr>
<tr><td class="b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
table.one {
border-collapse:separate;
width:410px;
border-spacing:12px;
}
table.two {
border-collapse:separate;
width:410px;
border-spacing:12px 52px;
}
</style>
</head>
<body>
<table class="one" border="1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br />
<table class="two" border="1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>
</head>
<body>
<table style="width:400px; border:1px solid red;">
<caption class="top">
This caption will appear at the top
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style="width:400px; border:1px solid red;">
<caption class="bottom">
This caption will appear at the bottom
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style="width:400px; border:1px solid red;">
<caption class="left">
This caption will appear at the left
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style="width:400px; border:1px solid red;">
<caption class="right">
This caption will appear at the right
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
table.empty{
width:400px;
border-collapse:separate;
empty-cells:hide;
}
td.empty{
padding:5px;
border-style:solid;
border-width:1px;
border-color:#B22222;
}
</style>
</head>
<body>
<table class="empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty"></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
table.auto {
table-layout: auto
}
table.fixed{
table-layout: fixed
}
</style>
</head>
<body>
<table class="auto" border="1" width="100%">
<tr>
<td width="20%">11111111111111111111111111111</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>
<br />
<table class="fixed" border="1" width="100%">
<tr>
<td width="20%">122222222</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p.example1{
border:1px solid;
border-bottom-color:#00FFFF;
border-top-color:#0000FF;
border-left-color:#A52A2A;
border-right-color:#7FFF00;
}
p.example2{
border:1px solid;
border-color:#006400;
}
</style>
</head>
<body>
<p class="example1">
This example is showing all borders in different colors.
</p>
<p class="example2">
This example is showing all borders in different color only.
</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Border Style Property Example</title>
<style>
p.none {border-style: none;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}
</style>
</head>
<body>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Border Width Property Example</title>
<style>
p.one {
border-style: solid;
border-width: 4px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: solid;
border-width: 2px;
}
</style>
</head>
<body>
<p class="one">My Name is Ammu.</p>
<p class="two">My Name is Ammu.</p>
<p class="three">My Name is Ammu.</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Margins Top Property Example</title>
<style>
p.margin {
margin-top: 2cm;
}
p.margin2 {
margin-top: 20%;
}
</style>
</head>
<body>
<p class="margin">Wellcome to My Website. My Name is Ammu. I Live in Telangana.</p>
<p class="margin2">Wellcome to My Website. My Name is Ammu. I Live in Telangana.</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Margins Bottom Property Example</title>
<style>
p.margin {
margin-bottom: 2cm;
}
p.margin2 {
margin-bottom: 20%;
}
</style>
</head>
<body>
<p class="margin">Wellcome to My Website. My Name is Ammu. I Live in Telangana.</p>
<p class="margin2">Wellcome to My Website. My Name is Ammu. I Live in Telangana.</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Margins Left Property Example</title>
<style>
p.margin {
margin-left: 2cm;
}
p.margin2 {
margin-left: 40%;
}
</style>
</head>
<body>
<p>Wellcome to My Website. My Name is Ammu. I Live in Telangana.</p>
<p class="margin">Wellcome to My Website. My Name is Ammu.</p>
<p class="margin2">Wellcome to My Website. My Name is Ammu.</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Margins Right Property Example</title>
<style>
p.margin {
margin-right: 10cm;
}
p.margin2 {
margin-right: 40%;
}
</style>
</head>
<body>
<p>Wellcome to My Website. My Name is Ammu. I Live in Telangana.</p>
<p class="margin">Wellcome to My Website. My Name is Ammu.</p>
<p class="margin2">Wellcome to My Website. My Name is Ammu.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Padding Top Property Example</title>
<style>
p.padding {
padding-top: 2cm;
}
p.padding2 {
padding-top: 40%;
}
</style>
</head>
<body>
<p class="padding">Wellcome to My Website. My Name is Ammu. I Live in Telangana.</p>
<p class="padding2">Wellcome to My Website. My Name is Ammu. I Live in Telangana.</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Padding Bottom Property Example</title>
<style>
p.padding {
padding-bottom: 2cm;
}
p.padding2 {
padding-bottom: 40%;
}
</style>
</head>
<body>
<p class="padding">Wellcome to My Website. My Name is Ammu. I Live in Telangana.</p>
<p class="padding2">Wellcome to My Website. My Name is Ammu. I Live in Telangana.</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Padding Left Property Example</title>
<style>
p.padding {
padding-left: 2cm;
}
p.padding2 {
padding-left: 40%;
}
</style>
</head>
<body>
<p>Wellcome to My Website. My Name is Ammu. I Live in Telangana.</p>
<p class="padding">Wellcome to My Website. My Name is Ammu.</p>
<p class="padding2">Wellcome to My Website. My Name is Ammu.</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Padding Right Property Example</title>
<style>
p.padding {
padding-right: 2cm;
}
p.padding2 {
padding-right: 40%;
}
</style>
</head>
<body>
<p>Wellcome to My Website. My Name is Ammu. I Live in Telangana.</p>
<p class="padding">Wellcome to My Website. My Name is Ammu.</p>
<p class="padding2">Wellcome to My Website. My Name is Ammu.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.alias {
cursor: alias;
}
.all-scroll {
cursor: all-scroll;
}
.auto {
cursor: auto;
}
.cell {
cursor: cell;
}
.context-menu {
cursor: context-menu;
}
.col-resize {
cursor: col-resize;
}
.copy {
cursor: copy;
}
.crosshair {
cursor: crosshair;
}
.default {
cursor: default;
}
.e-resize {
cursor: e-resize;
}
.ew-resize {
cursor: ew-resize;
}
.grab {
cursor: -webkit-grab;
cursor: grab;
}
.grabbing {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.help {
cursor: help;
}
.move {
cursor: move;
}
.n-resize {
cursor: n-resize;
}
.ne-resize {
cursor: ne-resize;
}
.nesw-resize {
cursor: nesw-resize;
}
.ns-resize {
cursor: ns-resize;
}
.nw-resize {
cursor: nw-resize;
}
.nwse-resize {
cursor: nwse-resize;
}
.no-drop {
cursor: no-drop;
}
.none {
cursor: none;
}
.not-allowed {
cursor: not-allowed;
}
.pointer {
cursor: pointer;
}
.progress {
cursor: progress;
}
.row-resize {
cursor: row-resize;
}
.s-resize {
cursor: s-resize;
}
.se-resize {
cursor: se-resize;
}
.sw-resize {
cursor: sw-resize;
}
.text {
cursor: text;
}
.url {
cursor: url(myBall.cur), auto;
}
.w-resize {
cursor: w-resize;
}
.wait {
cursor: wait;
}
.zoom-in {
cursor: zoom-in;
}
.zoom-out {
cursor: zoom-out;
}
</style>
<title></title>
</head>
<body>
<h1>The cursor Property</h1>
<p>Mouse over the words to change the mouse cursor.</p>
<p class="alias">alias</p>
<p class="all-scroll">all-scroll</p>
<p class="auto">auto</p>
<p class="cell">cell</p>
<p class="context-menu">context-menu</p>
<p class="col-resize">col-resize</p>
<p class="copy">copy</p>
<p class="crosshair">crosshair</p>
<p class="default">default</p>
<p class="e-resize">e-resize</p>
<p class="ew-resize">ew-resize</p>
<p class="grab">grab</p>
<p class="grabbing">grabbing</p>
<p class="help">help</p>
<p class="move">move</p>
<p class="n-resize">n-resize</p>
<p class="ne-resize">ne-resize</p>
<p class="nesw-resize">nesw-resize</p>
<p class="ns-resize">ns-resize</p>
<p class="nw-resize">nw-resize</p>
<p class="nwse-resize">nwse-resize</p>
<p class="no-drop">no-drop</p>
<p class="none">none</p>
<p class="not-allowed">not-allowed</p>
<p class="pointer">pointer</p>
<p class="progress">progress</p>
<p class="row-resize">row-resize</p>
<p class="s-resize">s-resize</p>
<p class="se-resize">se-resize</p>
<p class="sw-resize">sw-resize</p>
<p class="text">text</p>
<p class="url">url</p>
<p class="w-resize">w-resize</p>
<p class="wait">wait</p>
<p class="zoom-in">zoom-in</p>
<p class="zoom-out">zoom-out</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
outline-color: red;
}
p.dotted {
outline-style: dotted;
}
p.dashed {
outline-style: dashed;
}
p.solid {
outline-style: solid;
}
p.double {
outline-style: double;
}
p.groove {
outline-style: groove;
}
p.ridge {
outline-style: ridge;
}
p.inset {
outline-style: inset;
}
p.outset {
outline-style: outset;
}
</style>
<title>CSS Outlines Example</title>
</head>
<body>
<h2>The outline-style Property</h2>
<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline. outline-color value.</p>
<p class="ridge">A ridge outline. outline-color value.</p>
<p class="inset">An inset outline. outline-color value.</p>
<p class="outset">An outset outline. outline-color value.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
height: 200px;
width: 50%;
background-color: blue;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<p>This div element has a height of 200px and a width of 50%:</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Scrollbars Example</title>
</head>
<style type="text/css">
.scroll{
display:block;
border: 1px solid green;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:scroll;
}
.auto{
display:block;
border: 1px solid green;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:auto;
}
</style>
<body>
<p>Example of scroll value:</p>
<div class="scroll">
Lorem Ipsum has been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book.
</div>
<br />
<p>Example of auto value:</p>
<div class="auto">
It is a long established fact that a reader will be distracted by
the readable content of a page when looking at its layout.
Lorem Ipsum is simply dummy text of the printing and
typesetting industry.
</div>
</body>
</html>
<html>
<head>
</head>
<body>
<p>
This paragraph should be visible in normal way.
</p>
<p style="visibility:hidden;">
This paragraph should not be visible.
</p>
</body>
</html>
<html>
<head>
</head>
<body>
<div style="position:relative;left:80px;top:2px;background-color:yellow;">
This div has relative positioning.
</div>
</body>
</html>
<html>
<head>
</head>
<body>
<div style="position:absolute; left:80px; top:20px; background-color:yellow;">
This div has absolute positioning.
</div>
</body>
</html>
<html>
<head>
</head>
<body>
<div style="position:fixed; left:80px; top:20px; background-color:yellow;">
This div has fixed positioning.
</div>
</body>
</html>
<html>
<head>
</head>
<body>
<div style="background-color:red; width:300px;
height:100px; position:relative; top:10px; left:80px; z-index:2">
</div>
<div style="background-color:blue; width:300px;
height:100px; position:relative; top:-60px; left:35px; z-index:1;">
</div>
<div style="background-color:green; width:300px;
height:100px; position:relative; top:-220px; left:120px; z-index:3;">
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
background-color: #7FFF00;
color: white;
padding: 25px;
text-align: center;
}
div:hover {
background-color: blue;
}
</style>
</head>
<body>
<p>Mouse over the div element below to change its background color:</p>
<div>Mouse Over Me</div>
</body>
</html>
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src="logo.png" alt="CSS Logo"
style="Filter: Alpha(Opacity=100,
FinishOpacity=0,
Style=2,
StartX=20,
StartY=40,
FinishX=0,
FinishY=0)" />
<p>Text Example:</p>
<div style="width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: blue;
Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Tutorials</div>
</body>
</html>
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src="logo.png" alt="CSS Logo"
style="Filter: Blur(Add = 0, Direction = 225, Strength = 10)">
<p>Text Example:</p>
<div style="width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: blue;
Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials</div>
</body>
</html>
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src="css.gif"
alt="CSS Logo" style="Filter: Chroma(Color = #FFFFFF)">
<p>Text Example:</p>
<div style="width: 580;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: #3300FF;
Filter: Chroma(Color = #3300FF)">CSS Tutorials</div>
</body>
</html>
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src="logo.png"
alt="CSS Logo"
style="Filter: Chroma(Color = #000000)
DropShadow(Color=#FF0000,
OffX=2,
OffY=2, Positive=1)">
<p>Text Example:</p>
<div style="width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
Filter: DropShadow(Color=#000000, OffX=2, OffY=2, Positive=1)">CSS Tutorials</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser</h1>
<p>The media query will only .....</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser</h1>
<p>The media query will only .....</p>
</body>
</html>