Cascading embedded inline External imported style sheet dhtml

Algorithm Definition
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
Save as 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>


Save as 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>

Save as import.html
<html>
<head><title>Imported Style Sheet</title>
<link rel= stylesheet href="style2.css" type="text/css">
</head>
<body>
<h1>4. 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>


Save as 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>


Save as external.html
<html>
<head>
<title>External Style Sheet</title>
<link rel=Stylesheet href="style1.css" type="text/css" />
</head>
<body>
<h1>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>
Cascading inline external imported embedded style sheet.

Cascading inline style sheet

Related post