Algorithm :
Start the cascading program.
Give link from main page to other like cascading, Embedded..
Write the code for separate page finally terminate program
Source code for html Programming for Home page and Cascading, Embedded, Inline style sheet
<!-- Home.html -->
<html>
<head>
<title>Cascading Style Sheets</title>
</head>
<body alink="blue" vlink="brown">
<h1><u><b><font face="Monotype corsiva" color="red">
Different types of Cascading Style Sheets</font> </b></u></h1>
<br />
<font face="Arial"size="6">
<a href ="inline.html" style="text-decoration :none;"> 1. Inline Style Sheet</a><br />
<a href ="embedded.html" style="text-decoration :none;"> 2. Embeded Style Sheet</a><br />
<a href ="external.html" style="text-decoration :none;"> 3. External Style Sheet</a><br />
<a href ="import.html" style="text-decoration :none;"> 4. Imported Style Sheet</a><br /></font>
</body>
</html>
<!-- embedded.html -->
<html>
<head>
<title>Embedded Style Sheet</title>
<style type="text/css">
ol{list-style-type:decimal}
h1{text-align: left; background:antiquewhite;font-family:monotype corsiva;color:red}
h3{text-align: right; font-family:arial;color:blue}
</style>
</head>
<body>
<ol class="lroman"><h1>
<li>Embedded style sheet</li></h1>
<br />
<h3>
Embedded style is the style attached to one specific document.
The information is specified as a content of the style element
inside the head element and wil apply to the entire documents.
</h3></ol>
</body>
</html>
<!-- inline.html -->
<html>
<head>
<title>Inline Style Sheet</title>
</head>
<body>
<ol class="decimal">
<h1 style="font-family :Monotype Corsiva ;background-color:antiquewhite ;"><li> Inline Style Sheet</li></h1>
<h3>
<p style="text-indent :30pt;color:blue;font-family :arial;">
Inine Style is the style attached to one specific element.
The style is specified directly in the start tag as a value of the style attribute well apply
exclusively to this specific element occurrence.
</p></h3>
</ol>
</body>
</html>
<!-- import.html -->
<html>
<head><title>Imported Style Sheet</title>
<link rel= stylesheet href="style2.css" type="text/css">
</head>
<body>
<h1>1. Imported Style Sheet</h1>
<h3> Imported style sheet is a shet that can be imported to another sheet.
This alignes exacting one main sheet containing declarations that apply to
the whle site and partial sheets containing declarations that apply to specific
elements.</h3>
</body>
</html>
<!-- external.html -->
<html>
<head>
<title>External Style Sheet</title>
<link rel=Stylesheet href="style1.css" type="text/css" />
</head>
<body>
<h1>1. External Style Sheet</h1><br />
<h3>
An external style sheet is a template documents/files
containing style info which can be linked with any number
of the documents. This is a very convenient way of formating
the entire site as well as restyling it by editing just one file</h3>
</body>
</html>
<!-- style1.css -->
<style type="text/css">
ol{list-style-type:decimal}
h1{text-align: left; background:antiquewhite;font-family:monotype corsiva;color:Green}
h3{text-align: right; font-family:TimesNewRoman;color:Red}
</style>
<!-- style2.css -->
<style type="text/css">
ol{list-style-type:decimal}
h1{text-align: left; background:antiquewhite;font-family:monotype corsiva;color:Orange}
h3{text-align: right; font-family:arial;color:Yellow}
</style>
1 comment:
really great da...mudiyala...un aarvathirku oru alave illama pochu...:)
Post a Comment