Use of CSS without frames
1) style1.html
<html>
<head>
<title>Style sheet 1
</title>
<link rel=stylesheet type=text/css href=style1.css>
</head>
<body>
<h1>India is my country</h1>
<h2>India is my country</h2>
<h3>India is my country</h3>
<h4>India is my country</h4>
<h5>India is my country</h5>
</body>
</html>
style1.css
<style type=text/css>
<!--
body{background-color:black};
h1{color:blue; background-color:red;
text-decoration:line-through;
position:absolute;top:200px;left:400px;
font-family:"Comic Sans MS";
text-align:center};
h2{color:yellow;background-color:blue;
text-decoration:line-through;
position:absolute;top:120px;left:330px;
font-family:"Lucida Handwriting";
text-align:center};
h3{color:red;background-color:white;
text-decoration:underline;
position:absolute;top:300px;left:450px;
font-family:"Arial Rounded MT Bold";
text-align:center};
h4{color:green;background-color:yellow;
text-decoration:overline;
position:absolute;top:270px;left:270px;
font-family:"Forte";
text-align:center};
h5{color:aqua;background-color:green;
text-decoration:overline;
position:absolute;top:170px;left:550px;
font-family:"Times New Roman";
text-align:center}
-->
</style>
2) style2.html
<html>
<head>
<title>Style sheet 2
</title>
<link rel=stylesheet type=text/css href=style2.css>
</head>
<body>
<h1>United We Stand, Divided We Fall</h1>
<h2>United We Stand, Divided We Fall</h2>
<h3>United We Stand, Divided We Fall</h3>
<h4>United We Stand, Divided We Fall</h4>
<h5>United We Stand, Divided We Fall</h5>
</body>
</html>
style2.css
<style type=text/css>
<!--
body{background-color:orange};
h1{color:red; background-color:blue;
position:absolute;top:300px;right:400px;
font-family:"Century Gothic"};
h2{color:yellow;background-color:black;
position:absolute;top:250px;right:400px;
font-family:forte};
h3{color:red;background-color:white;
position:absolute;top:200px;right:400px;
font-family:"Arial Rounded MT Bold"};
h4{color:white;background-color:green;
position:absolute;top:150px;right:400px;
font-family:"Forte"};
h5{color:black;background-color:aqua;
position:absolute;top:100px;right:400px;
font-family:"Times New Roman"}
-->
</style>
3) style3.html
<html>
<head>
<title>Style sheet 3
</title>
<link rel=stylesheet type=text/css href=style3.css>
</head>
<body>
<h1>Practice makes man perfect</h1>
<h2>Practice makes man perfect</h2>
<h3>Practice makes man perfect</h3>
<h4>Practice makes man perfect</h4>
<h5>Practice makes man perfect</h5>
</body>
</html>
style3.css
<style type=text/css>
<!--
body{background-color:gray};
h1{color:black; background-color:white;
position:absolute;top:260px;right:30px;
font-family:"Century Gothic"};
h2{color:yellow;background-color:green;
position:absolute;top:40px;right:50px;
font-family:forte};
h3{color:red;background-color:white;
position:absolute;top:80px;right:70px;
font-family:"Arial Rounded MT Bold"};
h4{color:white;background-color:red;
position:absolute;top:30px;right:90px;
font-family:"Forte"};
h5{color:black;background-color:aqua;
position:absolute;top:150px;right:110px;
font-family:"Times New Roman"}
-->
</style>
<html>
<head>
<title>Style sheet 1
</title>
<link rel=stylesheet type=text/css href=style1.css>
</head>
<body>
<h1>India is my country</h1>
<h2>India is my country</h2>
<h3>India is my country</h3>
<h4>India is my country</h4>
<h5>India is my country</h5>
</body>
</html>
style1.css
<style type=text/css>
<!--
body{background-color:black};
h1{color:blue; background-color:red;
text-decoration:line-through;
position:absolute;top:200px;left:400px;
font-family:"Comic Sans MS";
text-align:center};
h2{color:yellow;background-color:blue;
text-decoration:line-through;
position:absolute;top:120px;left:330px;
font-family:"Lucida Handwriting";
text-align:center};
h3{color:red;background-color:white;
text-decoration:underline;
position:absolute;top:300px;left:450px;
font-family:"Arial Rounded MT Bold";
text-align:center};
h4{color:green;background-color:yellow;
text-decoration:overline;
position:absolute;top:270px;left:270px;
font-family:"Forte";
text-align:center};
h5{color:aqua;background-color:green;
text-decoration:overline;
position:absolute;top:170px;left:550px;
font-family:"Times New Roman";
text-align:center}
-->
</style>
2) style2.html
<html>
<head>
<title>Style sheet 2
</title>
<link rel=stylesheet type=text/css href=style2.css>
</head>
<body>
<h1>United We Stand, Divided We Fall</h1>
<h2>United We Stand, Divided We Fall</h2>
<h3>United We Stand, Divided We Fall</h3>
<h4>United We Stand, Divided We Fall</h4>
<h5>United We Stand, Divided We Fall</h5>
</body>
</html>
style2.css
<style type=text/css>
<!--
body{background-color:orange};
h1{color:red; background-color:blue;
position:absolute;top:300px;right:400px;
font-family:"Century Gothic"};
h2{color:yellow;background-color:black;
position:absolute;top:250px;right:400px;
font-family:forte};
h3{color:red;background-color:white;
position:absolute;top:200px;right:400px;
font-family:"Arial Rounded MT Bold"};
h4{color:white;background-color:green;
position:absolute;top:150px;right:400px;
font-family:"Forte"};
h5{color:black;background-color:aqua;
position:absolute;top:100px;right:400px;
font-family:"Times New Roman"}
-->
</style>
3) style3.html
<html>
<head>
<title>Style sheet 3
</title>
<link rel=stylesheet type=text/css href=style3.css>
</head>
<body>
<h1>Practice makes man perfect</h1>
<h2>Practice makes man perfect</h2>
<h3>Practice makes man perfect</h3>
<h4>Practice makes man perfect</h4>
<h5>Practice makes man perfect</h5>
</body>
</html>
style3.css
<style type=text/css>
<!--
body{background-color:gray};
h1{color:black; background-color:white;
position:absolute;top:260px;right:30px;
font-family:"Century Gothic"};
h2{color:yellow;background-color:green;
position:absolute;top:40px;right:50px;
font-family:forte};
h3{color:red;background-color:white;
position:absolute;top:80px;right:70px;
font-family:"Arial Rounded MT Bold"};
h4{color:white;background-color:red;
position:absolute;top:30px;right:90px;
font-family:"Forte"};
h5{color:black;background-color:aqua;
position:absolute;top:150px;right:110px;
font-family:"Times New Roman"}
-->
</style>
Comments
Post a Comment