HTML and CSS Reference
In-Depth Information
EXAMPLE
14.32
<html>
<head><title>Coloring Text</title>
<style type="text/css">
body
{ background-color: yellow;
font-size: 22pt;
font-weight: bold;
}
1
.red { color:rgb(255,0,0);
/* Defining classes */
font-style: verdana;
font-size: 32;
}
2
.blue { color:blue;
font-style: verdana;
font-size: 36;
}
3
.green { color: green;
font-style: verdana;
font-size: 40;
}
</style>
<script type="text/javascript">
4
window.onload=init;
function init(){
div1=document.getElementById("first");
div2=document.getElementById("second");
div3=document.getElementById("third");
}
5
function colorText(){
div1.style.left = 50;
div1.style.top = 50;
6
div1.className="red";
div2.style.left = 100;
div2.style.top = 100;
7
div2.className="blue";
div3.style.left = 150;
div3.style.top = 150;
8
div3.className="green";
}
</script>
</head>
<body>
9
<div id="first"
style="position:absolute; top:50px">It's a
one,</div>
<div id="second"
style="position:absolute; top:100px">and a
two,</div>
Continues
