We create a Web Page that uses three types of style sheets like inline style sheet, internal style sheets and external style sheet in One Web Page. make sure that than these style sheets have common elements so that the cascade effect is properly visible.
First of all open notepad to create a CSS file namely exter.css
h2{font-size:17pt;font-weight:bold;}
h3{font-family:Verdana;color:green;}
p{font-family:Times;font-size:14pt;margin-top:2;margin-bottom:2}
blockquote{background:url('') no-repeat;font-size:16pt;font-style:italic;}
a{color:purple;}
That the external CSS file that we have created here, contains style rules for five elements like h2, h3, p, blockquote and a.
Now create HTML file namely multiple.html
<html>
<head>
<title> Multiple Style Sheet</title>
<link rel="stylesheet" type="text/css" href="exter.css">
<style type="text/css">
h3{font-family:courier;color:blue;}
a{background-color:pink;}
</style>
</head>
<body bgcolor=#FBF6D8>
<h2>Wecome to Quotable Quotes Page</h2>
<p>Our school houses have contributed the following quotes for the current month.</p>
<h3>House:PANINI</h3>
<p style="font-family:Verdana">This month our students have voted for the following word of<b> Abraham Lincoln</b></p>
<blockquote>
Nearly all men can stand adversity, but if you want to test a man's character <br>givn him power.
</blockquote>
<h3>House: PATANJILI</h3>
<p>This month our students have voted for the following words of
<a href="morrie.html"><b>Morrie Schwartz</b></a> from the book
<i>Tuesday With Morrie</i></p>
<blockquote>
The most important thing in life is to learn how to give out love <br> and to let it come in.
</blockquote>
<h3>House :VASHITHA</h3>
<p style="font-family:Arial"> This month our students have voted for the following word of <a href="isaac.html"><b>Isaac Newton</b></a></p>
<blockquote style="background-color:red;">
Tact is the knack of making a point <br>without making an enemy.
</blockquote>
<h3 style="font-family:Times">House: VYASH</h3>
<p>This month our students have voted for the following world of <b>Dwight D.
Eisenhower</b>
</p>
<blockquote>
A people that values its privileges above its principles</br>
soon loses both.
</blockquote>
</body>
</html>
Upon opening the page in a web browser, the page loks like:
First of all open notepad to create a CSS file namely exter.css
h2{font-size:17pt;font-weight:bold;}
h3{font-family:Verdana;color:green;}
p{font-family:Times;font-size:14pt;margin-top:2;margin-bottom:2}
blockquote{background:url('') no-repeat;font-size:16pt;font-style:italic;}
a{color:purple;}
That the external CSS file that we have created here, contains style rules for five elements like h2, h3, p, blockquote and a.
Now create HTML file namely multiple.html
<html>
<head>
<title> Multiple Style Sheet</title>
<link rel="stylesheet" type="text/css" href="exter.css">
<style type="text/css">
h3{font-family:courier;color:blue;}
a{background-color:pink;}
</style>
</head>
<body bgcolor=#FBF6D8>
<h2>Wecome to Quotable Quotes Page</h2>
<p>Our school houses have contributed the following quotes for the current month.</p>
<h3>House:PANINI</h3>
<p style="font-family:Verdana">This month our students have voted for the following word of<b> Abraham Lincoln</b></p>
<blockquote>
Nearly all men can stand adversity, but if you want to test a man's character <br>givn him power.
</blockquote>
<h3>House: PATANJILI</h3>
<p>This month our students have voted for the following words of
<a href="morrie.html"><b>Morrie Schwartz</b></a> from the book
<i>Tuesday With Morrie</i></p>
<blockquote>
The most important thing in life is to learn how to give out love <br> and to let it come in.
</blockquote>
<h3>House :VASHITHA</h3>
<p style="font-family:Arial"> This month our students have voted for the following word of <a href="isaac.html"><b>Isaac Newton</b></a></p>
<blockquote style="background-color:red;">
Tact is the knack of making a point <br>without making an enemy.
</blockquote>
<h3 style="font-family:Times">House: VYASH</h3>
<p>This month our students have voted for the following world of <b>Dwight D.
Eisenhower</b>
</p>
<blockquote>
A people that values its privileges above its principles</br>
soon loses both.
</blockquote>
</body>
</html>
Upon opening the page in a web browser, the page loks like:
No comments:
Post a Comment